HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Form Elements

There are various form elements available like input fields, textarea fields, drop-down menus, submit button, etc.

In this chapter we will learn different HTML form elements.

HTML <input> element

The <input> element is used to collects information entered into a form.

This element can be used in several ways, depending on the type attribute.

Run code

If the type attribute is omitted, the input field gets the default type: "text".

All different input types will be covered in the next chapter.

HTML <select> element

The <select> element represents a control that provides a menu of options.

Run code

The <option> elements define the available options in the list.

By default, the first item in the list is selected.

To define a pre-selected option, add the selected attribute to the option.

Run code

The disabled attribute indicates that the user cannot interact with the option:

Run code

Use the size attribute to specify the number of visible values:

Run code

Use the multiple attribute to allow the user to select more than one value:

Run code

HTML <textarea> element

The <textarea> element is used when the user is required to give details that may be longer than a single sentence, such as comment box, description, etc.

Run code

The rows attribute specifies the visible height in a text area.

The cols attribute specifies the visible width of a text area.

Note: The size of a text area can also be set by the CSS height and width properties.

In many browsers, <textarea> elements are resizable by default. You may override this behavior with the CSS resize property:

Run code

HTML <button> element

The <button> element represents a clickable button, which can be used in forms or anywhere in a document that needs simple, standard button functionality.

Run code

Note: Always specify the type attribute for the button element.

HTML <datalist> element

The <datalist> element specifies a list of pre-defined options for an <input> element.

This element is used to provide an "autocomplete" feature on <input> elements.

Users will see a drop-down list of pre-defined options as they input data.

Run code

The list attribute points to a <datalist> element that contains pre-defined options for an <input> element.

The value of list attribute must be the id of a <datalist> element in the same document.

HTML <output> element

The <output> element is a container element into which you can inject the results of a calculation or the outcome of a user action.

Run code

HTML Form Elements

Below down is a list of HTML form elements:

Element Description
<form> Specifies an HTML form for user input
<input> Specifies an input control
<textarea> Specifies a multiline input control
<label> Specifies a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Specifies a caption for a <fieldset> element
<select> Specifies a drop-down list
<optgroup> Specifies a group of related options in a drop-down list
<option> Specifies an option in a drop-down list
<button> Specifies a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Specifies the result of a calculation or the outcome of a user action