HTML Form Elements

HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application.

HTML Form Elements are used to create form fields to accept input data from users. HTML Form Elements are nested within <form> and </form> tags. Without HTML Form Elements there is no meaning of HTML Forms.

There are many HTML Form Elements we will learn about all of them, their important and why we use them as form elements. All HTML Form Elements are listed below.

Form Elements

• Input Element
• Select Element
• Textarea
• Button Element
• HTML 5 Form Elements

HTML <form> element

The HTML <form> element represents a document section that contains interactive controls for submitting information to a web server.

HTML Form <input> element

The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.

It is the most important html form element. It can be used in several ways like we can turned it as text-input control, button, radio button and much more by suing it’s type attribute. We will learn about all it’s type attribute in next chapter. Note that if we are not assigning any value for type attribute then it’s going to text by default.

Input Element Example

Name : <input type="text" name="_name"/>

Result

Name : 

Note: Always try to maintain name/value pair for input elements because without these value backend code will not recognize the element and due to which it will unable to pull out any value from that element.

HTML Form Select Element

If we want a drop-down list in our html web from then we can use select element. It allows to create a list of select items by using <option> tags within <select> tag. See below example.

Select Element Example

Your Age : 
<select name="_age">
    <option value="30"> 30 </option>
    <option value="31"> 31 </option>
    <option value="32"> 32 </option>
    <option value="33"> 33 </option>
    <option value="34"> 34 </option>
    <option value="35"> 35 </option>
</select>

Output

Your Age :

    30
    31
    32
    33
    34
    35

Important Points About Select Element

• Name Attribute is most important for Select Element.
• The child element <option> must contain value attribute.
• By default the first option will be selected value for select element.
• By default select element provides single option select accessibility but we can change it according to our need.

Important Select Element Attributes

There are some very basic attributes which are very important to know, by using these attribute we can make select element very flexible. So let’s know all important attribute of select element.

1. Selected
2. Size
3. Multiple

Selected Attribute

By default the first option in select element is select but if we want to other option as selected then we have to pass selected attribute in that option which we want to be selected. In such condition where we know that the majority will go with this option, like American will select country as usa then in such condition we can mark usa option as selected from country dropdown list, but anyone is free to choose other country from the dropdown. Let’s understand it by example.

Selected Attribute Example

Your Country : 
<select name="_country">
      <option value="1"> canada </option>
      <option value="2" selected > USA </option>
      <option value="3"> India </option>
</select>

Output

Size Attribute

By default only one option is visible in drop-down, we can see all option after clicking drop-down, but we can change it to how much option we want to visible according to requirement. To achieve this we have to define size attribute of select element and pass a numeric value for it. Let’s see in action.

Size Attribute Example

Text Color : 
<select name="_color" size="2" >
      <option value="red"> Red </option>
      <option value="blue" > Blue </option>
      <option value="green"> Green </option>
      <option value="yellow"> Yellow </option>
</select>

Output

Multiple Attribute

By default select element allows us to select one value at a time, but if we want to select facility allows us to choose more than one option at a time then it can be manage by select element’s multiple attribute. Let’s analyse threw action.

Multiple Attribute Example

Animals : 
<select name="_animal" multiple >
      <option value="lion"> Lion </option>
      <option value="elephant" > Elephant </option>
      <option value="dog"> Dog </option>
      <option value="cat"> Cat </option>
</select>

Output

Note: To Select multiple opetions use ctr key and in Mac use cmd key

HTML Form’s textarea Element

In HTML Form’s input element we are able to insert text in a single line, but in case if we needs to writing big content or paragraph in html form then we can use HTML Form’s textarea element. This element allows us to write content in multiple lines which makes easy to read and find error in our paragraphs, means that its increases user’s readability.

Textarea Syntax Example

<textarea name="_message" rows="12" cols="32">
      this is textarea element, you can use it for log paragraph
</textarea>

Output

HTML Form’s button Element

This form’s element is used to create a button in our web form. We can perform desired activity on this button click like submitting of form, calling a script function etc.

Button Element Example

Name : 
<button type="button" onClick="alert ('hello from button!')"> Click Me </button>

Output

New HTML form Elements – Added in HTML5

According to need, 2 new HTML Form Elements are added in HTML5. But some older web-browser does not support them, so while using these 2 elements be aware about your targeted audience web browser. These elements are

1. Daralist Element
2. Output Element

HTML <datalist> element

Actually it is not a new concept, It is the combination of html input element and html select element. In this concept html select element act as <datalist>. In this combination when we will start typing in input element then datalist will present some pre-defined options whom we can select. The most important this between this combination is <datalist> id, it will act as connector between these 2 elements. Let’s see implementation in action.

Selected Attribute Example

Select Country : 
<input list="_countryList">
<datalist id="_countryList">
   <option value="UK"> </option>
   <option value="US"> </option>
   <option value="IN"> </option>
</datalist>

Output

Select Country :

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 Form Elements