Tuesday, 22 January 2013

Create Form with table in html ( Text Field,Radio Button,Drop Down,Check Box )


Create Form with table in html ( using Text Field,Radio Button,Drop Down,Check Box,Submit Button)

<html>

</head>
//  for  java script  code
</head>

<title>Regitration Page in HTML</title>

<body>
<form method="post" action="nextpage.html"  name="myform">

<table border="10px" width="100%">

<tr><td colspan="3"> <marquee behavior="alternate" ><b> <u> My Regitration Page</u></b> </marquee></td></tr>

//  code for text field in html

<tr><td>Name</td><td><input type="text" id="name"></td><td></td></tr>

//  code for radio button in html

<tr><td>Gender</td><td>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female</td>
<td></td></tr>
<tr><td>FatherName</td><td><input type="text" id="fathername"></td><td></td></tr>
<tr><td>EmailId</td><td><input type="text" id="emailid"></td><td></td></tr>

//  code for text field (password) in html

<tr><td>Password</td><td><input type="password" id="pass"></td><td></td></tr>
<tr><td>ConfirmPassword</td><td><input type="password" id="cpass"></td><td></td></tr>

//  code for Check Box in html

<tr><td>Qulification</td><td><input type="checkbox" name="qulification" value="High School">High School
<input type="checkbox" name="qulification" value="Intermidiate">Intermidiate
<input type="checkbox" name="qulification" value="Graduation">Graduation
<input type="checkbox" name="qulification" value="Post Graduation">Post Graduation</td><td></td></tr>

//  code for drop down list for four item  in html

<tr><td>Current City</td><td> <select name="city" id="city" width="500px">
        <option>Select</option>
        <option>Delhi</option>
        <option>Noida</option>
        <option>Varanasi</option>
        <option>Ghaziabad</option>
      </select></td><td></td></tr>

//  code for submit button  in html

<tr><td><input type="submit" name="submit" value="submit" onClick="f1()" /></td><td></td><td></td></tr>
</table>
</form>>
</body>
</html>




1 comments: