HTML5 Form
Basics of HTML 5 - Part 14
Foreword: In this part of the series, I explain how to code an HTML form.
By: Chrysanthus Date Published: 3 Apr 2015
Introduction
The Reset Button
As the user is filling the HTML form, he can make a mistake. The purpose of the Reset button is to clear all the controls so that the user can start all over again. When the user clicks the Reset button, all the values of the controls are replaced by their initial values. In the case where there was no initial value, the control becomes blank. In the simplest form, the tags for your Reset Button are:
<button type="reset">Clear</button>
The name of the tag is, button, in lower case. The end tag has to be there. There is a type attribute whose value most be “reset”. The content of the button above is “Clear”. This is what appears on the button at the browser. That is the only thing you can change in your own reset button. Use a word that will indicate to the user that he can erase (and reset) all what he has typed. The start tag can have a value attribute with a value, but that will not normally serve any purpose.
The Submit Button
After you have filled you Form and you are satisfied, you click the Submit button to send the data set (all form information) to the server. The function of the Submit button is to send the data set to the server. In the simplest form, the tags for your Submit Button are:
<button type="submit">Send</button>
The name of the tag is, button, in lower case. The end tag has to be there. There is a type attribute whose value most be “submit”. The content of the button above is “Send”. This is what appears on the button at the browser. That is the only thing you can change in your own submit button. Use a word that will indicate to the user that clicking it will send the data set to the server. The start tag can have a value attribute with a value, but that will not normally serve any purpose.
A form should have a Reset and a Submit button.
The Push Button
The push button is the third type of button. It is normally used with programming at the web page. I will address push buttons in some other series.
The Form Element
Let us look at the basics of the code of the Form element first. This is an example:
<form action="http://www.somewebsite/dir/file.exe" method="post">
</form>
In this example, there is only the Form start tag and the Form end tag; there is no content in this Form. We shall look at what goes inside the Form element, below. There are two attributes in the start tag. The first one is called the action attribute. Its value is the URL of the program (file) at the server that will process the data set (complete form information) sent by the browser from the client computer.
The second attribute in the start tag of the form element is called the method attribute. Its value is either the string, “post” or the string, “get”. With the “get” value you would see the data set text in the address bar of your browser when the form is sent. However, with the “post” value you never see the data set text at the address bar. The “post” value offers better security to your data. The “get” value also has the disadvantage that the amount of data that can be sent is limited. The tag and attribute names of the form element should be in lower case. The order in which you type the attribute/value pairs in the form tag or any HTML tag does not matter. So method and its value can come before action and its value in the above start tag.
Use of Paragraphs
The controls we have learned can be classified in two classes: input controls and the button controls. We saw in one of the previous parts of the series that an input control is coded into a label element. HTML5 expects us to place labels (and their controls) and buttons, in paragraphs. In that way, the use of the line break element (<br>) is avoided.
Many of the examples in the previous parts of the series have used the line break (<br>) elements to simulate paragraphs. That was done for the sake of simplicity and pedagogy. From now onward, we shall avoid the use of the line break element.
The example I give you here is a modified form copied from the HTML5 specification draft. It is a form for a customer to use to place an order for pizza. This is the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Quick Illustration</title>
</head>
<body>
<h3>Order Form</h3>
<form method="post" action="https://pizza.example.com/order.cgi">
<p><label>Customer name: <input name="custname"></label></p>
<p><label>Telephone: <input type="tel" name="custtel"></label></p>
<p><label>E-mail address: <input type="email" name="custemail"></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type="radio" name="size" value="small"> Small </label></p>
<p><label> <input type="radio" name="size" value="medium"> Medium </label></p>
<p><label> <input type="radio" name="size" value="large"> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type="checkbox" name="topping" value="bacon"> Bacon </label></p>
<p><label> <input type="checkbox" name="topping" value="cheese"> Extra Cheese </label></p>
<p><label> <input type="checkbox" name="topping" value="onion"> Onion </label></p>
<p><label> <input type="checkbox" name="topping" value="mushroom"> Mushroom </label></p>
</fieldset>
<p><label>Preferred Delivery Date and Time: <input type="datetime-local" name="delivery"></label></p>
<p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
<p><button>Submit Order</button><p>
</form>
</body>
</html>
The fieldset and legend Element
The fieldset element is a double tag element. Its purpose is to draw a rectangle around the controls that form its content. The label for the rectangle is given by the double tag legend element inside the fieldset element. Read and try the above code.
Professional Look and Feel
The above form code is functional (will serve its purpose) but it does not have a professional look and feel. In other words, the above code functions correctly but it does not look presentable at the browser. The rest of this tutorial explains how to make a form have a professional look and feel.
Form Coding
You can come up with a form that works, but does not look good to the eyes. The form above is a slightly modified copy of an example form in the HTML 5 specification draft. The user uses the form to place an order for pizza. In the first portion of the form, the user types in his personal information into input text fields. In the next section he chooses the size of the pizza from a set of radio buttons, enclosed in a fieldset element (rectangle). In the next portion he chooses one or more toppings from a set of checkboxes enclosed in a fieldset element. After that, there is an input field into which he types in the date and time that he wants the pizza. After that there is a textarea element into which he types special instructions, if necessary.
Here we look at the requirements for a form to have a professional look and feel. I will not address the use of colors in this tutorial. The phrase “Professional Look and Feel” is a colloquial phrase used by website designers. Here, it means that a form should look mature and have some minimum beauty. The word, mature, here means that the form should be compact (small) and convenient to use. Here, the word, convenient, means the elements of the form should be distinct and well positioned.
The above form is working; that is fine, that is the first requirement for any code. However, with the competition among website designers out there, your form has to look good to serve as testimony for your potential customers.
Problems with the above Form
There is no coding problem with the above form. The problems with the form are to do with the maturity and beauty of the form. The form is too long vertically and the fieldset elements make the form too wide. The label text for the textarea element is too low. It should be higher up.
The controls are distinct and well positioned (well grouped). So all we have to do is to make the form compact.
Solution to above Problems
There are two ways the above problem can be solved. One way is to adjust the present coding. The other way is to use the table element for positioning of the Form elements. I show you the two ways below:
Improving the Form by Adjusting the Code
Above, each of the radio elements is in a paragraph. This adds unnecessary height to the entire form. We shall place all the radio elements in one paragraph as follows:
<p><label><input type="radio" name="size" value="small"> Small </label> <label><input type="radio" name="size" value="medium"> Medium </label> <label><input type="radio" name="size" value="large"> Large </label></p>
Note that for each label text, there is a space (one character) in front and after it. These spaces are displayed at the browser. Also note that between the label elements, you have the “ ” space entities to separate the label elements. Each label element here has its control as part of its content. These adjustments go to reduce the height.
The way the checkboxes are (in the above form code), adds unnecessary height to the entire form. The solution is similar to that of the radio buttons. The new coding for the checkboxes is as follows:
<p><label><input type="checkbox" name="topping" value="bacon"> Bacon </label> <label><input type="checkbox" name="topping" value="cheese"> Extra Cheese </label> <label><input type="checkbox" name="topping" value="onion"> Onion </label> <label><input type="checkbox" name="topping" value="mushroom"> Mushroom </label></p>
The text label, “Preferred Delivery Date and Time” is too long; here I am subjective. So I changed the code as follows:
<p><label> Delivery Date and Time: <input type="datetime-local" name="delivery"><small> Preferred</small></label></p>
The word, “Preferred” has been removed from the long phrase and typed after the control in small text level. When you try the form code below, you will appreciate this.
The label text for the textarea element is too low (in the above code). The label text is raised up using CSS as follows:
<p><label style="vertical-align:top">Delivery instructions: </label><textarea name="comments"></textarea></p>
We shall learn CSS proper under CSS3 Tutorials.
In many browsers (if not all browsers) the fieldset element goes from the left end of its containing element to the right end. This causes the entire form to be too wide. To solve this problem, the width of the entire form is reduced as follows using CSS (style):
<form method="post" action="https://pizza.example.com/order.cgi" style="width:50%">
</form>
We shall really learn how to give the width of an HTML element when studying CSS3.
The h3 heading for the form will be typed inside the form, just below the start tag for the form. That is the HTML5 philosophy. So, here is the complete adjusted code, which you should read and try:
<!DOCTYPE HTML>
<html>
<head>
<title>Form Design</title>
</head>
<body>
<form method="post" action="https://pizza.example.com/order.cgi" style="width:50%">
<h3>Order Form</h3>
<p><label>Customer name: <input name="custname"></label></p>
<p><label>Telephone: <input type="tel" name="custtel"></label></p>
<p><label>E-mail address: <input type="email" name="custemail"></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label><input type="radio" name="size" value="small"> Small </label> <label><input type="radio" name="size" value="medium"> Medium </label> <label><input type="radio" name="size" value="large"> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label><input type="checkbox" name="topping" value="bacon"> Bacon </label> <label><input type="checkbox" name="topping" value="cheese"> Extra Cheese </label> <label><input type="checkbox" name="topping" value="onion"> Onion </label> <label><input type="checkbox" name="topping" value="mushroom"> Mushroom </label></p>
</fieldset>
<p><label>Delivery Date and Time: <input type="datetime-local" name="delivery"><small> Preferred</small></label></p>
<p><label style="vertical-align:top">Delivery instructions: <textarea name="comments"></textarea></label></p>
<p><button>Submit Order</button><p>
</form>
</body>
</html>
The above form is alright after the changes. However, the looks can still be improved. Note for the display at the browser that the input text controls are not aligned vertically. We shall use the table element to align the first three controls vertically. The table element shall also be used to align the input datetime control and the textarea control vertically.
All these will be done by having a table with two columns. The input text controls will be in the second column and the label elements will be in the first column. So, a label element’s tags, will be separated from its control tags using the for attribute of the label element; in this case, each of the control elements will have an ID. There will be one cell for the radio buttons using td colspan attribute in one row; that same thing will be done for the check boxes. In these two cells, there is no need to separate label elements from their controls. That should do for the changes. However, I will now add my own personal touch.
I am subjective here: the form element will still be given a width value. The h3 text will be at the center of its line. The row of the submit button will have one cell, with the colspan attribute and the submit button will be at the center of its line (row); I also add a Clear (reset) Button. The fieldset elements will be removed and each of the button group, they enclosed will be preceded by the h4 heading. With the table, the paragraph elements are not really necessary. However, the paragraph elements will be used to create line breaks above and below groups of buttons.
And here is the ultimate code I recommend for the form:
<!DOCTYPE HTML>
<html>
<head>
<title>Form Design</title>
</head>
<body>
<form method="post" action="https://pizza.example.com/order.cgi" style="width:40%">
<h3 style="text-align:center">Order Form</h3>
<table>
<tbody>
<tr><td><label for="T1">Customer name: </label></td><td><input name="custname" id="T1"></td></tr>
<tr><td><label for="TEL1">Telephone: </label></td><td><input type="tel" name="custtel" id="TEL1"></td></tr>
<tr><td><label for="E1">E-mail address: </label></td><td><input type="email" name="custemail" id="E1"></td></tr>
<tr><td colspan="2">
<h4>Pizza Size</h4>
<label><input type="radio" name="size" value="small"> Small </label> <label><input type="radio" name="size" value="medium"> Medium </label> <label><input type="radio" name="size" value="large"> Large </label></td></tr>
<tr><td colspan="2">
<h4>Pizza Toppings</h4>
<label><p><input type="checkbox" name="topping" value="bacon"> Bacon </label> <label><input type="checkbox" name="topping" value="cheese"> Extra Cheese </label> <label><input type="checkbox" name="topping" value="onion"> Onion </label> <label><input type="checkbox" name="topping" value="mushroom"> Mushroom </label></p></td></tr>
<tr><td><label for="DT1">Delivery Date and Time: </label></td><td><input type="datetime-local" name="delivery" id="DT1"><small> Preferred</small></td></tr>
<tr><td><label for "TA1">Delivery instructions: </label></td><td><textarea name="comments"></textarea></td></tr>
<tr><td colspan="2" style="text-align:center"><p><button type="reset">Clear</button> <button type="submit">Submit Order</button></p></td></tr>
</tbody>
</table>
</form>
</body>
</html>
This code is displayed nicely in Mozilla Firefox. After designing something like this, you test it with the major browsers and make any adjustments necessary, so that the form appears the same (or almost the same) in all browsers. Adding a bit of color to the last code will make it modern; however, I will not go into that in this series.
What is Field Validation?
A user may type an email address into an email input control field. Validation here means checking whether the user has type the email address according to the rules governing an email address. For example, if the user forgot to type the @ sign, it means the email address is not valid. If the email address were, john@yahoo.com and the user typed, mary@yahoo.com, the validation process will not be able to detect the deference, since all rules have been respected. The validation process must be able to check if the rules for typing email address were respected, for example checking if the @ and the dot are present. So validation is checking the syntax of the value typed.
Validation means checking if what has been typed is valid and then issuing an error message if there was a mistake. In many cases if an error occurred, the validation process would prevent the form from being submitted.
Automatic Validation in HTML 5
The email, URL, number (see later), and datetime (see later) fields are supposed to be automatically validated by the browser.
The required Attribute
The required attribute is a Boolean attribute. Its presence means the field cannot be empty. Its absence means the field can be empty. The form will not be submitted, unless all the fields that have the required attributes are not empty.
An example of the use of the required attribute is in:
<textarea name="message" cols="30" rows="3" required></textarea>
Time to take a break. We stop here and continue in the next part.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
Text Elements in HTML
Grouping Content
Microsyntax Dates and Times in HTML
Sectioning Content
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
BACK NEXT