How to create form in HTML5

What do you mean by html form?

Html form is nothing but it is a type of form which is generated through html. Forms can be generated from many programming language, we cannot say all the forms on web are generated by html. It can be also generated by php and from some other programming languages.

What is html form?

Html form is a type of register which stock up valuable data given by the user on a web server by bilateral controls. An Html form can hold so many types of data such as Name, e-mail, username, password, contact number etc.

The html form also contains some specific types of elements which are called controls, some creators generally finishes the form by modifying the controls.

The Controls works only inside the <form> element, Attributes are also present inside the form’s element and as well as in the <form>.

<Form> tag is used to form html tables, here’s an example of simple food ordering form created by <form> tag.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>Simple HTML Form</title>

</head>

<body>

    <form>

        <label>What Food: <input type=”text” name=”username”></label>

        <label>Where to Deliver: <input type=”password” name=”userpass”></label>

        <input type=”submit” value=”order”>

    </form>

</body>

</html>

-The output of the above example will appear similar to this:

Html Form Image

Fundamental understanding of Forms

The forms which we see on the websites over the internet usually it looks like information collector register. But the interesting fact do you know how it works and why in all the forms submit button are present? Let us see………

When the user input their valuable data into the register I mean form and click on submit button then all the data disappears in a second. It happens because of the code, the codes which are running at the backend it’s not visible to us so the coders, code the program in the way in which when we click on submit button the data which disappears there comes in the server of coders.

The submit buttons plays an very important role in html form and If the submit buttons will be not present then user cannot be able to submit their valuable data and if the valuable data will not be submitted then there will be no use of html form and the creator will have huge loss.

What is Form Controls?

Form controls are nothing but it is used to talk about the elements which are used to create form. Some elements which are used to create form contain some attributes.  The input element plays a vital role for creating html form.

Input element

As we talked above that the input element plays a vital role for creating html form and so on this input element is most commonly and widely used for creating html form. Different types of fields lies on it.

Input element permits you to indicate a variety of user input fields considering on the type attribute. For example – file upload box, date field, reset button, and submit button, checkbox button, radio button, text field, and password field. As well as a number of fresh input types launched in HTML5.

The majority often used input types are explained beneath.

I) Button

Buttons which has no default behavior and the text appear in it is displayed by the value attribute. For displaying more action on the button various types of attributes are used. For example – value for displaying text, events for click and common attributes like type.

Here’s an example of simple button of html form.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>Simple HTML Form</title>

</head>

<body>

<form>

    <label for=”username”>Button:</label>

    <input  type=”button” name=”button” id=”button” value=”Btn”>

</form>

</body>

</html>

-The output of the above example will appear similar to this:

Button Image

II) Text Field

Text field are single row area in which we use to input text. Single – row text input area are made using <input> element, the value of text is contained inside the type element.

Here’s an example of a single-row text input used to obtain username from user:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>HTML Text Input Field</title>

</head>

<body>

    <form>

        <label for=”user-name”>Your Name :</label>

        <input type=”text” name=”username” id=”user-name”>

    </form>

</body>

</html>

-The output of the above example will appear similar to this:

Username field

III) Radio Buttons

To keep radio buttons in a form is good thought because if you have provided a lot of option in front of user then there is chance of getting confused. So that’s why radio buttons are very helpful to user in selecting exact option from lots of option. It is also made by <input> element and contains the value of radio inside the type attribute.

Here’s an example of food choice collector which is created using radio button to collect the food choice of user.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>HTML Radio Buttons</title>

</head>

<body>

    <form>

        <input type=”radio” name=”gender” value=”chicken” id=”chicken”>

        <label for=”male”>Chicken</label>

        <input type=”radio” name=”gender” value=”Fish” id=”Fish”>

        <label for=”female”>Fish</label>

    </form>

</body>

</html>

-The output of the above example will appear similar to this:

Radio Button example

IV) Password Field

Some people says that text field and password field are same but no there is some difference, you can say that password field looks related to text field. The merely dissimilarity is the input that is given by user in password field becomes hidden means they are shown as point.

The point helps in hiding the password from other means it doesn’t shows on the screen while it shows in the form of points. It is also a single-row area input controls which is also created by input element and contains password value inside the type attribute.

Here is an example of a single-row password input which is used to take password from the user:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>HTML Password Input Field</title>

</head>

<body>

    <form>

        <label for=”user-pwd”>Password:</label>

        <input type=”password” name=”user-password” id=”user-pwd”>

    </form>

</body>

</html>

-The output of the above example will appear similar to this:

Password Field Example or sample

V) Checkboxes

Checkboxes and radio button are similar the only difference is that, In radio button only one option can be chosen by the user from a set of given option but in the checkboxes field user can select more than one option from a set of given options, It is also formed by input element and it contain the value of checkbox inside the type attribute.

Here is an example of favorite programming language collector which is created using checkboxes to collect the choice from the user:

  <!DOCTYPE html>

<html lang=”en”>

<head>

    <title>HTML Checkboxes</title>

</head>

<body>

  <h1>Choose your any two favourite programming language</h1>

    <form>

        <input type=”checkbox” name=”Pro Lan” value=”Java” id=”Java”>

        <label for=”Java”>Java</label>

        <input type=”checkbox” name=”Pro Lan” value=”Python” id=”Python”>

        <label for=”Python”>Python</label>

        <input type=”checkbox” name=”Pro Lan” value=”C++” id=”C++”>

        <label for=”C++”>C++</label>

        <input type=”checkbox” name=”Pro Lan” value=”Ruby” id=”Ruby”>

        <label for=”Ruby”>Ruby</label>

        <input type=”checkbox” name=”Pro Lan” value=”Javascript”  id=”Javascript”>

        <label for=”Javascript”>C++</label>

    </form>

