HTML Form Elements

Content

<input>
<select>
<textarea>
<button>
<datalist>
<keygen>
<output>

Forms

Input Types

<input> Element

The most important form element is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.

<select> Element

The <select> element defines a drop-down list.

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.

HTML Code:

<form action="/action_page.php"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit"> </form>

Result:

<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.

HTML Code:

<form action="/action_page.php"> <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea> <br> <input type="submit"> </form>

Result:

<button> Element

The <button> element defines a clickable button.

HTML Code:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Result:

HTML5 <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.

HTML Code:

<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 or IE9 (and earlier).</p>

Result:

Note: The datalist tag is not supported in Safari or IE9 (and earlier).

HTML5 <keygen> Element

The purpose of the <keygen> element is to provide a secure way to authenticate users.

The <keygen> element specifies a key-pair generator field in a form.

When the form is submitted, two keys are generated, one private and one public.

The private key is stored locally, and the public key is sent to the server.

The public key could be used to generate a client certificate to authenticate the user in the future.

HTML Code:

<form action="/action_page.php"> Username: <input type="text" name="user"> <br><br> Encryption: <keygen name="security"> <br><br> <input type="submit"> </form>

Result:

HTML5 <output> Element

The <output> element represents the result of a calculation (like one performed by a script).

HTML Code:

<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form> <p><strong>Note:</strong> The output element is not supported in Edge 12 or Internet Explorer and earlier versions.</p>

Result:

Note: The output element is not supported in Edge 12 or Internet Explorer and earlier versions.

HTML Index

References

W3Schools

This page is only a summary of the material from W3Schools. Definitions, Examples and Codes are exclusive property of W3Schools.