Everybody knows about web forms, isn't it?
Make a <form>, a few <input type="text"> elements, maybe an<input type="password">, finish it off with an <input type="submit"> button, and you’re done.
You don’t know the half of it. HTML5 introduced a selection of new input types and attributes that make the creation and validation of forms far easier than previous methods.
Let's explain how to create a stylish responsive HTML5 form:
1. First step: the basic page
We have to create the basic HTML needed for the page. We are going to build the form as a standalone component.
001 <!doctype html>
002 <html>
003 <head>
004 <title>Awesome HTML5 Form</title>
005 </head>
006 <body>
007 </body>
008 </html>
Step 2: Include fonts
In this tutorial, we’ll use a background image and a Google web font.
Step 3: create a container
Create a <div> and name it #myform. Set the width to 470px, height to auto, add 5px padding left and right and set the margins to auto.
001 #myform {
002 width:470px;
003 padding: 0px 5px;
004 margin: 0 auto;
005 }
Step 4: add input fields
We'll start adding five fields with input type as text and the sixth as submit.
001 <form>
002 <input type=”text”>
003 <input type=”text”>
004 <input type=”text”>
005 <input type=”text”>
006 <input type=”submit”>
007 </form>
Step 5: input type
We have to choose the input types (email, date, url...)
001 <form>
002 <input type=”text”>
003 <input type=”text”>
004 <input type=”email”>
005 <input type=”date”>
006 <input type=”url”>
007 <input type=”submit”>
008 </form>
Step 6: naming fields
We now need to assign a unique name to identify them.
001 <form>
002 <input type=”text” name=”name”>
003 <input type=”text” name=”surname”>
004 <input type=”email” name=”email”>
005 <input type=”date” name=”date”>
006 <input type=”url” name=”website”>
007 <input type=”submit”>
008 </form>
Step 7: labels
For the next step we want to have our labels displayed over the top of our input fields.
001 <label>First name</label>
002 <input type=”text” name=”name” required>
003 <label>Surname</label>
004 <input type=”text” name=”surname” required>
005 <label>Email</label>
006 <input type=”email” name=”email” required>
Step 8 : styling the text
Now let's style the text.
001 font-family: “Open Sans”, Arial, sans-serif;
002 font-size: 12px;
003 font-weight: 300;
004 color: #000;
005 }
Step 9: full width
To make the form responsive, the input fields are going to be given a percentage width. The obvious choice is 100%, but this could be 95% if needed. Add the input selector in the CSS and set the width to 100%, or your chosen width.
001 input {
002 width: 100%;
003 }
Step 10: input style
We have set the height to 30px and then added the desired font weight and size.
001 input {
002 width: 100%;
003 height: 30px;
004 width: 100%;
005 font: 300 24px “Open Sans”, Arial, sans-serif;
006 }
Step 11: add some space
We add a little space between the text and the field, and a top margin of 5px.
001 input {width: 100%;
002 height: 30px;
003 font: 300 24px “Open Sans”, Arial, sans-serif;
004 margin: 5px 0px 10px 0px;}
Step 12: add placeholder text
The placeholder allows text to be added to a field while the field is empty. When the field comes into focus, and the user starts typing then the placeholder, text disappears.
001 <label>First name</label>
002 <input type=”text” name=”name”
003 placeholder=”your text here” required>
Step 13: date input
The input type date renders differently in different browsers. Chrome users will see an arrow that opens a complete datepicker while other browsers will display nothing or other a simplified date picker. For this reason the placeholder text can be called into action to inform the user the format to input a date.
Step 14: add "value" to URL
001 <label>Web address</label
002 <input type=”url” value=”http://”
003 name=”webaddress”>
Step 15: styling the button with CSS
001 input[type=submit] {
002 background-color: #C13A40;
003 height: 50px;
004 width: 100%;
005 border: none;
006 font-weight: 400;
007 font-style: italic;
008 letter-spacing: 2px;
009 color: #FFFFFF;
010 background-color: #FF9900;}
Step 16: add & style up a title
To add a title, add a set of <h1> or <h2>... tags.
001 h2 {
002 font-size: 90px;
003 color: #FF9900;
004 text-shadow: 2px 2px #222;
005 font-family: “Oleo Script”;
006 border-bottom: 2px solid #FFF;
007 text-align: center;
008 margin: 0px 0px 5px 0px;}
Step 17: finish up
To make the form responsive, simply resize the #myform <div> tag and the fields will resize automatically. The height of the form is set to auto to compensate.
001 #myform {
002 width: 470px;
003 height: auto;
004 background-image: url(images/sand02.jpg);
005 margin: 0 auto;
006 padding: 0px 1%;
007 box-shadow: 5px 5px 0px #AAA;
008 border-radius: 5px;}
Janeth Kent
Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.
Related Posts
Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3
HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…
Loading images by resolution with HTML5
Normally the way to load images in HTML is through the img element to which we pass as a parameter the URL of the image to load. But since HTML5…
How to make your own custom cursor for your website
When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…
Open source web design tools alternatives
There are many prototyping tools, user interface design tools or vector graphics applications. But most of them are paid or closed source. So here I will show you several open…
How to write our own Privacy Policy
In this article we will talk about Privacy Policy statements, how you can write one and implement it on your page. Why did it pop up? These days when we browse on…
Layouts with Bootstrap 4: how to create a responsive web 2
Here we are with the second part of the guide: Layouts With Bootstrap 4 Horizontal alignment To align the columns horizontally we can use justify-content-value classes, which use the justify-content property of…
Layouts with Bootstrap 4: how to create a responsive web
Responsive or adaptable web design is a design methodology in which the appearance of the web page adapts to the resolution of the device with which it is being viewed,…
A List of Awesome games made with HTML5 and JavaScript
Browsers and JavaScript are becoming more powerful and more comprehensive. There was a time when any type of game needed Flash. But the stage now is set for powerful HTML5…
A roadmap to becoming a web developer in 2019
There are plenty of tutorials online, which won't cost you a cent. If you are sufficiently self-driven and interested, you have no difficulty training yourself. The point to learn coding…
The Meaning of Colors in web Design. A little bit of psychology
Color psychology is one of the most talked about and interesting parts of psychology. The idea that some colors evoke feelings and emotions. In fact, this color helps buy the…
How To Build A Presentation Using HTML, CSS, & JavaScript
The process of conceiving and constructing a presentation is often hard. Sometimes we're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Today, we're going to learn how…
Parallax Landscape Scenes Built Entirely With CSS and HTML
Web design trends come and go, but the parallax effect has, well, stuck around. Parallax scrolling has had a big impact on user interface design, on both websites and mobile…