HTML5 Forms – HTML5 Forms 2.0 or Let’s Form It!

After a little break I am here with a new article. I hope You are ready because this time we are going to make a proper billing form with all of its attachments. It won’t be easy because we have to use the single structural elements here well and we need some css3 knowledge aswell. If You don’t understand one of the commands and I left it without comment then CSS3 reference could be useful. And I suggest download all of the codes burn them into your mind or rewrite them as You may want.

Let’s cut to the chase, shall we? Starting with the HTML5 part what is the simpliest. Only that matters is that we build up the structure with logic and the “make up” will be simplier.

I’m gonna use the HTML5 input types which are the following:

  •     text
  •     e-mail
  •     tel

And some auxiliary option what are known from the earlier articles:

  •     autofocus
  •     required
  •     placeholder

I have made the basic tag with fieldset. Every form got a unique fieldset in the final code. I have defined every single input field <ol> – <li> with tags (list element). And I used the legend tag that every form address let show well. But i don’t want to run forward. Let’s begin with a simple example and its basic modification (with a little “make up” 🙂 ).

Let’s see the basic data part. Input the user name, e-mail address and telephone number. Put some placeholders and let all fields required. Help the user that we are put an autofocus in the first field and this way he will be able to start filling the form faster.

The HTML5 source looks sort of in this way.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 Form demo 1.0.1</title>
<link rel=stylesheet href=style.css type=text/css>
</head>

<body>
<h1>Payment form</h1>
<form id=fizetes>
<fieldset>
<legend>Your basic data</legend>
<ol>
<li>
<label for=name>Name</label>
<input id=name name=name type=text placeholder="Your name" required autofocus>
</li>
<li>
<label for=email>E-mail</label>
<input id=email name=email type=email placeholder="[email protected]" required>
</li>
<li>
<label for=phone>Phone</label>
<input id=phone name=phone type=tel placeholder="+36201234567" required>
</li>
</ol>
</fieldset>
</form>
</body>
</html>

You can check this without CSS.

Let’s see what can we do with this form to look better. Give it a little bit CSS. I have already placed the appropriate part in the source code above so that I don’t have to paste the basic code once again. I named my CSS file as style.css.
I have defined the single style elements in the CSS (form, fieldset legend, label, ol, li) tried to fill with commentaries so that you can follow easily. My source looks in this way:

/* CSS Reset don't have to but is doesn't hurt */
{
margin: 0;
padding: 0;
}

/* We are tell to the browser here that our HTML5 elements should handle as block */
html, body, h1, form, fieldset, legend, ol, li {
display: block;
margin-left: auto;
margin-right: auto;
}

body { /* define the background and some other things */
background: #F0F0F0; /* background color */
color: #991111; /* character color & font-family */
padding: 0;
font-family: Georgia, serif;
}

h1 { /* getting up the page address */
font-size: 28px; /* character size */
text-align: center; /* adjustment */
}

form#fizetes {
/* Form background and rounding */
background: #96cedd;
-moz-border-radius: 20px; /* cool if it's round */
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
padding: 10px; /* set padding that surrounds the form */
width: 500px; /* set the width */
}

form#fizetes fieldset { /* set the basic data part*/
border: none;
margin-bottom: 5px;
}

form#fizetes legend { /* "Your basic data" text forming */
color: #3b4e8c;
font-size: 16px;
font-weight: bold;
}

form#fizetes ol li { /* let's form every rows of the form and the surrounding area */
background: #59cfac;
background: rgba(255,255,255,.2); /* a tiny trick to look better. rgba - with transparency definition*/
border-color: #aab092;
border-color: rgba(255,255,255,.2);
border-style: solid;
border-width: 2px;
-moz-border-radius: 10px; /* rounding again because we love the round forms */
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
line-height: 10px; /* define line height */
list-style: none; /* style that belongs to */
padding: 6px 12px; /* tiny rounding */
margin-bottom: 1px;
}

form#fizetes label { /* set the form's labels */
float: left;
font-size: 13px;
width: 150px;
}

Our finished part looks in this way.

If we are done with this then expand our form with the address part put a “buy” button at the end and give a counter to every legend. By the expansion follow the structure mentioned before. This is how it looks like:

