How To Design - Basic Form
Learn how to create a basic form with CSS.
How To Create a Basic Form
Here, we are not validating our Form. We only used HTML and CSS.
Step 1) Add HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Design</title>
<link rel="icon" href="images/favicon.png" type="image/png" sizes="16x16">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,600,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- .form-block start -->
<section class="form-block">
<div class="container">
<h1>Contact Form</h1>
<form action="" method="" enctype="multipart/form-data">
<div class="input-group">
<label for="fn">First Name</label>
<input type="text" placeholder="First Name" id="fn" class="form-control" name="f_name" required />
<p>This field is required!</p>
</div>
<!-- .input-group -->
<div class="input-group">
<label for="ln">Last Name</label>
<input type="text" placeholder="Last Name" id="ln" class="form-control" name="l_name" required />
<p>This field is required!</p>
</div>
<!-- .input-group -->
<div class="input-group">
<label for="dob">Date of Birth</label>
<input type="date" placeholder="Date of Birth" id="dob" class="form-control" name="dob" required />
<p>This field is required!</p>
</div>
<!-- .input-group -->
<div class="input-group">
<label for="ph">Phone Number</label>
<input type="tel" placeholder="Phone Number" id="ph" class="form-control" name="phone" required />
<p>This field is required!</p>
</div>
<!-- .input-group -->
<div class="input-group">
<label for="photo">Choose your photo</label>
<input type="file" placeholder="Choose your photo" id="photo" name="file" class="form-control" />
</div>
<!-- .input-group -->
<div class="input-group">
<label for="url">Website</label>
<input type="url" name="website" placeholder="Do you have a website?" id="url" name="website" class="form-control" />
</div>
<!-- .input-group -->
<div class="input-group">
<label for="email">Email Address</label>
<input type="email" placeholder="Email" id="email" class="form-control" name="email" required>
<p>This field is required!</p>
</div>
<!-- .input-group -->
<div class="input-group">
<label for="pwd">Password</label>
<input type="password" placeholder="Password" id="pwd" class="form-control" name="pwd" required />
<p>This field is required!</p>
</div>
<!-- .input-group -->
<div class="input-group">
<label for="r-pwd">Re-write Password</label>
<input type="password" placeholder="Re-write Password" id="r-pwd" class="form-control" name="r_pwd" required />
<p>This field is required!</p>
</div>
<!-- .input-group -->
<div class="input-group">
<label>Gender</label>
<input type="radio" value="male" class="radio-btn" name="gen" /> Male
<input type="radio" value="female" class="radio-btn" name="gen" /> Female
<input type="radio" value="others" class="radio-btn" name="gen" /> Others
<p>This field is required!</p>
</div>
<!-- .input-group -->
<div class="input-group">
<label>Courses</label>
<input type="checkbox" value="html" class="checkbox" name="chk" /> HTML
<input type="checkbox" value="css" class="checkbox" name="chk" /> CSS
<input type="checkbox" value="javascript" class="checkbox" name="chk" /> JavaScript
<input type="checkbox" value="php" class="checkbox" name="chk" /> PHP
<p>This field is required!</p>
</div>
<!-- .input-group -->
<div class="input-group">
<label for="select">Qualification</label>
<select name="qualification" id="select" class="form-control">
<option value="10">10th</option>
<option value="12">12th</option>
<option value="grad">Graduate</option>
<option value="master">Master</option>
</select>
<p>This field is required!</p>
</div>
<!-- .input-group -->
<div class="input-group">
<label for="msg">Message</label>
<textarea placeholder="Message" id="msg" class="form-control" name="msg"></textarea>
</div>
<!-- .input-group -->
<div class="btn-group">
<input type="submit" value="SUBMIT" class="btn-primary" name="sub" />
<input type="reset" value="RESET" class="btn-secondary" name="rst" />
</div>
<!-- .btn-group -->
</form>
</div>
<!-- .container -->
</section>
<!-- .form-block end -->
<!-- footer start -->
<footer>
<p>To learn more about <b><form></b>tag, <a href="https://docs.learncomputer.in/html/html-forms" target="_blank">click here</a>.</p>
<p>This is made with <span>♥</span>. All Rights Reserved by <a href="https://www.learncomputer.in">Learn Computer Academy</a> © 2020.</p>
</footer>
<!-- footer end -->
</body>
</html>Step 2) Add CSS:
/*
This is a Basic Form Design using HTML and CSS. You can freely use it in your project.
It is made with ♥ by Learn Computer Academy. Visit our website: www.learncomputer.in
*/
/* Normalization */
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #000;
line-height: 1.3;
background-color: #fff;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
display: inline-block;
}
/* Make Container According To Your Requirements */
.container {
width: 1140px;
margin: 0 auto;
padding: 0;
}
/* Submit & Reset Button Style */
.btn-primary {
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #fff;
line-height: 1.2;
font-weight: 400;
background-color: #009688;
text-transform: uppercase;
border: none;
border-radius: 3px;
padding: 10px 15px;
margin: 10px 0;
transition: all .5s ease;
}
.btn-primary:hover {
background-color: #00685e;
}
.btn-secondary {
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #fff;
line-height: 1.2;
font-weight: 400;
background-color: #353535;
text-transform: uppercase;
border: none;
border-radius: 3px;
padding: 10px 15px;
margin: 10px 0;
transition: all .5s ease;
}
.btn-secondary:hover {
background-color: #282828;
}
/* Form Block Style */
.form-block {
background-color: #eee;
padding: 100px 0;
}
.form-block h1 {
font-family: 'Poppins', sans-serif;
font-size: 45px;
color: #000;
line-height: 1.3;
text-align: center;
padding: 0;
margin: 0 0 30px 0;
}
.form-block form {
background-color: #eee;
padding: 50px;
margin: 0;
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.14), -5px -5px 5px 0px rgba(255, 255, 255, 1);
}
/* All the Input Fields and their Labels Design */
.form-block form .input-group {
margin: 20px 0;
}
.form-block form .input-group label {
display: block;
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #000;
line-height: 1.3;
font-weight: 700;
padding: 0;
margin: 0 0 10px 0;
}
.form-block form .input-group input::placeholder {
font-family: 'Poppins', sans-serif;
color: #999;
}
.form-block form .input-group p {
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #c40025;
font-style: italic;
text-align: right;
padding: 0;
margin: 5px 0;
}
/* Add a class, "form-control" in Input Fields to give nice look */
.form-block form .form-control {
background-color: #eee;
border: 1px solid #ddd;
border-radius: 3px;
padding: 15px 10px;
width: 100%;
box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .04);
}
.form-block form .input-group textarea.form-control {
height: 150px;
/*resize: none;*/
/* If you do not need those tiny dots in textarea you can add this property */
}
.form-block form .input-group textarea.form-control::placeholder {
font-family: 'Poppins', sans-serif;
}
/* To change Input Field Border when it is Focused */
.form-block form .form-control:focus {
border: 1px solid #74b500;
}
/* Footer Style. It is not necessary for Form Design */
footer {
background-color: #171717;
padding: 10px 0;
margin: 0;
}
footer p {
font-size: 14px;
color: #eee;
line-height: 1.2;
text-align: center;
font-weight: 300;
padding: 0;
margin: 0 0 5px 0;
}
footer p a {
color: #00d9c5;
text-decoration: underline;
}
/* To get that Heart Beat Effect just add this code along with HTML tags */
footer p span {
display: inline-block;
font-size: 20px;
color: #ff2a2a;
animation: animate 1s linear infinite;
}
/* Heart Beat Animation */
@keyframes animate {
0% {
transform: scale(1);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}