Today I will discuss how to make a registration form. It is an important thing in our daily life. We will fill up many registration forms in many cases. There are many types of this form but today I discuss only the web registration forms which are made by HTML and CSS. So, let's
start-
At first, make a project folder. I named it Project-01. We need two files here one is index.html and another is stylesheet.css. like the picture:
Copy the code which is blowing. and past it on index.html :
<!DOCTYPE html>
<html>
<head>
<title>A Simple Login Form</title>
</head>
<body>
<div class="fromheader same-style">Register</div>
<div class="formbody">
<form>
<!--Name (First Name and Last Name) Fild-->
<label class="mylable" for="f_name">First Name</label><label style="margin-left: 200px;" class="mylable" for="Enter Your Last Name">Last Name</label><br>
<input style="width: 45%" placeholder="Enter Your First Name" type="text" name="f_name" class="myfrom" required>
<input style="margin-left: 20px; width: 45%" placeholder="Enter Your last Name" type="text" name="l_name" class="myfrom" required><br><br>
<!--E-Mail Fild-->
<label class="mylable" for="e-mail">E-Mail Address</label><br>
<input style="width: 95.5%" placeholder="Enter Email exampale:(exampale@exampale.com)" type="text" name="e-mail" class="myfrom" required><br><br>
<!--Gender and birth day Fild-->
<label class="mylable" for="gender">Select Your Gender</label>
<label style="margin-left: 130px;" class="mylable" for="birth_day">Date of Birth</label><br>
<input type="radio" id="mal" name="gender" value="Mal" required>
<label for="mal">Mal</label>
<input type="radio" id="femal" name="gender" value="Femal">
<label for="femal">Femal</label>
<input type="radio" id="other" name="gender" value="Other">
<label for="other">Other</label>
<input style="margin-left: 115px; margin-top: 5px;" type="date" name="birth_day" data-date-inline-picker="true" /><br><br>
<!--Religion Fild-->
<label class="mylable" for="religion">Religion</label>
<select style="padding:2px; margin-left: 25px; width: 77%" id="religion" name="religion" required>
<option value="" selected="selected" disabled="disabled">-- select one --</option>
<option value="African Traditional & Diasporic">African Traditional & Diasporic</option>
<option value="Agnostic">Agnostic</option>
<option value="Atheist">Atheist</option>
<option value="Baha'i">Baha'i</option>
<option value="Buddhism">Buddhism</option>
<option value="Cao Dai">Cao Dai</option>
<option value="Chinese traditional religion">Chinese traditional religion</option>
<option value="Christianity">Christianity</option>
<option value="Hinduism">Hinduism</option>
<option value="Islam">Islam</option>
<option value="Jainism">Jainism</option>
<option value="Juche">Juche</option>
<option value="Judaism">Judaism</option>
<option value="Neo-Paganism">Neo-Paganism</option>
<option value="Nonreligious">Nonreligious</option>
<option value="Rastafarianism">Rastafarianism</option>
<option value="Secular">Secular</option>
<option value="Shinto">Shinto</option>
<option value="Sikhism">Sikhism</option>
<option value="Spiritism">Spiritism</option>
<option value="Tenrikyo">Tenrikyo</option>
<option value="Unitarian-Universalism">Unitarian-Universalism</option>
<option value="Zoroastrianism">Zoroastrianism</option>
<option value="primal-indigenous">primal-indigenous</option>
<option value="Other">Other</option>
</select><br><br>
<!--End Religion Fild-->
<!--Address Fild-->
<label class="mylable" for="f_name">Address</label>
<textarea class="my-textra" placeholder="Enter Your Address" name="address" required></textarea><br><br>
<!--About User Fild-->
<label class="mylable" for="f_name">About You</label>
<textarea class="my-textra" placeholder="Write Something About You" name="about_user" required></textarea>
<br><br><center><input type="submit" name="submit" class="submit"></center>
</form>
</div>
<div class="fromfooter same-style">Already a member? <a class="link" href="#">Sing Up</a><br> By creating an account you agree to our <a href="#" class="link">Terms & Privacy</div>
</body>
</html>
Now we can see a rendom form. like it:
Now we should add a css file which name is stylesheet.css. The css code is blow:
body{background-color: aqua;}
div.fromheader{
background-color: rgb(184, 250, 250);
color: rgb(105, 97, 97);
border-radius: 8px 8px 0px 0px;
padding: 20px;
text-align: center;
margin-top: 20px;
font-size: 30px;
margin-left: 25%;
margin-right: 25%;
}
div.fromfooter{
background-color: rgb(184, 250, 250);
color: rgb(105, 97, 97);
border-radius: 0px 0px 8px 8px;
padding: 20px;
text-align: center;
font-size: 15px;
margin-bottom: 20px;
margin-left: 25%;
margin-right: 25%;
}
div.formbody{
padding: 20px;
background-color: azure;
margin-left: 25%;
margin-right: 25%;
}
input.myfrom{
padding: 8px;
border: 1px solid gray;
border-radius: 4px;
margin-right: 8px;
}
label.mylable{ font-size: 22px;}
input.submit{
font-size: 22px;
background-color: green;
color: white;
border-radius: 8px;
padding: 10px;
}
a.link{color: rgb(31, 30, 30);}
a.link:hover{color: rgb(20, 204, 112);}
textarea.my-textra{
height:100px;
width: 95%;
border-radius: 4px;
padding: 5px;
}
And add a line ih HTML to connect css into html file on the <head> tag.
<link rel="stylesheet" href="stylesheet.css">
After adding CSS and CSS link on HTML we can see a wonderful registration form.
Download Scour Code
){kind=link}
0 Comments
Thanks for your important comments. If this is your problem I will try to sloved this.