【My Study Note】HTML form elements
HTML form elements
<label>
Defines a label for an element. It has an attribute “for”, the value of which should be equal to the id attribute of the element it is associated with.
<select>
Defines a drop-down list of options presented to the user. It has a couple of attributes:
- Form, the id of the form in which the drop-down appears
- Name specifies the name of the control
- Multiple Boolean attribute, when specified, indicates if a user can select multiple options out of the list
- Required indicates if the user is required to select an option before submitting a form
- Size mentions the number of visible options in a drop-down list
The options in a drop-down list are defined using the <option> element inside <select>.
<textarea>
Defines a multi-line input field, typically to allow the user to input longer textual data. The common attributes for this element include:
- cols: defines the width of the text area, the default value is 20
- form: the form element the text area is associated with
- maxlength: when specified, limits the maximum number of characters that can be entered in the text area
- minlength: the minimum number of characters that the user should enter
- readonly: once set, the user cannot modify the contents
- rows: defines the number of visible text lines for the text area
<button>
<button type="button" onclick="alert('You just clicked!')">Click Me!
</button> Defines a clickable button. The onclick attribute defines the behavior when the button is clicked by the user.
<fieldset>
Used to group related input elements in a form. For instance, elements related to the user’s personal information and educational qualification can be grouped separately in two field sets. (This can be used with “radio”)
<legend>
// Defines a caption for the <fieldset> element.
<fieldset>
<legend>Personal Info</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
</fieldset>
<fieldset>
<legend>Qualificaiton</legend>
<label for="pdegree">Primary degree:</label><br>
<input type="text" id="pdegree" name="degree" value="Masters"><br>
<label for="fos">Last name:</label><br>
<input type="text" id="fos" name="field" value="Psychology"><br>
</fieldset> <datalist>
Specifies a list of pre-defined options for an input element. It differs from <select> since the user can still provide textual or numeric input other than the listed options.
<input list="locations">
<datalist id="locations">
<option value="Sydney"></option>
<option value="Brisbane"></option>
<option value="Gold Coast"></option>
<option value="Melbourne"></option>
<option value="Perth"></option>
<option value="Adelaide"></option>
</datalist><output>
Represents the result of a calculation (typically the output of a script) or the outcome of the user action.
» More about this
<optgroup>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>Defines a group of related options in a drop-down list. Its attribute label names the group.