Practical : 8
Subject : Web Technology
Aim : Create a student registration form using <form> tag. The registration form must consist of following information :
First Name, Middle Name, Last Name, Gender, Address, Phone No., email id, Hobbies, City, State, Country, College Name.
Code:
<!DOCTYPE html><html>
<head>
<title>Form</title>
<style type="text/css">
table,td {border: 0px solid black; border-collapse: collapse;padding: 5px;}
td {padding: 5px;}
input.in,textarea,select
{
padding: 5px;
border-width: 2px;
border-color: #00ccff;
border-radius: 2px;
border-style: solid;
}
</style>
</head>
<body>
<h1 align="center">Student Form</h1>
<form>
<table align="center">
<tr>
<td>Name:</td>
<td><input name="fname" class="in" type="text" size="10" placeholder="First Name" pattern="[a-zA-Z]+" required></input class="in">
<input name="mname" class="in" type="text" size="10" placeholder="Middle Name" pattern="[a-zA-Z]+" required></input class="in">
<input name="lname" class="in" type="text" size="10" placeholder="Last Name" pattern="[a-zA-Z]+" required></input class="in">
</td>
</tr>
<tr>
<td>Email:</td>
<td><input name="email" class="in" type="text" placeholder="abc@example.com"size="43" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required></input class="in"></td>
</tr>
<tr>
<td>Password:</td>
<td><input class="in" name="pwd" type="password" placeholder="password"size="43" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required></input class="in"><br><font color="red">(length:8-20 | must contain a upper case,lower case,<br>number,special symbol,number)</font></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input name="cpwd" class="in" type="password" placeholder="password"size="43" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required></input class="in"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea name="addr" rows="5" cols="45" required></textarea></td>
</tr>
<tr>
<td>College Name:</td>
<td><input name="cname" class="in" type="text" size="43" placeholder="College Name" required></input class="in"></td>
</tr>
<tr>
<td>Mobile No.:</td>
<td>+<input class="in" name="ccode" type="text" size="1" minlength="2" maxlength="3" value="91" pattern="[0-9]+" required></input class="in">
<input name="Mob" class="in" type="text" size="34 " maxlength="10" placeholder="10 digit Number" pattern="[0|1|2|3|4|5|6|7|8|9]{10}"></input class="in">
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name="dropdown" >
<option value="Male" selected>Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>City:</td>
<td><input name="city" class="in" type="text" size="43" placeholder="City" pattern="[a-zA-Z]+" required></input class="in"></td>
</tr>
<tr>
<td>State:</td>
<td><input name="state" class="in" type="text" size="43" placeholder="State" pattern="[a-zA-Z]+" required></input class="in"></td>
</tr>
<tr>
<td>Country:</td>
<td><input name="country" class="in" type="text" size="43" placeholder="Country" pattern="[a-zA-Z]+" required></input class="in"></td>
</tr>
<tr>
<td>Hobbies:</td>
<td>
<input name="music" class="in" type="checkbox" name="music" checked>Music</input class="in">
<input name="sports" class="in" type="checkbox" name="Sports">Sports</input class="in">
<input name="games" class="in" type="checkbox" name="Games">Games</input class="in">
<input name="others" class="in" type="checkbox" name="other">other</input class="in">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="image" src="button.png" height="50px" width="120px"></button></td>
</tr>
</table>
</form>
</body>
</html>
Output:
Sign up here with your email
2 comments
Write commentsNo more live link in this comments field
ReplyConversionConversion EmoticonEmoticon