Forms Part 2

Drop down Drop down can be created as follows: <select> <option/>something <option/>something <option/>something </select>
By default first option will appear selected but you can choose any option to be selected as follows:
<select> <option/>something <option selected/>something <option/>something </select>
You can also group options using <optgroup> <select> <optgroup label=”group1”> <option/>something <option selected>something </optgroup> <optgroup label=”group2”> <option/>something <option/>something </optgroup> </select>
Example <form>
Simple dropdown example<br/>
<select name="simple">
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
<option value="Rabbit">Rabbit</option>
<option value="Lion">Lion</option>
<option value="Tiger">Tiger</option>
<option value="Wolf">Wolf</option>
</select><br/><br/>
Dropdown with selected value<br/>
<select name="selectedDrDown">
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
<option value="Rabbit">Rabbit</option>
<option value="Lion">Lion</option>
<option value="Tiger" selected>Tiger</option>
<option value="Wolf">Wolf</option>
</select><br/><br/>
Dropdown using <br/>
<select name="optDRDown">
<optgroup label="Domestic animals">
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
<option value="Rabbit">Rabbit</option>
</optgroup>
<optgroup label="Wild animals">
<option value="Lion">Lion</option>
<option value="Tiger">Tiger</option>
<option value="Wolf">Wolf</option>
</optgroup>
</select>
</form> Output Simple dropdown example
Cat Dog Rabbit Lion Tiger Wolf
Dropdown with selected value
Cat Dog Rabbit Lion Tiger Wolf
Dropdown using <optgroup>
Cat Dog Rabbit Lion Tiger Wolf Fieldset You can group similar elements using <fieldset>. It draws rectangle around those elements. If you want to name this group use <legend> Example
<form>
<fieldset>
<legend>Personal information</legend>
First Name: <input type="text" name="first"/><br/><br/>
Last Name: <input type="text" name="last"/><br/><br/>
Nationality: <input type="text" name="nationality"/><br/><br/>
Phone nos: <input type="text" name="phone"/><br/><br/>
</fieldset>
</form>
Output

Personal information First Name:
Last Name:
Nationality:
Phone nos:

Datalist This element is newly introduced in HTML 5. It is not standalone element. It is to be used with other elements mostly with text fields. All of us use Google search right. If you type say letter c in search box then it will display all words starting with c. Similar is functionality of datalist. Let us now see how to use data list: <datalist id=”something”> <option value= “some1”/> <option value= “somt2”/> <option value= “some3”/> </datalist> Here Ihave created datalist. NowI use it in text field. To use it in a text field use id of datalist in list attribute of textfield. <input type=”text” list=”something”/> So whenever you type s in that textfield all options that have s in it will be displayed. If you type somt then only somt2 will be displayed. Example
<form>
<datalist id="flowers">
<option value="red rose"/>
<option value="sunflower"/>
<option value="white rose"/>
<option value="lily"/>
<option value="dahlia"/>
</datalist>
Type "s" or "rose" <input type="text" list="flowers"/>
</form>
Output
Type "s" or "rose"
Reset button This button is used to reset entire form. It can be written as follows: <input type=”reset”/> Example
<form action="" method="post">
Username <input type="text" name="user"/><br/><br/>
Password <input type="password" name="pass"/><br/><br/>
<input type="reset" value="Clear"/>  
<input type="submit" value="Sign in"/>
</form>
Note:   is used when you have to leave a space. Date tag This tag is used to choose date. Its default format is mm-dd-yy. It is written as follows: <input type=”date”/> Example
<form>
Birth date <input type="date"/>
</form>
Output
Birth date
Student registration form example
<html>
<head>
<title>
Student Registration Form
</title>
</head>
<body style="background-color:maroon;color:white">
<h1 align="center">Student registation Form</h1>
<form action="">
<table cellpadding="2" width="30%" align="center" cellspacing="2">
<tr>
<td>First Name</td>
<td><input type="text" name="fname"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname"></td>
</tr>
<tr>
<td>Address</td>
<td><textarea rows="10" cols="30"></textarea></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="Female">Female</td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="BCom">BCOM</option>
<option value="BBA">BBA</option>
<option value="BA">BA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid"></td>
</tr>
<tr>
<td>Birth Date</td>
<td><input type="date" name="dob"> mm-dd-yy</td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
</form>
</body>
</html>
You can view output here

Computing Magazine

About the author

Author's Latest Articles

Magazines

COMMUNITY COMPUTING