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 commentsThis post is truly informative and exactly what I was looking for. I appreciate the valuable content and encourage the writer to continue producing such excellent work. The post highlights liaison consultancy services that incorporate CPWD registration online. Thank you for sharing this helpful content.
ReplyConversionConversion EmoticonEmoticon