Beautiful HTML5, CSS3 and PHP supported Web Form

I wanted to share my HTML5, CSS3 fancy web form with you. It is about “Little Big Planet” game. This web form collects information in different ways (there are text fields,  boxes to tick, values to choose from, slider, etc.). Once you grasp how it is built you can alter it and make web form that suits your needs. Search for the HTML5 spec to find out about the rest of the amazing attributes that you can include in your form.

DEMO: http://yokowebdesign.co.uk/demo/html5_web_form_tutorial/index_html5.html

DOWNLOAD the files: http://yokowebdesign.co.uk/demo/html5_web_form_tutorial.rar

———————————————————————————————

FAQ:  HTML5 form have plenty of new attributes and elements. Don’t panic – they are easy to learn and implement. There are so many advantages of implementing HTML5 web forms so I must mention some. You don’t have to rely on JavaScript to validate the web form (because of the new features of HTML5 the web browser is already prepared to deal with some of the validation form for you). It is backward compatible ( in older web browsers  these features degrade gracefully). 

———————————————————————————————

EXPLANATION (Syntax and Description)

HTML – the structure of the web form

The code for this tutorial is very chunky so to see it more clearly download the files and open first “index_html5.html” file in the text editor.  

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
    <meta name="keywords" content="HTML5 CSS3, little big planet, yoko web design, joanna kowalska yoko">
    <meta name="description" content="little big planet driven by html5 and css3, yoko web design, Joanna Kowalska" > 
    <link rel="stylesheet" type="text/css" href="style_littlebigplanet.css" title="default" > 
    <title>Web Form driven by HTML5 & CSS3 | YOKO WEB DESIGN</title>
</head> 
<body>
<div id="wrapper">

 <!-- ============== FORM HTML ================ -->
 <section id="form">
    <div id="form_wrapper">
       <h3>Enter your details into the fields.</h3>
       <p id="p_form">* indicates required fields</p>

       <form class="little_form" action="form_sackboy.php" method="post">
          <div class="field">
             <label for="name"> Name *</label>
             <input type="text" id="name" class="inputfield textfield" name="name" placeholder="First Name *" required="" value="" size="35"> <br> 
          </div>

The HTML elements above have an attribute “name” assigned to them. The PHP uses this atrribute to extract the data from each of the form elements.

HTML5 Attributes:

Placeholder text sets text in an input field and is displayed there as long as the field is empty ( is used for the hints withing form fields). When the user clicks the input field and starts typing the placeholder text disappears.

Required attribute specifies that an input field must be filled out before submitting the form.

          <div class="field">
             <label for="surname">Surname *</label>
             <input type="text" id="surname" class="inputfield textfield" name="surname" placeholder="Surname *" required="" value="" size="35"> <br>
          </div>
         <div class="field"> 
            <label for="fav_sackperson">Sack Person</label>
            <input type="text" id="fav_sackperson" class="inputfield textfield" name="sackperson" placeholder="Your Favourite Sack Puppet" value="" size="35"> <br> 
         </div>

         <div class="field"> 
            <label for="game_score">Score LittleBigPlanet</label>
            <input type="range" id="game_score" class="inputfield textfield" name="points" placeholder="betweeen 0 and 10" value="" min="0" max="10" size="35"> <br> 
         </div>

The range type is used for input fields that should contain a value from a range of numbers. You can also set restrictions on what numbers are accepted. 

         <div class="field_high"> 
            <label class="checkboxes" for="fav_world">Your Favourite Themed World</label> <br> 
            <input type="checkbox" name="themed_world" value="Avalonia" >Avalonia<br>
            <input type="checkbox" name="themed_world" value="Da Vinci's Hideout">Da Vinci's Hideout<br>
            <input type="checkbox" name="themed_world" value="Factory of a Better Tomorrow">The Factory of a Better Tomorrow <br>
            <input type="checkbox" name="themed_world" value="Victoria's Laboratory">Victoria's Laboratory<br>
            <input type="checkbox" name="themed_world" value="The Temples">The Temples<br>
            <input type="checkbox" name="themed_world" value="Eve's Asylum">Eve's Asylum<br>
            <input type="checkbox" name="themed_world" value="Swinging Safari">Swinging Safari<br>
            <input type="checkbox" name="themed_world" value="The Wedding">The Wedding<br>
            <input type="checkbox" name="themed_world" value="the Islands">The Islands<br>
         </div>

