Before login in a particular website, there must be registration. Below, different form sample have been attached which help to make your website awesome.
Sample 1:
This sample is simple which conation some CSS design (External CSS). This is simple and easy to understand for the beginner web designer.
HTML Code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Sample</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div ><h2>This is a sample of Register form</h2></div>
<div align="">
<form>
<div><input type="text" name="fname" required placeholder="Enter your First name"> </div><br>
<div><input type="text" name="lname" required placeholder="Enter your last name "> </div><br>
<div><input type="date" name="dob" required placeholder="Enter your date of birth"> </div><br>
<div><input type="text" name="address" required placeholder="Enter your address"> </div><br>
<div><input type="number" name="mnumber" required placeholder="Enter your mobile number "> </div><br>
<div><input type="email" name="email" required placeholder="Enter your email address"> </div><br>
<div><input type="password" name="password" required placeholder="Enter your password"> </div> <br>
<div><input type="submit" value="Register"></div>
</form><br>
</div>
</div>
</body>
</html>
CSS Code:
.container {
padding: 6px 40px 40px 40px;
border: 2px solid;
border-radius: 8px;
width: 30%;
}
input[type=submit] {
background-color: black;
color: white;
padding: 12px 20px;
border: 2px;
border-radius: 4px;
cursor: pointer;
}
Form preview:
Sample 2:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Sample</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div ><h2>This is a sample of Register form</h2></div>
<div align="">
<form>
<div><input type="text" name="fname" required placeholder="Enter your First name">
<input type="text" name="lname" required placeholder="Enter your last name "> </div><br>
<div><input type="charset" name="dob" required placeholder="Enter your date of birth">
<input type="radio" name="gender">
<label>Male</label>
<input type="radio" name="gender">
<label>Female</label>
<input type="radio" name="gender">
<label>Other</label>
</div><br>
<div><input type="text" name="address" required placeholder="Enter your address">
<input type="number" name="mnumber" required placeholder="Enter your mobile number "> </div><br>
<div><input type="email" name="email" required placeholder="Enter your email address">
<input type="password" name="password" required placeholder="Enter your password"> </div> <br>
<div><input type="checkbox" name="terms"><label>I accept all <a href="">Terms and Condition!</a></label></div></br>
<div align="center"><input type="submit" value="Register"></div>
<p>Have already an account? <a href="">Login here</a></p>
</form><br>
</div>
</div>
</body>
</html>
.container {
background-color:#9fff80
;
padding: 6px 40px 40px 40px;
border: 2px solid;
border-radius: 8px;
width: 40%;
}
input[type=submit] {
background-color: #8080ff;
color: white;
padding: 12px 20px;
border: 2px;
border-radius: 4px;
cursor: pointer;
}
Form Preview:
0 Comments