Peep inside HTML Forms
More about HTML Forms
Adding Radio Buttons
A radio button is an input of type radio. You use radio buttons to select one of two or more values from a group of related choices. For instance, you might be asked to choose your favourite flavoured ice cream from the choices: vanilla, chocolate and strawberry. However, unlike a check-box, a radio button only allows you to choose one of the three.
<input type=”radio” name=”flavor” value=”vanilla” checked=”checked”/>
<input type=”radio” name=”flavor” value=”chocolate”/>
<input type=”radio” name=”flavor” value=”strawberry”/>
You create a mutually exclusive radio button group by setting all the radio button names the same. Browsers know that radio buttons with the same name are mutually exclusive. When clicking one of the radio buttons, the checked radio button is unchecked and the clicked one is checked. When submitting the form, only one name/value pair is submitted.
Adding File Fields
File fields are inputs of type file. This field lets users choose a file from their computer and upload it when the form is submitted. Forms that submit files must have an encoding type of multipart/form-data.
<form name=”input” action=”nothing.php” method=”post” enctype=”multipart/formdata”>
Adding a Text Area
An input element of type text only allows a limited number of characters. Besides, even if you could enter a paragraph’s worth of text in a text field, you wouldn’t want to. Instead you use a text area. Text areas allow entering large amounts of data. You specify a text area using the <textarea></textarea> tags. Text areas have a name, cols, rows, wrap, read-only and disabled attribute. The cols attribute specifies how many columns wide to make the field, while the rows attribute specifies how many rows in height to make it. The wrap attribute tells the browser if it should wrap text in the field. The read-only attribute specifies that the field is read only. The disabled attribute makes the field disabled.
Adding Select elements – Lists and Menus
The select element allows you to choose one or more values from a list of values. You add select elements to a form using the <select></select> tags. Within a select element there are one or more option elements. Option elements specify the names that appear in the select element. The option element’s text is what appears in the select element as a choice. The option element’s value is the value the select element takes when the option is selected.
<select>
<option value=”1″>Choice One</option>
<option value=”2″>Choice Two</option>
<option value=”3″>Choice Three</option>
</select>
The select element has a name, size and multiple attribute. The name attribute is the name submitted to the server for the select element. The size attribute is the number of options that should be visible in a browser. A value of one creates a dropdown list (also called menu). A value of two or more creates a list. The size element’s default value is one when unspecified. The multiple attribute is true or false and specifies whether you can choose one option or multiple options.
Select elements place no limits on how many options are added. However, sometimes you might wish to make it easier for users by grouping similar choices into categories. You use the <optgroup></optgroup> tags for this grouping.
<select>
<optgroup label=”Numbers”>
<option value=”1″>Choice One</option>
<option value=”2″>Choice Two</option>
</optgroup>
<optgroup label=”Letters”>
</optgroup>
<option value=”a”>Choice A</option>
<option value=”b”>Choice B</option>
</select>