...
<fieldset>
<legend>Address</legend>
<ol>
<li>
<label for=address>Address</label>
<textarea id=address name=address rows=5 required></textarea>
</li>
<li>
<label for=postcode>Postal Code</label>
<input id=postcode name=postcode type=text required>
</li>
<li>
<label for=country>Country</label>
<input id=country name=country type=text required>
</li>
</ol>
</fieldset>
<fieldset>
<button type=submit>Buy!</button>
</fieldset>
</body>
</html>

The expanded CSS looks so:

/* CSS Reset don't have to but is doesn't hurt */
{
margin: 0;
padding: 0;
}

/* We are tell to the browser here that our HTML5 elements should handle as block */
html, body, h1, form, fieldset, legend, ol, li {
display: block;
margin-left: auto;
margin-right: auto;
}

body { /* define the background and some other things */
background: #F0F0F0; /* background color */
color: #991111; /* character color & font-family */
padding: 0;
font-family: Georgia, serif;
}

h1 { /* getting up the page address */
font-size: 28px; /* character size */
text-align: center; /* adjustment */
}

form#fizetes {
/* Form background and rounding */
background: #96cedd;
-moz-border-radius: 20px; /* cool if it's round */
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
padding: 10px; /* set padding that surrounds the form */
width: 500px; /* set the width */
}

form#fizetes fieldset { /* set the basic data part*/
border: none;
margin-bottom: 5px;
}

form#fizetes legend { /* "Your basic data" text forming */
color: #3b4e8c;
font-size: 16px;
font-weight: bold;
}
form#fizetes > fieldset > legend:before { /* form the text that places after the counter */
content:  counter(fieldsets)"." " Step:"; /* Worth to try and set it as You wish. This is the only way to memorize it */
counter-increment: fieldsets; /* When we should increase our Counter? Naturally by fields */
}
}

form#fizetes ol li { /* let's form every rows of the form and the surrounding area */
background: #59cfac;
background: rgba(255,255,255,.2); /* a tiny trick to look better. rgba - with transparency definition*/
border-color: #aab092;
border-color: rgba(255,255,255,.2);
border-style: solid;
border-width: 2px;
-moz-border-radius: 10px; /* rounding again because we love the round forms */
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
line-height: 10px; /* define line height */
list-style: none; /* style that belongs to */
padding: 6px 12px; /* tiny rounding */
margin-bottom: 1px;
}

form#fizetes label { /* set the form's labels */
float: left;
font-size: 13px;
width: 150px;
}

form#fizetes textarea { /* define the look out/form of the address input field */
background: #ffffff;
border: none;
-moz-border-radius: 10px; /* another rounding... (as you may know...:-) )*/
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
font: italic 13px Georgia, serif;
outline: none;
padding: 5px;
width: 200px;
}

form#fizetes button { /* basic attribute of the buy button */
background: #4b676e;
border: none;
-moz-border-radius: 40px; /* It is still round... */
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
color: #ffffff;
display: block;
font: 18px Georgia, serif;
letter-spacing: 2px; /* increase the place between characters */
margin: auto;
padding: 7px 25px;
text-transform: uppercase; /* transcribe it to upper case (content of the button) */
}

form#fizetes button:hover { /* mouse attributes above the buy button */
background: #384d52;
cursor: help; /* It's just a little example to change the cursor's lookout */
}

The working example can be found here.

If we are done so far there is only one step behind: choose the payment method. I choosed the radio type button. Our source should look out in this way:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 payment form full</title>
<link rel=stylesheet href=style.css type=text/css>
</head>

<body>
<h1>Payment form</h1>
<form id=fizetes>
<fieldset>
<legend>Basic Data</legend>
<ol>
<li>
<label for=name>Name</label>
<input id=name name=name type=text placeholder="Your name" required autofocus>
</li>
<li>
<label for=email>E-mail</label>
<input id=email name=email type=email placeholder="[email protected]" required>
</li>
<li>
<label for=phone>Phone</label>
<input id=phone name=phone type=tel placeholder="+36201234567" required>
</li>
</ol>
</fieldset>

<fieldset>
<legend>Address</legend>
<ol>
<li>
<label for=address>Address</label>
<textarea id=address name=address rows=5 required></textarea>
</li>
<li>
<label for=postcode>Postal code</label>
<input id=postcode name=postcode type=text required>
</li>
<li>
<label for=country>Country</label>
<input id=country name=country type=text required>
</li>
</ol>
</fieldset>

