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:

  • input
  • select
  • label
  • textarea
  • button
  • fieldset
  • legend
  • dataset
  • output
  • option
  • optgroup
You can search for these topics, html form elements on same line, what are html form elements, how to create html form element, how to position form elements in html, html form elements with example, html form elements events, html form elements demo, html form elements method, how many html form elements do we have, html form elements required.

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.

You can also search for these topics, html the label element definition, html the label element delete, html the label element disabled, html the label element example, html the label element empty, html the label element exists, html the label element each, html label for element, html the label element get position, html label tag how to use, html the label element is visible, html the label element key.

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





Payment:        
Items:        


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.

You can also search for these topics, html input element events, html input element value, html input element enter key, html input element object, html input element properties, html input element question mark,html input element quantity, html input element react.

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





You can also search for these topics, html select element events, select element by text, default value, element multiple, properties, placeholder, html visible values, html vivble values example, how to allow multiple selection using html.

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


You can also search for these topics, textarea element bold, bullet points, backround color, charecter limit, curser position, color text, change event, disable editing.

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.

You can also search for these topics, datalist element without filter, always show all option, dont show value, dynamic, font size, filter, get selected option, datalist element hidden.