HTML
Form Elements
The HTML <form> element can contain one or more of the
following form elements:
• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <option>
• <optgroup>
The <input> Element
• One of the most used form element is
the <input> element.
• The <input> element can be displayed in
several ways, depending on the type attribute.
The <input> Element: Example
<!DOCTYPE html>
<html>
<body>
<h2>The input Element</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The <label> Element
• The <label> element defines a label for several
form elements.
• The <label> element is useful for screen-reader
users, because the screen-reader will read out
loud the label when the user focus on the input
element.
• The for attribute of the <label> tag should be
equal to the id attribute of the <input> element
to bind them together.
The <select> Element
The <select> element defines a drop-down list.
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
<option> elements
• The <option> elements defines an option that
can be selected.
• By default, the first item in the drop-down list
is selected.
• To define a pre-selected option, add
the selected attribute to the option.
<option> elements: Example
<!DOCTYPE html>
<html>
<body>
<h2>Pre-selected Option</h2>
<p>You can preselect an option with the selected attribute:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
Visible Values
• Use the size attribute to specify the number of visible values:
<!DOCTYPE html>
<html>
<body>
<h2>Visible Option Values</h2>
<p>Use the size attribute to specify the number of visible values.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit">
</form>
</body>
Allow Multiple Selections:
• Use the multiple attribute to allow the user to select more than one value.
• Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.
<!DOCTYPE html>
<html>
<body>
<h2>Allow Multiple Selections</h2>
<p>Use the multiple attribute to allow the user to select more than one value.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit">
</form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
</body>
</html>
<optgroup>
• The <optgroup> tag is used to group related
options in a <select> element (drop-down list).
• If you have a long list of options, groups of
related options are easier to handle for a user.
<optgroup> :Example
<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>
<form action="/action_page.php">
Choose your options: <select name="selctions" id="browsers">
<optgroup label="Browser options">
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Opera">Opera</option>
<option value="Safari">Safari</option>
</optgroup>
<optgroup label="file options">
<option value="PDF">PDF</option>
<option value="Word">Word</option>
<option value="Doc">Doc</option>
<option value="Html">Html</option>
<option value="CSS">CSS</option>
</optgroup>
</select>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>
<textarea> Element
• The <textarea> element defines a multi-line
input field (a text area).
• The rows attribute specifies the visible
number of lines in a text area.
• The cols attribute specifies the visible width of
a text area.
<textarea> Element: Example
<!DOCTYPE html>
<html>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form action="/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>
<button> Element
• The <button> element defines a clickable
button.
<button> Element: Example
<!DOCTYPE html>
<html>
<body>
<h2>The button Element</h2>
<button type="button" onclick="alert('Hello World!')">Click
Me!</button>
</body>
</html>
<fieldset> and <legend> Elements
• The <fieldset> element is used to group
related data in a form.
• The <legend> element defines a caption for
the <fieldset> element.
<fieldset> and <legend> Elements: Example
<!DOCTYPE html>
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</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><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
<datalist> Element
• The <datalist> element specifies a list of pre-
defined options for an <input> element.
• Users will see a drop-down list of the pre-
defined options as they input data.
• The list attribute of the <input> element, must
refer to the id attribute of
the <datalist> element.
<datalist> Element: Example
<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>
<form action="/action_page.php">
<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>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>
</body>
</html>