While tabbing the form checkboxes  the “space” keyboard key selects the options chosen by the user.

         <div class="field2"> 
            <label for="age">Age</label>
            <select id="age" name="age" class="font">
               <option name="" value="">-</option>
               <option name="age" value="15-20">15-20</option>
               <option name="age" value ="20-25">20-25</option>
               <option name="age" value ="25-30">25-30</option>
               <option name="age" value ="30-35">30-35</option>
               <option name="age" value ="35-40">35-40</option>
            </select> <br>
         </div>

Different option when focused should be operated with the keyboard arrows.

         <div class="field"> 
            <label for="url">Your Website</label>
            <input type="url" class="inputfield textfield" id="url" name="url" placeholder="http://example.com" value="" size="35"> <br> 
         </div> 

         <div class="field"> 
            <label for="email">E-mail</label>
            <input type="email" class="inputfield textfield" id="email" name="email" placeholder="example@domain.com"value="" size="35"> <br>
         </div>
         <div class="field area">
            <label for="story">Tell Your Little Big Adventure *</label>
            <textarea type="text" rows="7" cols="35" class="inputfield textarea1" id="story" name="story" placeholder="Tell Your Sack Person's Fabulous Story*" required="" value="" maxlength="2000"></textarea> <br>
         </div> 

         <div class="field3">
            <label for="no_spam">spammers, you shall not pass !</label>
            <input name="human" class="inputfield textfield" required="" placeholder="What is 2 + 2?">
         </div>
         <div id="button_area"> 
            <input class="submitbutton" type="submit" value="Submit" id="submit" name="submit"> 
            <input class="resetbutton" type="reset" value="Reset" id="reset" name="reset" >
         </div>
     </form>
   </div>
 </section>
<!-- ============= form ends ================ -->
 <footer>
     <p>
           webmaster: Joanna Kowalska <a href="http://www.yokowebdesign.co.uk/" target="_blank" >yokowebdesign.co.uk </a>&nbsp; 2011 &nbsp; All Rights Reserved.
     </p> 
 </footer>
</div><!-- wrapper div -->
</body>
</html>

PHP

The code of “form_sackboy.php” document:

<?php
 $name = $_POST["name"];
 $surname = $_POST["surname"];
 $sackperson = $_POST["sackperson"];
 $points = $_POST["points"];
 $themed_world = $_POST["themed_world"];
 $age = $_POST["age"];
 $url = $_POST["url"];
 $email = $_POST["email"];
 $story = $_POST["story"];
 $human = $_POST["human"];

 $to = "example-email@gmail.com"; // put here your e-mail address
 $subject = "LittleBigPlanet filled in FORM- containes an adventure story :D ";
 $msg = $name . "\n" .
 $surname . "\n" .
 $sackperson . "\n" .
 $points . "\n" .
 $themed_world . "\n" . 
 $age . "\n" . 
 $url . "\n" .
 $email . "\n" .
 $story . "\n" ;
 //mail($to, $subject, $msg, "From: " . $email);

 if ($_POST["submit"] && $human == "4")
 {
 if (mail ($to, $subject, $msg, "From: " . $email))
 {
 //echo "<p> Form sent successfully!</p>";
 // echo below prints the message for the user, in this case the data from the form
 echo('The form you filled in was sent successfully.<br />');

 echo('<p class="blue_text">First Name:</p> <p class="magenta_text">' . $name . '</p> <br />');
 echo('<p class="blue_text">Last Name: </p><p class="magenta_text">' . $surname . '</p><br />');
 echo('<p class="blue_text">Sack Pupper Character: </p><p class="magenta_text">' . $sackperson . '</p><br />');
 echo('<p class="blue_text">Your Score for LBP: </p><p class="magenta_text">' . $points . '</p><br />');
 echo('<p class="blue_text">Your Favourite World/ Level: </p><p class="magenta_text">' . $themed_world . '</p><br />');
 echo('<p class="blue_text">Age: </p><p class="magenta_text">' . $age . '</p><br />');
 echo('<p class="blue_text">Your Website: <p class="magenta_text">'. $url . '</p><br />');
 echo('<p class="blue_text">E-mail: <p class="magenta_text">'. $email . '</p><br />');
 echo('<p class="blue_text">Your Sack Puppet Story: </p><p class="magenta_text">' . $story .'</p><br />' );
 }
 else
 {
 echo "<p>Ah! Try again, please?</p>";
 }
 }
 else if ($_POST["submit"] && $human != "4")
 {
 echo"<p>You answered the anti-spam question incorrectly!<br>
 Click on the link to return to the form <a href='http://yokowebdesign.co.uk/portfolio/index_html5.html'>Little Big Planet FORM</a></p>";
 }

 ?>

 ———————————————————