</body>

</html>

-The output of the above example will appear similar to this:

Html5 checkbox example

VI) File Select box

Keeping a File select box field in your form is the best way to take any document that is needed. It permits you to look through for a file which is in your desktop and attach it with the form data and then send it.  

Google Chrome and Firefox This type of browser has a file selection input field with a browse button that allows the user to find the way to the local hard drive and select a file.

File select box is also created using <input> element which contains the value of file inside the type attribute.

—Here is an example of file select box for collect file:-

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>HTML File Select box</title>

</head>

<body>

    <form>

        <label for=”file-select”>Upload:</label>

        <input type=”file” name=”upload” id=”file-select”>

    </form>

</body>

</html>

-The output of the above example will appear similar to this:

Html5 File select box sample

VII) Text Area

Text area are used for collecting brief information about the things which the form relates to, and it is multi-line text input control in this you can input more than one line of text. Text Area are created using <textarea> element.

It contains two important attributes which are rows and cols, the rows attribute helps to increase and decrease rows and the cols helps also helps to increase and decrease columns of the area which are made using both attributes.

—Here is an example of textarea for collecting brief information:-

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>HTML Textarea</title>

</head>

<body>

         <form>

        <label for=”address”>Address:</label>

        <textarea rows=”5″ cols=”40″ name=”address” id=”address”></textarea>

    </form>

</body>

</html>

-The output of the above example will appear similar to this:

HTML5 Textarea sample

VIII) Select Boxes

It creates a dropdown list of so many options which allows you to select one or more option from a pull-down set of options. <Select> element and <option> element are used to create select box field. There is an option element inside the select element, and the whole list item is placed inside it.

— Here is an example of food item collector which is created using select boxes:-

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>HTML Select Box</title>

</head>

<body>

    <form>

        <label for=”city”>Food:</label>

        <select name=”city” id=”city”>

            <option value=”Chicken”>Chicken</option>

            <option value=”Fish”>Fish</option>

            <option value=”Egg”>Egg</option>

        </select>

    </form>

</body>

</html>

-The output of the above example will appear similar to this:

HTML5 Select boxes Sample

IX) Submit and Reset Button

Through the submit button, we have the authority to send our data which was filled by us in the form and once the submit button will be clicked the data will go to the handler of that form and it take the form data to the file designated in the action attribute of the form to analysis the submitted data.

It has mainly two attribute type attribute and value attribute but both contains the value of submit.

A reset button reset all the data which was inputted by us in the form. It also has mainly two attribute only type attribute and value attribute but both contains the value of reset.

Type your favorite food and drink name in the text field and see the form in action after clicking submit and rest button.

 Here is example of Submit and rest button:-

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>HTML Select Box</title>

</head>

<body>

    <form>

        <label for=”city”>Food:</label>

        <select name=”city” id=”city”>

            <option value=”Chicken”>Chicken</option>

            <option value=”Fish”>Fish</option>

            <option value=”Egg”>Egg</option>

        </select>

    </form>

</body>

</html>

-The output of the above example will appear similar to this:

HTML5 Submit and Rest button Sample

X) Hidden Form Control

Hidden form controls are used to hide data of the page but it can be later commanded for showing the data on the page. This control hides the data on the page but actually codes are written for it.

Means the user who will visit your page cannot see the hidden data but who had made the page can see the data. The data can be hid by writing hidden value inside the type element.

Here is an example of hidden for control:-

<!DOCTYPE html>

<html>

 <head>

      <title>Hidden form control</title>

   </head>

 <body>

      <form>

         <input type = “hidden” name = “pagename” value = “10” />

         <input type = “submit” name = “submit” value = “Submit” />

         <input type = “reset” name = “reset”  value = “Reset” />

      </form>

   </body>

</html>

-The output of the above example will appear similar to this:

Hidden Form control in HTML5

Mixing form controls (Example of general form)

There is one best way to mix form controls and labels of the forms by using legend element. Mixing the form controls and labels of the form into categories these helps to detect any form control which makes easy for the user and from this the form becomes more user friendly.

Here is example of General Form:-

<!DOCTYPE html>

<html lang=”en”>

<head>

    <title>Grouping Form Controls in HTML</title>

</head>

<body>

    <form>

        <fieldset>

            <legend>Name</legend>           

            <label>Firstname: <input type=”text” name=”firstname”></label>           

            <label>Lastname: <input type=”text” name=”lastname”></label>

        </fieldset>

        <fieldset>

            <legend>Citizen of</legend>           

            <label><input type=”radio” name=”gender” value=”India”> India</label>           

            <label><input type=”radio” name=”gender” value=”U.S.A”> U.S.A</label>

        </fieldset>

        <fieldset>

            <legend>Fav programming Language</legend>           

            <label><input type=”checkbox” name=”hobbies” value=”Python”> Python</label>

            <label><input type=”checkbox” name=”hobbies” value=”Java”> Java</label>

            <label><input type=”checkbox” name=”hobbies” value=”C++”> C++</label>

        </fieldset>

        <fieldset>

            <legend>Contact Details</legend>

            <label>Email Address: <input type=”email” name=”email”></label>

            <label>Phone Number: <input type=”text” name=”phone”></label>

        </fieldset>

    </form>

</body>

</html>

-The output of the above example will appear similar to this:

Sample of General form in HTML5

Leave a Reply