HTML Form Elements
All of the HTML elements are described in this chapter.
One or more of the form elements in the HTML < form > can include:
inputselectlabeltextareabuttonfieldsetlegenddatasetoutputoptionoptgroup
The <label> Element
The element label defines a label text for a number of form elements.
For screen-reader users, the label element is useful because when a user concentrates on the input element,
the screen-reader reads out label loudly.
Note: The label tag's attribute must be equal to the input element id attribute for
binding together.
The <input> Element
The input element is one of the most frequently used form elements.
Depending on the type attribute, the input element can be shown in several different ways.
Example:-
<form action="html-resources/submit.aspx" target="_blank">
<label for="name">Name:</label><br />
<input type="text" id="Text1" name="name" value="Suresh" /><br />
<label for="pwd">Password:</label><br />
<input type="password" id="Password3" name="pwd" value="123" /><br />
Payment:
<input type="radio" id="Radio7" name="payment" value="Cash" checked="checked" />
<label for="Radio7">Cash</label>
<input type="radio" id="Radio8" name="payment" value="Credit Card" />
<label for="Radio8">Credit Card</label><br />
Items:
<input type="checkbox" id="Checkbox1" name="items" value="Laptop" checked="checked" />
<label for="Checkbox1">Laptop</label>
<input type="checkbox" id="Checkbox2" name="items" value="Mobile" checked="checked" />
<label for="Checkbox2">Mobile</label><br /><br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<input type="button" onclick="alert('Hello World!')" value="Click Me" />
</form> Output :-
If you click "Submit", the form-data will be sent to a page called "submit.aspx".
Tip: When you change the input values and then click the "Reset" button, the form-data is reset to its default values.
The following chapter covers all the different values of the type attribute: HTML Input Types.
Related Links
The <select> Element
The select element defines a drop-down list or multi choice list box.
The option element is used to add an item to the drop down list. The element of the option
specify an option to select.
Add the selected attribute to the option element to define the preselected option.
Default is to select the first item from the drop-down list.
The size attribute is used to specify the number of visible values and make the dropdown list into a listbox.
The multiple attribute is used to choose more than one value from the list.
Tip: Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.
Example:-
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form action="html-resources/submit.aspx" target="_blank">
<label for="cars">Select an item:</label>
<select id="Select2" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select> <br />
<label for="cars2">Select one or more items:</label>
<select id="Select3" name="cars2" size="4" multiple="multiple">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
<option value="fiat">Tata</option>
<option value="audi">Toyota</option>
</select> <br />
<input type="submit" />
</form>
</body>
</html>
Output :-
The <textarea> Element
The textarea element defines a multi-line input text field.
The attribute rows indicates how many lines are visible in the text field.
The attribute cols characteristics specify the visible width of a field.
Example 1:-
<form action="#">
<textarea name="message" rows="5" cols="30">The cat was playing in the garden.</textarea>
</form>
Output :-
Related Links
The <datalist> Element
The element datalist is used to lists the preset options to an element input. When you enter data, users will
view a list of the predefined options.
The input element's attribute for list must refer to the datalist element's id attribute.
Example :-
<form action="#">
<input list="browsers" name="browser" />
<datalist id="browsers">
<option value="Internet Explorer" />
<option value="Firefox" />
<option value="Chrome" />
<option value="Opera" />
<option value="Safari" />
</datalist>
</form>
Output :-
Tip: You can select a pre-defined options or enter a new one.