HTML Forms

HTML Forms

Forms are used to select different types of user input. A form is an area that contains different form elements (like text fields, text area fields, drop-down menus, radio buttons, checkboxes etc.). Form elements are elements that allow the user to enter information in a form. A form is defined with the <form> tag. For example, 

The most commonly used form tag is <input> tag. The type of input is specified with the type attribute within the <input> tag. For example, 

Output:

First name:

Last name:

Radio buttons are used when you want the user to select one of a limited number of choices. For example,

Output:

Checkboxes are used when you want to select one or more options of a limited number of choices. For example, 

Output:

Another input type is submit button. When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input. For example,

Output:

If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "submit.php". The page will show you the received input. Note: You can use other different form elements as well.

The method attribute of <form> tag specifies how to send form-data (the form-data is sent to the page specified in the action attribute). We can use “get” and “post” as values of method attribute. When we use get, form-data can be sent as URL variables and when we use post, form-data are sent as HTTP post. 

Notes on the "get" method:  

1. This method appends the form-data to the URL in name/value pairs  

2. There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred. 

3. Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar) 

Notes on the "post" method: 

1. This method sends the form-data as an HTTP post transaction.

2. The "post" method is more robust and secure than "get", and "post" does not have size limitations.

A drop-down box is a selectable list. See code below:

Output:

Form Validation is done from html side by adding required attribute in the <input> tag, for example,

Output: