HTML 5 Forms
Creating and using forms on web pages
Working with form data
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 are a plethora 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 HTML:
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.
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-Collecting Forms:
As compared to search forms, data-collecting 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 by 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 single line, double lines, or even multiple lines.
Structure of a Table:
The main element for creating tables is < form >, which also acts 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.
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”/ >
</ form >
</ body >
</ html >
EXAMPLE 2
<! 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 >
EXAMPLE 3
<! 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 >
The Dropdown Box:
Dropdown boxes, menus, or lists are one of the most common types of tables featured on websites these days and, therefore, it requires special mention here. In order to create a dropdown box, you have to use a < 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.
<! 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 >
</ select >
</ form >
</ body >
</ html >
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 checkbox.
No comments