<fieldset>
<legend>Payment method</legend>
<ol>
<li>
<fieldset>
<ol>
<li>
<input id=paypal name=cardtype type=radio>
<label for=paypal>Paypal</label>
</li>
<li>
<input id=skrill name=cardtype type=radio>
<label for=skrill>Skrill</label>
</li>
</ol>
</fieldset>
</li>
</ol>
</fieldset>

<fieldset>
<button type=submit>Buy!</button>
</fieldset>
</form>
</body>
</html>

The expanded CSS source looks in this way:

/* CSS Reset,  */
{
margin: 0;
padding: 0;
}

/* We are tell to the browser here that our HTML5 elements should handle as block */
html, body, h1, form, fieldset, legend, ol, li {
display: block;
margin-left: auto;
margin-right: auto;
}

body { /* define the background and some other things */
background: #F0F0F0; /* background color */
color: #991111; /* character color & font-family */
padding: 0;
font-family: Georgia, serif;
}

h1 { /* getting up the page address */
font-size: 28px; /* character size */
text-align: center; /* adjustment */
}

form#fizetes {
/* Form background and rounding */
background: #96cedd;
-moz-border-radius: 20px; /* cool if it's round */
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
counter-reset: fieldsets; /* counter reset */
padding: 10px; /* set padding that surrounds the form */
width: 500px; /* set the width */
}

form#fizetes fieldset { /* set the basic data part*/
border: none;
margin-bottom: 5px;
}

form#fizetes legend { /* counter text formatting */
color: #3b4e8c;
font-size: 16px;
font-weight: bold;
}

form#fizetes > fieldset > legend:before { /* form the text that places after the counter */
content:  counter(fieldsets)"." " Step:"; /* Worth to try and set it as You wish. This is the only way to memorize it */
counter-increment: fieldsets; /* When we should increase our Counter? Naturally by fields */
}

form#fizetes ol li { /* let's form every rows of the form and the surrounding area */
background: #59cfac;
background: rgba(255,255,255,.2); /* a tiny trick to look better. rgba - with transparency definition*/
border-color: #aab092;
border-color: rgba(255,255,255,.2);
border-style: solid;
border-width: 2px;
-moz-border-radius: 10px; /* rounding again because we love the round forms */
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
line-height: 10px; /* define line height */
list-style: none; /* style that belongs to */
padding: 6px 12px; /* padding */
margin-bottom: 1px;
}

form#fizetes ol ol li { /* Set the input part of Paying Method */
background: none;
border: none;
float: left;
}

form#fizetes label { /* set the form's labels */
float: left;
font-size: 13px;
width: 150px;
}

form#fizetes fieldset fieldset label { /* input part's label of paying method and its getting up */
background:none no-repeat left 60%;
line-height: 20px;
padding: 0 0 0 30px;
width: 30px;
}

form#fizetes input:not([type=radio]), /* radio type's define of Paying Method */
form#fizetes textarea { /* define the look out/form of the address input field */
background: #ffffff;
border: none;
-moz-border-radius: 10px; /* another rounding... (Should be super round by now...) */
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
font: italic 13px Georgia, serif;
outline: none;
padding: 5px;
width: 200px;
}

form#fizetes input[type=radio] { /* radio type's place of Paying Method */
float: left;
margin-right: 5px;
}

form#fizetes button { /* basic attribute of the buy button */
background: #4b676e;
border: none;
-moz-border-radius: 40px; /* It is still round...isn't it? */
-webkit-border-radius: 40px;
-khtml-border-radius: 40px;
border-radius: 40px;
color: #ffffff;
display: block;
font: 18px Georgia, serif;
letter-spacing: 2px; /*increase the place between characters */
margin: auto;
padding: 7px 25px;
text-transform: uppercase; /* transcribe it to upper case (content of the button) */
}
}

form#fizetes button:hover { /* mouse attributes above the buy button */
background: #384d52;
cursor: help; /*It's just a little example to change the cursor's lookout. */
}

The working example can be found here.

If You have any further questions or opinions You can write to the e-mail address that has been given in the Contact menu. Good editing to everyone!

Creative Commons Licenc
HTML5 Forms – HTML5 Forms 2.0 or Let’s Form It! a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.

You may also like...