HTML 5 Presentable Form
Mastering HTML5 - Part 16
Forward: In this part of the series, we see how to make a form presentable, compared to what we saw in the tutorial, HTML 5 Form Coding, of the series, HTML5 Basics.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Form Coding
You can come up with a form that works, but does not look good to the eyes. The form we saw in the tutorial mentioned 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 (rectangle). 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 is the code, which we had in the tutorial, HTML 5 Form Coding. Read and try 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>
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:
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.
<!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.
<!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.
Time to take a break. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT