Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a responsive form with CSS?
A form on a web page can be used to get the user details for registration such as name, username, email-id, password, security question, etc. With that, a form can be created to get only the user details such as name, email-id, phone number, message, etc. as a contact us form. The responsiveness allows changing the layout of the form on different devices. It can be checked on a web browser by changing the tab size. Let us see how to create a responsive form with CSS on a web page.
Set the form fields for registration
First, the user will fill the input fields to register. The form is created using the <form>. The input fields are created using the input type text −
<div> <h3>Register</h3> <label for="fname">Full Name</label> <input type="text" id="fname" name="firstname" /> <label for="email">Email</label> <input type="text" id="email" name="email" /> <label for="adr">Address</label> <input type="text" id="adr" name="address" /> </div>
Set the form fields for login
The fields are set for login i.e. the username and password. These fields will be used by the user the next time to login for the first time −
<div> <h3>Account Details</h3> <label for="uname">Username</label> <input type="text" id="uname" name="username" /> <label for="pass">Password</label> <input type="text" id="pass" name="pwd" /> </div>
Style the form and the form container
The form fields are positioned with flex. The flex items are displayed with space before, between, and after the lines −
.Fields {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: space-around;
}
.formContainer {
margin: 10px;
background-color: #efffc9;
padding: 5px 20px 15px 20px;
border: 1px solid rgb(191, 246, 250);
border-radius: 3px;
}
Display the input type text fields
The display property is set to inline-block and the width to 100% for the input text fields −
input[type="text"] {
display: inline-block;
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
Set the responsiveness
When the web browser is set to less than 600px, the responsiveness works. The flex direction is set to column reverse i.e., flexible items are displayed vertically as a column but in reverse order −
@media (max-width: 600px) {
.Fields {
flex-direction: column-reverse;
}
}
Example
The following is the code to create a responsive form with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial;
font-size: 17px;
padding: 8px;
}
* {
box-sizing: border-box;
}
.Fields {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: space-around;
}
.Fields div {
margin-right: 10px;
}
label {
margin: 15px;
}
.formContainer {
margin: 10px;
background-color: #efffc9;
padding: 5px 20px 15px 20px;
border: 1px solid rgb(191, 246, 250);
border-radius: 3px;
}
input[type="text"] {
display: inline-block;
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
width: 100%;
background-color: rgb(139, 76, 175);
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
font-size: 18px;
}
label {
margin-left: 20px;
display: block;
}
a {
color: black;
}
@media (max-width: 600px) {
.Fields {
flex-direction: column-reverse;
}
}
</style>
</head>
<body>
<h1 style="text-align: center;">Responsive Form Example</h1>
<div class="Fields">
<div>
<div class="formContainer">
<form>
<div class="Fields">
<div>
<h3>Register</h3>
<label for="fname">Full Name</label>
<input type="text" id="fname" name="firstname" />
<label for="email"> Email</label>
<input type="text" id="email" name="email" />
<label for="adr"> Address</label>
<input type="text" id="adr" name="address" />
</div>
<div>
<h3>Account Details</h3>
<label for="uname">Username</label>
<input type="text" id="uname" name="username" />
<label for="pass">Password</label>
<input type="text" id="pass" name="pwd" />
</div>
</div>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</body>
</html>
3K+ Views
