How to create a responsive HTML5 form

How to create a responsive HTML5 form
by Janeth Kent Date: 12-06-2013 html5 web tutorials html tools web design web development

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;}

 

 
by Janeth Kent Date: 12-06-2013 html5 web tutorials html tools web design web development hits : 4096  
 
Janeth Kent

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…

Clicky