Post
Ask Question

Formidable Forms Creation Using HTML 5

Introduction

 
 The very first thing I learned as a programmer is that it seems to be interesting and fun to play with. It's like a Cherry for every program. It makes every application a beautiful portrait, it's like making a bride. :) But jokes apart, HTML (HyperText Markup Language) is a markup language that is used to create web pages as suggested by the Wiki. :) And now getting to our topic Formidable Forms.
 
Let's not mess up the article and instead focus only on the topics specified and get through them in detail.
 
About the Demo
 
In the demo, I have used Microsoft Web Matrix 3.0. Web Matrix is open source, lightweight and easy to use.
 
You can download it from <a href="http://www.microsoft.com/web/webmatrix/">Web Matrix</a>. This gives the intellisence.
 
It is for the users that are also cloud-connected, in other words, we can deploy the websites created on the cloud-like Microsoft Azure.
 
Background
 
Gone are those days of standing in queues and filling in forms, maybe for exams, posting mails, banks, hospitals almost everywhere, we used to fill in forms, specific paper forms. Now technology has superseded the old forms with the one-click events. With the HTML tags and the helpers, it's a cake making show. Visit the respective websites you want to sign in or sign up for, fill in the forms and yes you are done. Saving time that has now become a crucial part of life.
 
It's now true that these forms are one of the necessary parts of any website you visit. Let's delve deeper and explore what they exactly are.
 
Let's Start
 
Let's first understand what HTML4 was and then talk about its successor HTML5. HTML4 has a set of form fields that you can use. There are:
  • Text field
  • Text area
  • Checkbox
  • Radio buttons
  • Select box
  • File field
  • Button
  • Image button
  • Submit button
Most of these form fields use the input element, but some form fields have their own elements. HTML4 can contain form elements like text fields, word fields, radio buttons, checkboxes and submit buttons.
 
The elements frame, frameset, and noframes are being removed from the language, as well as an acronym, applet, basefont, big, blink, center, dir, font, isindex, strike, tt and u. All of these can be handled using CSS or other methods. As we know every successor inherits from its predecessor, similarly HTML5 has it's properties similar to HTML4 and is very enhanced too.
 

HTML 5 Input Types

 
Every HTML element for form creation has input types. We have all encountered them, right? Something like "input type". Yes, we have.
 
Quote
  1. <input type="text">  
  2. <textarea></textarea>  
  3. <input type="checkbox">  
  4. <input type="radio">  
This are some examples regarding the input types. These are vital elements for HTML forms. And yes we all know what these are and how they perform. And we will learn more from the demo code.
 
We use other attributes to be used for CSS and JavaScripts. They are: 
  • id: The id attribute is usually used to point to a style in a style sheet and by JavaScript (via the DOM element) to manipulate the element with the specific id.
     
  • class: This does the same as id but ids are used uniquely for specific elements whereas classes can be used commonly.
     
  • name: The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside a document.
These are some of the attributes used during data entry.
 

HTML 5 Form Elements

 
Apart from the elements provided by HTML4, HTML5 has the following additional elements:
  • <datalist>: Specifies a list of pre-defined options for an <input> element.
     
  • <keygen>: Provides a secure way to authenticate users.
     
  • <output>: Represents the result of a calculation (like one performed by a script).
Let's see one by one how to implement that in our applications: 
    1. <datalist id="browsers">  
    2.   
    3. <option value="Internet Explorer">  
    4.   
    5. <option value="Firefox">  
    6.   
    7. <option value="Chrome">  
    8.   
    9. <option value="Opera">  
    10.   
    11. <option value="Safari">  
    1. Username: <input type="text" name="usr_name">  
    2. Encryption: <keygen name="security" />  
    1. <input type="range" id="a" value="50">100 +  
    2. <input type="number" id="b" value="50">=  
    3. <output name="x" for="a b">  
    4. </output>    
  • name: The name of this text field. This is used when submitting the form to the server. This name can also be used when referencing the form field from JavaScript.
     
  • value: Sets the text value to be displayed in the text field as the default text.
     
  • size: The approximate size in characters of this text field. Note that the size will not always fit the given number of characters and is often different in different browsers.
     
  • maxlength: The maximum number of characters that are allowed to enter into this text field. The value must be a number.
     
  • readonly: Sets the text field in read-only mode, meaning you cannot change the text displayed in the text field. Valid values are true and false.
     
  • disabled: Sets the text field in disabled mode, meaning you cannot change the text displayed in the text area. Furthermore, when the form is submitted, the value of the text field is not submitted. Valid values are true and false.

