Click here to Skip to main content
Click here to Skip to main content

Tagged as

Formidable Forms Creation Using HTML5

, 21 Apr 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Formidable Forms With HTML5 for Beginners

Introduction

The very first thing that I learned as a programmer that seemed to be interesting and fun to play with. Its like cherry for every program. It makes every application a beautiful potray, its like making up a bride Smile | :) . But jokes apart, HTML(Hyper Text Markup Language) is a markup language that is used to create web pages as suggested by Wiki Smile | :) . And now coming to our topic Formidable Forms.

Lets not mess the Article and focus only the topics specified and get through them in details.

Background

Gone are those days standing in queues and filling up forms, may it be for exams, posting mails, banks, hospitals almost everywhere, we used to fill forms to be specific paper forms. Now its technology that has succeeded the old forms with the one click events. With the Html tags and the helpers its a cake making show. Visit the respective websites you want to sign in or sign up for, fill the forms and yes you are done. Saving time that has now become the crucial part of life.

Its now derived that these forms are one of mandatory parts of any website you visit. Lets go deeper and explore what they exactly are.

Lets Start

Lets first know 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, password fields, radio buttons, checkboxes, and submit buttons.

The elements frame, frameset, and noframes are being removed from the language, as well as 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 has inheritance from its predecessor, similarly Html5 has its properties similar to Html4 and much enhanced too.

Html5 Input Types

Every Html element for a form creation use input types. We all have encountered right!! Something like this:- input type= Yes we have.

Quote:
<input type="text">
<textarea></textarea>
<input type="checkbox">
<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 more we will know from the demo code.

We use other attributes to be used for CSS and JavaScripts. They are:

  1. id :- The id attribute is most 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.
  2. class:- this performs the same as id but id's are used uniquely for specific elements whereas classes can be used commonly.
  3. 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.

Html5 Form Elements

Apart from the elements provided by the Html4,Html5 has the following more elements:

  • <datalist>:-specifies a list of pre-defined options for an <input> element.
  • <keygen>:-purpose is to provide a secure way to authenticate users.
  • <output>:-represents the result of a calculation (like one performed by a script).
Lets see one by one how to implement in our application:-
<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

Username: <input type="text" name="usr_name">
Encryption: <keygen name="security" />

<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b">
</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 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 is allowed to type 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 aretrue and false.

Html Form Attributes

Html5 has new attributes into 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 autocomplete on or off.When autocomplete is on, the browser automatically complete 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 element are:
  • autocomplete
  • autofocus
  • form
  • formmethod
  • list
  • height and width
  • and many more...
First name:<input type="text" name="fname" autocomplete="On">

Last name: <input type="text" name="lname" autocomplete="On">

<form action="demo_form.asp" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

Lets go for our Demo

We start using the elements, the attributes and make our form. In the demo I have used the input types : text,radio,checkbox,file,buttons. Uploading files, selecting from multiple options. <html>

Below are the elements how they look when used:-
Checkbox

Upload Files

Radio Buttons

Color Picker

Using the code

Formidable Form With HTML5 Putting Together what we discussed

Below is what we are going to bring up :-


<form>
Name: 
<input type="text" value="Enter your Name"style="background-color:blue" title="Enter your name"/>

Age: 
<input type="text" value="Enter in Integer"style="background-color:blue" title="Enter your age"/>

Gender:
<input type="radio" value="male" title="Male"/>Male
       <input type="radio" value="female" title="Female"/>Female

Qualification:
       <input type="checkbox" value="Student"/>Graduate   

       <input type="checkbox" value="Graduate"/>B-tech    

       <input type="checkbox" value="Graduate"/>B-Sc    

       <input type="checkbox" value="Graduate"/>B-Com    

       <input type="checkbox" value="Graduate"/>Post-Graduate    


Subjects:

  <select>
    <option>C</option>
    <option>C++</option>
    <option>Java</option>
    <option>ASP.NET</option>
    <option>Azure</option>
</select>


Date of Birth: 
<input type="text" value="dd/mm/yyyy"style="background-color:blue" title="Enter your DOB"/>


E-mail:
<input type="text" value="abc@example.com"style="background-color:blue" title="Enter your E-mail"/>


Upload your Profile Pic:<input type="file" name="pic" accept="image/*" title="Profile Pic">
  <input type="submit">


Select your favorite color: <input type="color" name="favcolor">

  <input type="submit" value="Submit your color" title="Your color chosen">


  <input type="submit" value="You are done" title="click here"/>
  
  
</form>

Points of Interest

Now we are done. But one more thing we need to render the CSS stylesheets and JS scripts if used right!!

<link rel="stylesheet" type="text/css" href="form.css">
and yes in the head section. Its a better practice to keep your CSS at the top and the JS scripts at the bottom of Html page.

History

I have written 1 article previously. This is my first into the competetion. Not too complicated, easy for beginners to learn, short and handy.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Suraj Sahoo Mindfiresolutions
Software Developer (Junior) Mindfire Solutions
India India

I am the son of Mr. Debendra Nath Sahoo & Dr. Sanjulata Sahoo, felt worth mentioning them as they are the reason I am being able to key these words to the world.

I am currently a Software Developer at Mindfire Solutions,India.Working currently on ASP.NET MVC4 Web Applications.



I am passionate and enthusiastic to learn more about softwares and coding.Code Project is the best platform to feed me what i want.



I would love to know queries and questions from all of you specially beginners like me so that we could share some Code stuffs and make new recipes.Drop into suraj.0241@gmail.com.

I am Microsoft MVC4(70-486) certified.

Follow on   Twitter   Google+

Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalSibeesh KV22-Sep-14 5:09 
GeneralRe: My vote of 5 PingroupSuraj Sahoo Mindfiresolutions22-Sep-14 6:38 
GeneralRe: My vote of 5 PinprofessionalSibeesh KV22-Sep-14 6:45 
GeneralVery nice.... PinprofessionalRahul VB23-Apr-14 8:59 
GeneralRe: Very nice.... PingroupSuraj Sahoo Mindfiresolutions23-Apr-14 18:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 21 Apr 2014
Article Copyright 2014 by Suraj Sahoo Mindfiresolutions
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid