HTML Form Elements

This describes the all HTML form elements.

<input> Element:

This is the most important form element in HTML.

Based on type attribut HTML element can be displayed in several ways.

Example
<input type="text">
<input type="password">
<input type="number">
<input type="email">
<input type="checkbox">
<input type="radio">

If you not specify the type the default type will be text.

Text: Accepts the any kind of text

Password: This is used for password field

Number: It accepts numbers only

Email: It validates the email

Checkbox: It is used to show checkbox on webpage.

Radio: It is used to show radio buttons on webpage.

<select> Element:

<select> element is used to define the drop down list.

Syntax
<select>
<option> option 1</option>
<option> option 2</option>
</select>

Inside the <select> --</select> you can specify the number of options using <option> --</option> tag.

Example
<select name="language">
  <option value="">Select Language</option>
  <option value="English">English</option>
  <option value="Hindi">Hindi</option>
  <option value="French">French</option>
  <option value="Rusian">Rusian</option>
</select>

The above example shows the language dropdown with options of language, user can select one option from drowpdown.

How to make any option as default selection:

You can make any option as default selection in dropdown using "selected" attribute option.

I want to make default language as English in dropdown.

Example
<select name="language">
  <option value="">Select Language</option>
  <option selected value="English">English</option>
  <option value="Hindi">Hindi</option>
  <option value="French">French</option>
  <option value="Rusian">Rusian</option>
</select>

In above example english is the default selected language in dropdown.

How to select multiple options from dropdown:

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

Example
<select name="language" multiple size="4">
  <option value="">Select Language</option>
  <option value="English">English</option>
  <option value="Hindi">Hindi</option>
  <option value="French">French</option>
  <option value="Rusian">Rusian</option>
</select>

In above example user can select multiple options.

<textarea> Element:

<textarea> element is used to define the multi-line input field.

For example, you can use <textarea> to enter address.

Syntax
<textarea></textarea>
Example
<textarea name="address" rows="10" cols="30"> This multi-line input is used to take address from user</textarea>

Rows: This attribute specifies the visible number of lines in a textarea.

Cols: This attribute specifies the visible width of textarea.

<button> Element:

This element is used to display the button on webpage.

Syntax
<button>Save</button>
Example
<button name="save">Save</button>

Button is used to make action, for example to submit the forms.

<checkbox> Element:

This element is used to show the checkbox on webpage.

Syntax
<input type="checkbox">
Example
<input type="checkbox" name="language" value="English"> English<br>
<input type="checkbox" name="gender" value="French"> French<br>