HTML Form Attributes

 
HTML 5 has new attributes in its bag. The attributes added make coding much easier. Some of them are:
  • autocomplete: As the name suggests, the autocomplete attribute specifies whether a form or input field should have autocompleted on or off. When autocomplete is on, the browser automatically completes values based on values that the user has entered before.
     
  • nonvalidate: The novalidate attribute is a boolean attribute. When present, it specifies that the form-data (input) should not be validated when submitted.
Some new attributes for input elements are:
  • autocomplete
  • autofocus
  • form
  • formmethod
  • list
  • height and width
  • and many more...
  1. First name:<input type="text" name="fname" autocomplete="On">  
  2. Last name: <input type="text" name="lname" autocomplete="On">  
  1. <form action="demo_form.asp" novalidate>  
  2.   E-mail: <input type="email" name="user_email">  
  3.   <input type="submit">  
  4. </form>  
We start using the elements, the attributes and make our form. In the demo I have used the input types: text, radio, checkbox, file and buttons. Uploading files and selecting from multiple options. <html>
 
The following are the elements and how they look when used:
  • Checkbox
     
    Checkbox
     
  • Upload Files
     
    Upload Files
     
  • Radio Buttons 
     
    Radio Buttons
     
  • Color Picker
     
    Color Picker
     
Using the code
 
Formidable Form With HTML5 Putting Together what we discussed.
 
The following is what we will show:
 
Formidable
    1. <form>  
    2. Name:   
    3. <input type="text" value="Enter your Name"style="background-color:blue" title="Enter your name"/>  
    4.   
    5. Age:   
    6. <input type="text" value="Enter in Integer"style="background-color:blue" title="Enter your age"/>  
    7.   
    8. Gender:  
    9. <input type="radio" value="male" title="Male"/>Male  
    10.        <input type="radio" value="female" title="Female"/>Female  
    11.   
    12. Qualification:  
    13.        <input type="checkbox" value="Student"/>Graduate     
    14.   
    15.        <input type="checkbox" value="Graduate"/>B-tech      
    16.   
    17.        <input type="checkbox" value="Graduate"/>B-Sc      
    18.   
    19.        <input type="checkbox" value="Graduate"/>B-Com      
    20.   
    21.        <input type="checkbox" value="Graduate"/>Post-Graduate      
    22.   
    23.   
    24. Subjects:  
    25.   
    26.   <select>  
    27.     <option>C</option>  
    28.     <option>C++</option>  
    29.     <option>Java</option>  
    30.     <option>ASP.NET</option>  
    31.     <option>Azure</option>  
    32. </select>  
    33.   
    34.   
    35. Date of Birth:   
    36. <input type="date" value="dd/mm/yyyy"style="background-color:blue" title="Enter your DOB"/>  
    37.   
    38.   
    39. E-mail:  
    40. <input type="email" value="[email protected]"style="background-color:blue" title="Enter your E-mail"/>  
    41.   
    42.   
    43. Upload your Profile Pic:<input type="file" name="pic" accept="image/*" title="Profile Pic">  
    44.   <input type="submit">  
    45.   
    46.   
    47. Select your favorite color: <input type="color" name="favcolor">  
    48.   
    49.   <input type="submit" value="Submit your color" title="Your color chosen">  
    50.   
    51.   
    52.   <input type="submit" value="You are done" title="click here"/>  
    53.     
    54.     
    55. </form>  
Points of Interest
 
Now we are done. But one more thing is that we need to render the CSS stylesheets and JavaScript scripts if used right!
  1. <link rel="stylesheet" type="text/css" href="form.css">  
And yes in the head section. It's a better practice to keep your CSS at the top and the JavaScript scripts at the bottom of the HTML page.
 
History
 
 I have written 1 article previously. This is my first contribution to the competition. Not too complicated, easy for beginners to learn, short and handy.


Similar Articles
Invincix Solutions Private limited
Every INVINCIAN will keep their feet grounded, to ensure, your head is in the cloud