Forms in HTML

Fields used in Forms

·       Text box

·       Password

·       Hidden

·       Text area

·       Radio Buttons

·       Check Box

·       Drop down list

·       Buttons

Ø Text Box :

<input type=”textbox/text” name/id=”identifying ID” maxlength=” maximum character length” align=”L/R/C” value=”Default text” size=”Size of text box (By default it is 20)” placeholder=”Default and temporary text” />

This type of box is used to take character inputs like name, phone number etc.

Ex:

Name : <input type=”text” name=”name” maxlength=”30” size=”15” value=”Enter name here” placeholder=”Enter name here”/>

Ø Password :

<input type=”password” name/id=”identifying ID” maxlength=”maximum character length” type=”char” align=”L/R/C” size=”password box size in characters” />

This type of box is used to take input like password.

Ex:

Password : <input type=”password” name=”passwd” maxlength=”30” size=”15”/>

Ø Hidden :

<input type=”hidden” name/id=”identifying ID” />

These types of fields are hidden in a form.

Ex:

 <input type=”hidden” name=”hidden_code” />

Ø Text Area :

<textarea rows=”number of rows” cols=”number of columns” name=”box name” wrap=”On/Off” placeholder=”Default and temporary text”> Default Text </textarea>

These types of Text Boxes are used to take large Inputs like Address or any paragraph type input.

Ex:

Address : <textarea rows=”3” cols=”30”>Enter address here</textarea>

Ø Radio Button :

<input type=”Radio/Radiobutton” name=”Button name” align=”R/L/C” value=”value” checked=”true/false/yes/no”

Radio buttons are used where we have to opt a single value among multiple.

Multiple radio buttons can be selected together if we don’t group them.

Grouping is done by assigning same name to multiple radio buttons as done in below example:

Ex:

Gender :

Male<input type=”radio” name=”gender” value=”M”/>

Female<input type=”radio” name=”gender” value=”F”/>

Ø Check Box :

<input type=”checkbox” name=”checkbox name” align=”L/R/C” value=”value” checked=”T/F” />

Checkboxes are used to where we have to select multiple options.

Ex:

Hobbies:

Playing games <input type=”checkbox” name=”games” checked=”true” />

Listening Music<input type=”checkbox” name=”music” />

Singing <input type=”checkbox” name=”singing” />

Ø Drop down list :

<select name=”Dropdown list name” multiple=”yes/no”>

            <option selected=”Y/N”>select</option>

            <option>Option 1</option>

            <option>Option 2</option>

            .

            .

            .

            <option>Option n</option>

</select>

Drop down list is also used to select any option from multiple options, we can select single or multiple value with it.

Ex:

City:

<select name=”cite_list”>

            <option>Rajnagar</option>

            <option>Kankroli</option>

            <option>Kelva</option>

            <option>Nathdwara</option>

            <option>Falana</option>

            <option>Dhigra</option>

</select>

Ø Buttons:

<input type=”submit” value=”” name=”button_name”/>

<input type=”reset” value=”” name=”button_name”/>

Buttons are used to call events that are handled with JavaScript or any other scripting language.

Ex:

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