Learn how to build and design websites with our tutorials.

Responsive HTML Form Tutorial

This tutorial will show you how to make a simple responsive HTML form that will look how you want it to look, no matter if the user is viewing your website on a laptop, tablet, mobile phone, etc. CSS media queries are what makes it possible to make responsive HTML forms.

You should at least be familiar with HTML forms and @media queries so that you can

In this example, first I make a form within a <div> container. The form container, the <div>, will have a fixed width. It will also be centered on the web page. I will center the <div> by applying the margin property with the values of "0 auto" to it.

When the screen size is scaled down to a width of 720 pixels or lower, the width of the form container will be changed to a percentage so that is never wider than screen.

When the screen size is scaled down to 500 pixels or less, I will change the width of the labels, input fields and button to 90 percent so that their width is never larger than the screen size. I will center them as well.

The code example below shows you how to make a responsive HTML form.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style type="text/css">

.demo-form{
width: 700px;
height: auto;
margin: 0 auto;
padding: 0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #ececec;
background: #f6f6f6;
}
.demo-form label, .demo-form input, .demo-form button{
display: block;
width: 300px;
height: 20px;
margin: 5px auto;
padding: 0;
}
@media screen and (max-width: 720px){
	.demo-form{
		width: 90%;
	}
}
@media screen and (max-width: 500px){
	.demo-form label, .demo-form input, .demo-form button{
		width: 90%;
	}
}

</style>
</head>
<body>

<div class="demo-form">

<form id="login" action="#" method="post">

<p>
<label for="ame" class="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your Name" />
</p>

<p>
<label for="email" class="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your Email" />
</p>

<p>
<label for="password" class="password">Password</label>
<input type="password" id="password" name="password" />
</p>

<p>
<button>Click Here</button>
</p>

</form>

</div>

</body>
</html>

The code example above outputs the responsive HTML form below.