Practical Aim:
Create a student registration webpage using HTML form elements and CSS
- Sample Output:
Video Tutorial:HTML Form Elements and CSS [Use of External CSS ]
Code
Registrationform.html file
HTML FORM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title> Student Application submission </title>
<link rel="stylesheet" href="form.css">
</head>
<body>
<header>
<h1>Student Registration form</h1>
<h3>Submit details</h3>
</header>
<section class="section">
<fieldset>
<legend>Personal Information</legend>
<form action="datasubmitted.html" method="get" autocomplete>
<label> Full Name :</label> <input type="text" size="100" placeholder="FIRSTNAME MIDDLENAME LASTNAME" required autofocus> </br>
<label> Mother Name :</label> <input type="text" size="100" placeholder="FIRSTNAME MIDDLENAME LASTNAME" required autofocus><br>
<label> Date of Birth :</label> <input type="date" name="bday" required><br>
<label> Select gender:</label><br>
<input class="radio" type="radio" name="gender" value="male" required> Male<br>
<input class="radio" type="radio" name="gender" value="female"required> Female<br>
<input class="radio" type="radio" name="gender" value="other"required> Other<br><br>
<label>Select ID proof:</label> <input list="id" name="id" placeholder="ID name" required>
<datalist id="id">
<option value="AAdharcard">
<option value="PAN card">
<option value="Driving licence">
<option value="Election Card">
</datalist>
<label>Identification Number :</label><input type="text" size="16" required> <br>
<label> Present Address: </label><br>
<textarea rows=6 cols=50 required></textarea><br>
<label> Email-id:</label> <input type="email" size="100" placeholder="Enter email address" multiple required><br>
<label> Telephone number:</label> <input type="tel" size="100" placeholder="Enter telephone number" required><br>
<label> Mobile Number: </label> <input type="text" maxlength="10" size="10" placeholder="Mobile number" required>
</fieldset>
<input class="button" type="submit" value="Final Submission" >
<input class="button" type="reset" value="Fill the form again" >
</form>
</section>
<footer>
<address>
<small> Designed by: Your name </small>
<small> Copy right : © 2021-2022 ComputerBitsDaily </small>
</address>
<details>
<summary>Copyright 2021-2022.</summary>
<p> - Designed By: </p>
<p> - Guided By: PRG</p>
</details>
</footer>
</body>
</html>
form.css file
Untitled Document
body
{
background-color:#f1f1f1;
}
header
{
width:80%;
height:auto;
background-color:#4b0082;
margin:auto;
padding:10px;
overflow:hidden;
text-align:center;
text-transform:uppercase;
color:white;
}
section{
width:80%;
height:auto;
background-color:#9370db;
margin:auto;
padding:10px;
color:white;
}
input {
margin:10px;
border:2px thick black;
border-radius:5px;
height:30px;
overflow: hidden;
width:80%;
}
.radio{
width:10%;
height:20px;
}
legend
{
text-align:center;
text-transform:uppercase;
font-size:20px;
}
.button
{
background-color:blue;
height: 40px;
width: 200px;
color:white;
border:2px solid white;
border-radius:10px;
font-size:16px;
}
footer{
width:80%;
background-color:#4b0082;;
color:white;
margin-left:auto;
margin-right:auto;
padding:10px;
}
Try here
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<h1> Try your code here</h1>
</body>
</html>
Output
0 Comments