HTML form Elements

Since in our previous tutorial we have learnt the HTML form and its methods now we will learn the elements which can be used with HTML form in this tutorial. Normally form elements are used for taking various inputs from user.

Input Element

It is the most commonly used form element.  As you might be knowing each HTML tag has some set of attributes associated with it. Let’s look at the basic syntax for input element.

Syntax

<input type=”input type” name=”identifier name”>

As you can see the two most important attributes of input tag is type & name. Type defines the type of input element you want and name is used for identifying the input element.

Input Type

The input type can be

• Text
• Password
• Radio
• Submit
• Reset
• Button
• Checkbox

These are the various input types which can be used. Now let’s look at them each with basic syntax.

Input Type Text

It will define one line text box.

Syntax

<input type=”text” name=”identifier”>

Input Type Password

It will define one line text box for password. The input entered for password will not be visible rather it will be encrypted with echo character ”•“

Syntax

<input type=”password” name=”identifier”>

Input Type Radio

It defines a Radio Button. If you want multiple radio buttons and you want to allow user to select only one of them in that case set same name for both the radio button.

Syntax

<input type=”radio” name=”identifier” value=”value” >

By default the radio  button will not be checked if you want a default radio button checked then in that case write checked as attribute in that radio button.

For Ex.

<input type=”radio” name=”gender” value=”male” checked>Male
<input type=”radio” name=”gender” value=”female” >Female

In above example we have created two radio buttons with same name gender which allows only one radio button to be selected at time and as you can see we have written checked in radio button for gender male so by default when the form is loaded the male radio button will be automatically selected.

Input Type Checkbox

It allows user to select any number of options from given set of choices.

Syntax

<input type=”checkbox” name=”identifier” value=”value” >

For Ex.

<input type=”checkbox” name=”sport1” value=”Cricket”>Cricket
<input type=”checkbox” name=”sport2” value=”Football”>Football

The only difference between checkbox and radio button is that it allows you to select any number of choices from the given set of choices. In our example we can select zero or more sports.

Input Type Submit

It allows to create a button which when clicked will submit the form data and redirect to the action page specified in action attribute of form.

Syntax

<input type=”submit” name=”identifier” value=”value” >

For Ex.

<input type=”submit” name=”register” value=”Click Me”>

Note that the submit button will get the label from the value attribute so in our case the label of submit button will be Click Me

Input Type Reset

It allows to create a button which when clicked will reset (clear) all the form elements data.

Syntax

<input type=”reset” name=”identifier” value=”value” >

For Ex.

<input type=”reset” name=”Clear” value=”CLEAR”>

Input Type Button

It will create a passive button. In short it will not submit or reset the form data by default. When a simple button is required it’s used.

Syntax

<input type=”button” name=”identifier” value=”value” >

For Ex.

<input type=”button” name=”counter” value=”Click Here”>

Select... Option

This form element allows creating a combo box which allows you to select a single value from given set of multiple values. By default the first entered value will be visible. In short it creates a drop down list.

Syntax

<select name=”Identifier”>
   <option value=”value1”>Item Name1</option>
   <option value=”value2”>Item Name2</option>
</select>

You can put as many option tags inside a select tag as you want.

By default only one item from the list of items can be selected, to allow users to select multiple items just write multiple when you define select tag.

<select name=”identifier” multiple>

By default the first item specified in option tag will be selected, if you want to customize it to choose the item you want all you need to do is write selected in the option tag of the item you want to select by default.

<option value=”value” selected>Item Name</option>

For Ex.

<select name="country">
  <option value="China">China</option>
  <option value="India" selected>India</option>
  <option value="USA">USA</option>
  <option value="UK">UK</option>
</select>

Demo Registration Form

<form action="#" method="post">
     First Name: <input type="text" name="Firstname"><br>
     Last Name:  <input type="text" name="Lastname"><br>
     Email:      <input type="text" name="Email"><br>
     Password:   <input type="password" name="Password"><br>
     Gender:     <input type="radio" name="Gender">MALE 
                 <input type="radio" name="Gender">FEMALE <br>
     Country:    <select name="Country">
                   <option value="India">India</option>
                   <option value="China">China</option>
                   <option value="France">France</option>
                   <option value="USA">USA</option>
                 </select><br>
                 <input type="submit" name="register" value="Register Here">
                 <input type="reset" name="reset" value="Clear">
</form>

So in this tutorial we have learnt some of the basic form elements which we will be using for taking inputs from user when  creating a dynamic web page.