Web Designing
Exp no 8:
Aim : Create an HTML form titled "ONLINE DATA ENTRY" with fields for
Roll No., Name, Branch (dropdown), Semester (dropdown), Address (textarea),
Gender (radio buttons), Mobile No., Email ID, and Hobbies (checkboxes).
Include Reset and Submit buttons. Style the form using basic CSS with borders
and a light green background.Also deploy the page on local web server.
Requirements
1. PC with latest configuration and web browser
2. WAMP or XAMPP
3. Text editor
Procedure
1. Create a simple Web Page
2. Save the file with .html extension in the root folder
3. Deploy and Access the Web Page
Code
<!DOCTYPE html>
<html>
<head>
<title>Online Data Entry</title>
<style>
body {
background-color: white;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-weight: bold;
}
form {
width: 600px;
margin: 0 auto;
border: 1px solid #000;
padding: 20px;
background-color: #cde0c4;
}
table {
width: 100%;
}
td {
padding: 8px;
vertical-align: top;
}
input[type="text"],
input[type="email"],
select,
textarea {
width: 100%;
padding: 5px;
}
textarea {
height: 60px;
}
.buttons {
text-align: center;
padding-top: 10px;
}
input[type="submit"],
input[type="reset"] {
padding: 8px 16px;
font-weight: bold;
margin: 5px;
}
</style>
</head>
<body>
<h1>ONLINE DATA ENTRY</h1>
<form>
<table border="1">
<tr>
<td><label for="roll">Roll No.</label></td>
<td><input type="text" id="roll" name="roll"></td>
</tr>
<tr>
<td><label for="name">Name</label></td>
<td><input type="text" id="name" name="name"></td>
</tr>
<tr>
<td><label for="branch">Branch</label></td>
<td>
<select id="branch" name="branch">
<option>B. Arch</option>
<option>B.Tech</option>
<option>B.Sc</option>
<option>M.Tech</option>
</select>
</td>
</tr>
<tr>
<td><label for="sem">Semester</label></td>
<td>
<select id="sem" name="sem">
<option>S1</option>
<option>S2</option>
<option>S3</option>
<option>S4</option>
</select>
</td>
</tr>
<tr>
<td><label for="address">Address</label></td>
<td><textarea id="address" name="address"></textarea></td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gender" value="male"> M
<input type="radio" name="gender" value="female"> F
</td>
</tr>
<tr>
<td><label for="mobile">Mobile No.</label></td>
<td><input type="text" id="mobile" name="mobile"></td>
</tr>
<tr>
<td><label for="email">Email ID</label></td>
<td><input type="email" id="email" name="email"></td>
</tr>
<tr>
<td><strong>Hobbies</strong></td>
<td>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="writing"> Writing<br>
<input type="checkbox" name="hobby" value="singing"> Singing
<input type="checkbox" name="hobby" value="dancing"> Dancing<br>
<input type="checkbox" name="hobby" value="football"> Football
<input type="checkbox" name="hobby" value="cricket"> Cricket
</td>
</tr>
<tr>
<td class="buttons" colspan="2">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
Conclusion
Created the web page and deployed on local web server.