CSS – web form

section#form
{
 /*border: 1px solid aqua;*/
 float: left;
 margin: 50px 0 50px 100px; 
}
div#form_wrapper
{
 /*border: 1px solid aqua;*/
 padding: 5px 0 80px 10px; /* altering the bottom padding influenced the background image - it made it reach beyond form buttons. */
 width: 460px;
 color: #fff;
 /* background: #09C; nice light blue*/ 
 background-image: url('images/texture2.png');
 background-repeat:no-repeat; 
 background-position: top left; 
 height: 915px;
 font-family: Verdana, sans-serif;
 -moz-border-radius: 18px;
 -webkit-border-radius: 18px;
 border-radius: 18px; 
}
div#form_wrapper h3
{
 /*border: 1px solid aqua;*/
 margin: 15px 0 10px 0;
 font-size: 150%; 
 color: #09C;
 text-align: center;
 font-family: 'Gtown' ; 
}
label
{
 /*border: 1px solid aqua;*/
 top:10px;
 position:relative;
 color: #fff;
 font-family: 'Jasmine' ;/* lunch CornFed */ 
 font-size: 100%;
}
p#p_form
{
 /*border: 1px solid aqua;*/
 float: left;
 width: 450px;
 margin: -15px 0 10px 0;
 text-align: center;
 color: #09C;
}
label.checkboxes
{
 /*border: 1px solid pink;*/
 top:10px;
 float: left;
 margin: 0 0 10px 0;
 width: 450px;
 position:relative;
 color: #fff;
}
form.little_form textarea, form.little_form input{outline:none;}
a{outline: none ;}
a:focus{border: 2px solid #09C;}
div.field
{
 /*border: 1px solid aqua;*/
 float: left;
 margin: 0 0 0 0;
 padding: 5px 15px 0 10px;
 width: 430px;
 height: 40px; 
}
/*.field input:required
{
 border: 1px solid yellow; 
}*/
div.field3
{
 /*border: 1px solid aqua;*/
 float: left;
 margin: 20px 0 0 0;
 padding: 5px 15px 0 10px;
 width: 430px;
 height: 40px; 
}
.field2
{
 /*border: 1px solid aqua;*/
 padding: 20px 15px 0 10px;
 height: 50px; 
}
.field2 select.font /* form checkboxes and radio and option do not have borders, use outline instead to style these elements */
{
 color: #aaaaaa;
}
.field2 select.font:focus
{
 outline: 2px solid #09C; 
 /*color: #e7059f;*/
}
.field_high :focus
{
 outline: 2px solid #fff;
}
.area
{
 /*border: 5px solid pink;*/
 padding: 10px 15px 0 10px;
 min-height: 195px;
}
.inputfield
{
 color: #e7059f;
 padding:0 10px 0 10px;
 float:right;
 font: 75% Verdana;
 border:2px #74c6ff; /* if added "inset" instead of "solid" then
 we would have 3D border as "inset"specifies 3D border. 
 The effect depends on the border-colour value. */
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px; 
 border-radius: 5px; 
}
.textfield
{
 height:25px;
 padding-top:5px;
}
.textarea1
{
 padding-top: 10px;
 padding-bottom:10px;
 margin: 20px 0 0 0;
 height: 130px; /* the hight of the input white textarea */
 max-height:200px;
 max-width:250px;
}
.inputfield:focus/* the form field glows when focused*/
{
 -webkit-box-shadow: 0px 0px 35px #fff;
 /* border:2px #fff solid; line deleted so the submit button does not jump/ pop */
}
/* keyframes to "pulsate" animation */
@-webkit-keyframes pulsate 
{
0% { -webkit-box-shadow: 0px 0px 0px white;border:2px white inset}
25% { -webkit-box-shadow: 0px 0px 35px white;border:2px white inset}
50% { -webkit-box-shadow: 0px 0px 0px white; border:2px white inset}
75% { -webkit-box-shadow: 0px 0px 35px white;border:2px white inset}
100%{ -webkit-box-shadow: 0px 0px 0px #white;border:2px white inset}
} 
/*---------- FORM BUTTONS ----------*/
div#button_area
{
 float: left;
 margin: 40px 0 0 150px;
 width: 450px;
}
div#button_area input:focus
{
 border: 2px solid #fff;
}
.submitbutton
{
 border-style: none;
 border-color: inherit;
 border-width: 0px;
 width:75px;
 height:40px;
 font:80% Verdana;
 color: #fff;
 background: #09C;
 cursor:pointer;/* it changes the cursor arrow into a pointing hand */
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -moz-box-shadow: 0px 0px 30px #fff;
 -webkit-box-shadow: 0px 0px 30px #fff;
 box-shadow: 0px 0px 30px #fff;
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#5B5EB3')";
}
.submitbutton:hover
{
 color: #09C; 
 background: #fff; 
}
.resetbutton
{
 width:75px;
 height:40px;
 border-style: none;
 border-color: inherit;
 border-width: 0px;
 font:80% Verdana;
 color: #fff;
 background: #09C;
 cursor:pointer;/* it changes the cursor arrow into a pointing hand */
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px; 
 /* FF3.6 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#5B5EB3')";
}
.resetbutton:hover
{
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -moz-box-shadow: 0px 0px 30px #fff;
 -webkit-box-shadow: 0px 0px 30px #fff;
 box-shadow: 0px 0px 30px #fff;
 background: #e7059f;
 color: #fff;
}

 CSS – web form for the PHP webpage

/* ================ style for PHP Form ==============================*/
section#form
{
  float: left;
  margin: 50px 0 50px 100px; 
}
div#form_wrapper
{
 padding: 5px 0 80px 10px; /* altering the bottom padding influenced the background image - it made it reach beyond form buttons. */
 width: 460px;
 color: #fff;
 /* background: #09C; nice light blue*/ 
 background-image: url('images/texture3.png');
 background-repeat:no-repeat; 
 background-position: top left; 
 height: 915px;
 font-family: Verdana, sans-serif;

 border-radius: 18px; 
 -moz-border-radius: 18px;
 -webkit-border-radius: 18px; 
}
div#form_wrapper h3
{
 margin: 20px 0 10px 0;
 font-size: 150%; 
 color: #09C;
 text-align: center;
 font-family: 'Gtown' ; 
}
label
{
 top:10px;
 position:relative;
 color: #fff;
 font-family: 'Jasmine' ;/* lunch CornFed */ 
 font-size: 120%;
 color: #fff; 
}
p#p_form
{
 float: left;
 width: 450px;
 margin: -15px 0 10px 0;
 text-align: center;
 color: #09C;
}
p.blue_text
{
 color: #09C;
 font-size: 90%;
}
p.magenta_text
{
 color: #e334ab;
 float: left;
 margin: -15px 0 0 0;
 font-size: 90%;
}
label.checkboxes
{
 top:10px;
 float: left;
 margin: 0 0 10px 0;
 width: 450px;
 position:relative;
 color: #fff;
}
form.little_form textarea, form.little_form input{outline:none;}
a{outline: none ;}
a:focus{border: 2px solid #09C;}
.field
{
 padding: 5px 15px 0 10px;
 height: 50px; 
}
.field2
{
 padding: 20px 15px 0 10px;
 height: 50px; 
}
.field2 select.font /* form checkboxes and radio and option do not have borders, use outline instead to style these elements */
{
 color: #aaaaaa;
}
.field2 select.font:focus
{
 outline: 2px solid #09C; 
 /*color: #e7059f;*/
}
.field_high :focus
{
 outline: 2px solid #fff;
}
.area
{
 padding: 10px 15px 0 10px;
 min-height: 195px;
}
.inputfield
{
 color: #e7059f;
 padding:0 10px 0 10px;
 float:right;
 font: 75% Verdana;
 border:2px #74c6ff; /* if added "inset" instead of "solid" then
 we would have 3D border as "inset"specifies 3D border. 
 The effect depends on the border-colour value. */

 -moz-border-radius: 5px; /* FF1+ */
 -webkit-border-radius: 5px; /* Saf3+, Chrome */
 border-radius: 5px; /* Opera 10.5, IE 9 */
}
.textfield
{
 height:25px;
 padding-top:5px;
}
.textarea1
{
 padding-top:10px;
 padding-bottom:10px;
 margin: 20px 0 0 0;
 height:150px;
 max-height:200px;
 max-width:250px;
}
.inputfield:focus/* the form field glows when focused*/
{
 -webkit-box-shadow: 0px 0px 35px #fff;
 /* border:2px #fff solid; line deleted so the submit button does not jump/ pop */
}
/* animatio added to from field when focused
.inputfield:focus
{
 -webkit-animation-name: pulsate;
 -webkit-animation-duration: 10s;
 -webkit-animation-iteration-count: infinite;

 -moz-box-shadow: 0px 0px 30px #3cdfdf; 
}*/
/* keyframes to "pulsate" animation */
@-webkit-keyframes pulsate 
{
0% { -webkit-box-shadow: 0px 0px 0px white;border:2px white inset}
25% { -webkit-box-shadow: 0px 0px 35px white;border:2px white inset}
50% { -webkit-box-shadow: 0px 0px 0px white; border:2px white inset}
75% { -webkit-box-shadow: 0px 0px 35px white;border:2px white inset}
100%{ -webkit-box-shadow: 0px 0px 0px #white;border:2px white inset}
}
/*---------- FORM BUTTONS ----------*/
div#button_area
{
 float: left;
 margin: 10px 0 0 150px;
 width: 450px;
}
div#button_area input:focus
{
 border: 2px solid #fff;
}
.submitbutton
{
 border-style: none;
 border-color: inherit;
 border-width: 0px;
 /*float:right;
 margin: 0 -30px 0 0;*/
 width:75px;
 height:40px;
 font:80% Verdana;
 color: #fff;
 background: #09C;
cursor:pointer;/* it changes the cursor arrow into a pointing hand */
-moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -moz-box-shadow: 0px 0px 30px #fff;
 -webkit-box-shadow: 0px 0px 30px #fff;
 box-shadow: 0px 0px 30px #fff;
/* FF3.6 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#5B5EB3')";
 /* background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #7785a3)); *//* Saf4+, Chrome */
}
.submitbutton:hover
{
 background: #e7059f;
 color: #fff;/* #ED0767 bright pink */ 
}
.resetbutton
{
 /* float: left;
 margin: -20px 0 0 255px;*/
 /*position:relative; A relative positioned element is positioned relative to its normal position */
 width:75px;
 height:40px;
 border-style: none;
 border-color: inherit;
 border-width: 0px;
 font:80% Verdana;
 color: #fff;
 background: #09C;
cursor:pointer;/* it changes the cursor arrow into a pointing hand */
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
/* FF3.6 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#5B5EB3')";
 /* background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #7785a3)); *//* Saf4+, Chrome */
}
.resetbutton:hover
{
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -moz-box-shadow: 0px 0px 30px #fff;
 -webkit-box-shadow: 0px 0px 30px #fff;
 box-shadow: 0px 0px 30px #fff;
 background: #fff;
 color: #09C;
}
/*----------------------------*/

I am sure that you can do a great use of this form. Experiment with the HTML5 attributes and style of the web form. Toodeloo! Yoko

Resources: http://diveintohtml5.info/forms.html , http://www.w3schools.com/html/html5_intro.asp

2 thoughts on “Beautiful HTML5, CSS3 and PHP supported Web Form

  1. Excellent weblog right here! Additionally your website loads up fast! What web host are you the use of? Can I am getting your associate hyperlink for your host? I want my website loaded up as fast as yours

Leave a Reply

Your email address will not be published. Required fields are marked *