HTML5 Form Tags: You can present information and data on the web page for users with the help of HTML 5. In addition to providing static information on your page, you can also collect data from users. There is a number of HTML form elements and tags which give you the freedom to collect valuable information from the visitors coming to your site.
Types of Forms in HTML5
Before we experiment with the markup for the forms, we will briefly discuss the types of forms in HTML 5. Irrespective of their shape, size, or use, all HTML 5 forms fall into two main categories which are as follows.
HTML5 Search Forms
As the name suggests, a search form helps your visitor obtain the required information from your website. You can search almost anything you like on the internet, depending on the genre of the website and type of search form they are using. There are search methods that require only a keyword, as well as search forms that are more sophisticated. The main form on the home page of the IRS is considered a search form.
Data-Collection Forms in HTML5
As compared to search forms, data-collection forms help you gather the necessary data and information from your visitors. Your form will be simple or complex depending on the amount and type of information you are collecting. For instance, if you need just a little bit of information the form can be fairly simple. Most forms that require your email address or name are data collection forms.
Creating Forms
You can use HTML forms to receive information from users and vice versa. However, forms also offer various other methods to present information to users, such as:
- Check boxes, which allow you to choose multiple options from a group of choices. Data selection tools, such as radio buttons, which enable you to choose one option from a list.
- Text Input Fields, which can help you create tables extending to a single line, double lines, or even multiple lines.
Structure of a Table
The main element for creating tables is <form>, which also acts as a content and input container much like paragraph <p>. The <form> element creates a logical document section in HTML 5, further incorporating sub-elements. It contains all the elements and tags associated with a single form which are also processed by the same form handler.
Input Tags and Fields
The bulk of any form is composed of input tags, which you use to obtain information or input from your visitors. The major input element when it comes to getting information from users through HTML 5 forms is <input>. Within the input element, you define the kind of input or information you want to receive.
Similarly, you can use different types of input fields or types in your forms including, but not limited to, radio, text, password, search, hidden, checkbox, submit, and email.
The following example contains the markup for a simple form.
Simple HTML5 Form Example
<!DOCTYPE HTML> <html> <head> <meta charset= "utf-8"> <title>Creating Forms</title> </head> <body> <h1>How to Create Forms in HTML 5</hl1> <form action="bin/guestbook.php"> <input type="text"/> </form> </body> </html>
Simple Form Example Output
The above mentioned is the simplest of the form you can create in HTML 5. Note that the <form> element contains a section attribute. A section attribute is an integral part of the table which informs the browser about the destination URL of the table.
We can do many more things to make tables more attractive or functional. For instance, we can add value attributes to the table, as the following example demonstrates.
Search Box Example
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Creating Forms</title> </head> <body> <h1>How to Create Forms in HTML 5</h1> <form action="bin/guestbook.php"> <input type="text" value="Search"/> </form> </body> </html>
Search Box Example Output
Now, you are practically telling your visitors to use this form to search for their required information. As a matter of fact, you can use any value inside the form, such as for example, type here, or email. What if you want users to put a larger piece of content in your form? You can do so by creating a Comment section by using a <textarea> tag.
Comment Box Example
<!DOCTYPE HTML> <html> <head> <meta charset= "utf-8"> <title>Creating Forms</title> </head> <body> <h1>How to Create Forms in HTML 5</h1> <form action="bin/guestbook.php"> <input type="text" value="Search"/> <br><br> <textarea> Write your comment here</textarea> </form> </body> </html>
Comment Box Example Output
The <textarea> tag is different from <input> in the sense that it is not self-closing. You have to put an opening tag and closing tag, and write your HTML within those tags.
The Dropdown Box
Dropdown boxes, menus, or lists are one of the most common types of tables featured on web sites these days and, therefore, require special mention here. In order to create a dropdown box, you have to use an <select> opening and closing tag within the form <form> element. Within the select element, you list all the options with the help of an option <option> tag.
The Dropdown Box Example
<!DOCTYPE HTML> <html> <head> <meta charset = "utf-8"> <title>Creating Forms</title> </head> <body> <h1>How to Create Forms in HTML 5</h1> <form action="bin/guestbook.php"> <select> <option> Select an option...</option> <option>Option 1</option> <option>Option 2</option> <option> Option 3 </option> </selec </form> </body> </html>
The Dropdown Box Example Output
A dropdown menu is ready for you with an instruction at the top and three options to choose from. Remember that this is one of many types of dropdown menu you can create in HTML 5.
Checkboxes
Checkboxes are perfect when you want your users to choose more than one option from a group of choices. You will use the <input> tag to create a checkbox, but the input type will be a checkbox.
Checkboxes Example
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Creating Forms</title> </head> <body> <h1>How to Create Forms in HTML 5</h1> <form action="bin/guestbook.php"> <input type="checkbox" /> Apple <input type="checkbox" /> Banana <input type="checkbox" /> Orange <input type="checkbox" /> Pineapple </form> </body> </html>
Checkboxes Example Output
What if you want to select only one option from the choices available? In that case, you are going to use a radio input type with any relevant attribute value.
Radio Buttons Example
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Creating Forms</title> </head> <body> <h1>How to Create Forms in HTML 5</h1> <form action="bin/guestbook.php"> <input type="radio" name="colour" /> Apple <input type="radio" name="colour" /> Banana <input type="radio" name= "colour" /> Orange <input type="radio" name="colour" /> Pineapple </form> </body> </html>
Radio Buttons Example Output
This is only the beginning of what you can use tables for in HTML 5. However, you need not worry because this is only a general overview of tables in HTML 5.
Exercise
Task:
Create a simple form with the value “Search this Website and a simple comment section. Also, create a checkbox containing four choices, but only allow one of those choices to be selected.
Solution:
<!DOCTYPE HTML> <html> <head> <meta charset = "utf-8"> <title>Exercise</title> </head> <body> <h1>Exercise 5</h1> <form> <input type="text" value="Search this Website"/> <br><br> <textarea>Give Your Feedback</textarea> </form> <form> <input type="radio" name="colour" />BMW <input type="radio" name= "colour" />Ford <input type="radio" name= "colour" />Jaguar <input type="radio" name="colour" />Volkswagen </form> </body> </html>