HTML 5 Form Coding

HTML5 Basics - Part 25

Forward: In this part of the series, we look at HTML 5 Form.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 25 of my series HTML5 Basics. I assume you have read the other parts of the series before arriving here. The links to the other parts of the series are given at the end of this tutorial. In this part of the series, we look at HTML 5 Form Coding. We shall also learn two new elements.

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.

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.

Form Example
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 is functional but it is does not look presentable at the browser. In the next series I will show you how to make it have a professional look and feel.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

HTML 5 Form Coding

HTML5 Basics - Part 25

Introduction

Related Links

Comments