Forms on the web are a way for web authors to collect data from their viewers. There are many different form elements available with which to gather this information, such as:
<input type="text" ... />
<input type="password" ... />
<input type="checkbox" ... />
Select movies you like: Action Comedy Horror
<input type="radio" ... />
Do you like corn? Yes No
<select ...><option ...></option></select>
<input type="file" ... />
<input type="hidden" ... />
<input type="submit" ... />
<input type="reset" ... />
<input type="button" ... />
The Form Tag
Form elements are defined within the Form Tag (<form></form>). Below is an example of a simple form:
The Form Tag needs at least three properties to function: the 'action' property tells the form where to send the data once the form is submitted, the 'method' tells it how to send it, and the 'enctype' determines the format that the data will be sent in.
With regards to the types of Input tags, the 'value' property can be used to assign a default value that can be changed by the user (except with the Hidden Input type). Note that because of security purposes, the default value cannot be set on File Inputs, and due to the nature of HTML (in that you can see the source of the original requested document), it is generally not a good idea to use a default value for a Password Input.
Text Area tags can have their size modified by the 'cols' and 'rows' attributes within the starting tag. For this element, any default text you wish to be displayed goes between the start and end tags (e.g. <textarea>Please enter some text here.</textarea>).
Checkboxes can have the same name, and when they do, any boxes that are checked will add their values to an array that will be associated with the common name shared among them. For example, if you have this section of a form:
Any options you select will be added to the 'toppings' value (if more than two are selected, 'toppings' becomes an array).
The same thing can be done with radio buttons:
By assigning all the radio inputs the same name, the form will only allow one option to be selected among them.
The 'value' property has a few slightly different applications depending on the element it is used in: with Select boxes, Radio buttons, Checkboxes and Hidden fields it will be the value passed to the processing script, with Text inputs it will be a default value that can be changed, and with Submit, Reset or regular Buttons, it will be any words that you wish to be on the button itself. (Note: For security purposes, you cannot define a default value for File inputs.)
For Checkboxes and Radio buttons, if you wish to have an element selected by default, you can add the 'checked' property to the tag and set the value to either "true" or "checked" (you can add this to multiple Checkbox elements of the same name, but only one Radio button element if it has the same name as other Radio buttons).
For Select boxes, if you wish to have a particular option selected by default, you can add the 'selected' property to the Option element and set the value to either "true" or "selected", otherwise the top-most Option element will be displayed by default.