For participants in the Introduction to HTML course welcome back! Here’s a more detailed article on building HTML5 forms (Chapter 7, Forms, in your course manual, pp. 66 – 81).

If you haven’t done the Introduction to HTML course and just want to follow along, no worries!

In this tutorial we’ll build a form for a fictitious swimming pool maintenance company, Polished Pools. Our form will be built according to modern web standards, will utilize some new form elements introduced with HTML5 and it will be responsive.

Firstly, you’ll need the tutorial files.

TUTORIAL FILES

1. Download the tutorial files and folders here (HTML-Form.zip).

2. When the download is complete, unzip the downloaded folder and save to a location of your choice.

3. Check that the main folder, Forms-Tutorial, contains a sub-folder, images.

The images sub-folder should contain 3 image files, asterisk.png, invalid.png and valid.png

INTRO

Forms are used on web pages to interact with and collect information from users. They are used for simple search fields, online shopping, mailing list sign-ups and so on.

HTML forms are created using the <form></form> tag. The <form> tag requires 2 attributes for the form to function correctly:

action
The action attribute specifies the pathway to and name of the script that will process the form data.These scripts are usually server-side scripts (they reside on the server) and may be written using one of a number of server-side scripting languages. One scripting language commonly used with forms is PHP.

In the example below, the form’s action attribute is set to process-data.php – this indicates that data collected by the form will be sent to and processed by this PHP file.

<form action="process-data.php" method="post">

A discussion of server-side scripting, for example PHP, is beyond the scope of this tutorial. However, there are plenty of resources online to kick-start your introduction to PHP. Here’s just a sample:

http://www.w3schools.com/php/php_forms.asp (PHP Form Handling)
http://www.learn-php.org/
https://www.codecademy.com/learn/php

method
The method attribute specifies how the form data should be sent to the server-side script. There are 2 methods for sending data from a form: GET or POST.
post method
<form action="process-data.php" method="post">

When the form’s method attribute is set to post, the browser sends a separate server request containing special headers followed by the form data. Only the server has access to this request so it is a relatively secure method for transferring data.

Additionally, there is no limit on the number of characters that can be sent via the post method so it can handle a lot of data.

get method
<form action="process-data.php" method="get">

With the get method, the form data is appended to the URL sent to the server. A question mark character separates the URL from the data, for example:

http://www.mydomain.com.au?name=Sally%20Smith&email=sally%40gmail.com

Since the form data is visible in the URL, the GET method is not appropriate if the form is handling sensitive data – private or financial data for example.

In addition, since there is a 256 character limit on the data that is appended to the URL, the get method cannot be used for sending large amounts of data.

Aside from the <form> tag itself and its attributes, we’ll also use a variety of other HTML tags to create the various form elements that directly collect user data. More about these later.

OK, let’s make a start.

CREATE A HTML FILE

1. Open your favourite text editor and create the basic structure for a new HTML5 document:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Contact Us</title>

</head>
<body>

</body>
</html>
2. Save your file to the Forms-Tutorial folder as contact-form.html

Keep this file open, we’ll edit it further in a moment.

CREATE AN EXTERNAL CSS FILE

1. In your text editor, create another new document and save it as form-styles.css to the same directory as your contact-form.html file.

LINK THE EXTERNAL CSS FILE TO THE HTML DOCUMENT

1. Back in your contact-form.html file, create a <link> tag between the <head></head> tags. Add href, rel and media attributes to the <link> tag and link your external CSS document to your HTML document.

<head> 
   <meta charset="UTF-8"> 
   <title>Contact Us</title> 
   <link href="css/form-styles.css" rel="stylesheet" media="screen"> 
</head>

 

To allow us to concentrate on the HTML to begin with, we’ll write the actual CSS for our form later. For the moment we’re just setting up the basic files (and links) we’ll use later.

CREATE HEADER

1. Still in your contact-form.html document, create a <header> element between the <body></body> tags. This will contain the page title (a <h1> tag) and a sub-title (a <h4> tag) to explain the meaning of the asterisk image ( * ) which will be used throughout the form we are going to build.

<body> 
   <header> 
      <h1>Contact Us</h1> 
      <p><img src="images/asterisk.png"> Required</p> 
   </header> 
</body>

 

Note:
Don’t confuse the <header> tag with the <head> tag, used to create the head section of a HTML document.

CREATE THE FORM

As we know, HTML forms are created using <form></form> tags (see the INTRO section above). The form tags, in turn, contain the various form elements (textfields, checkboxes etc) that make up the form and allow user input.

1. Within the <body></body> tags, below the <header></header> section you just created, add opening and closing <form></form> tags. Although we won’t be writing a PHP script, give the opening form tag an action attribute and also a method attribute:

<body> 
   <header> 
      <h1>Contact Us</h1> 
      <p><img src="images/asterisk.png"> Required</p> 
   </header> 
   <form action=”process-form.php” method=”post”> 
   </form> 
</body>

 

In order to lay out the various form elements in a logical, readable, user-friendly way, we’ll wrap them in an unordered list tag ( <ul></ul> ). This will also help when we write our styles a little later.

2. Between the form tags, create <ul></ul> tags and a <li></li> tag:

<form action=”process-form.php” method=”post”> 
   <ul> 
      <li> </li> 
   </ul> 
</form>

 

3. Between the opening and closing <li></li> tags, add <label></label> tags and an <input> tag with a type="text" attribute:

<form action=”process-form.php” method=”post”> 
   <ul> 
      <li><label>Name</label><input type="text"></li> 
   </ul> 
</form>

 

The text within the <label></label> tags indicates that the accompanying <input> tag is to be used to enter a name.

HTML5 FORM VALIDATION

Data validation is an integral part of working with forms. Form (data) validation is the process of checking user data to ensure it meets specifications and fulfills its intended purpose. Validation is usually done in two stages, client-side and server-side.

Client-side validation

Client-side validation is usually concerned with checking for missing data (empty form fields) or incorrect data before the form is submitted. For example, it is always worth checking that a user has actually entered an email address into an Email field. Traditionally this been done using JavaScript or jQuery. However, we can now carry out client-side evaluation within the browser using features introduced in HTML5. We’ll look at some of these features in the next section.

Server-side validation

Unfortunately, user input, collected via forms, can expose your site to malicious attacks (for example, email injection). Thus, a worthwhile rule of thumb is to treat all user input as suspicious. Although HTML5 form elements or JavaScript / jQuery scripts can be used to validate, to some degree, user input in the browser (client-side), malicious users can easily sidestep these checks. Therefore, a second stage of validation (or sanitization) on the server is essential.

As you might have guessed, server-side validation is carried out using a server-side scripting language, such as PHP. We won’t discuss PHP (or other server-side languages) here, but, if you are interested you could check the references listed a little earlier in this tutorial (above).

HTML5 INPUT TAGS

The <input> tag is a multipurpose element for representing many form controls:

<input type="text" name="firstname">

Note that the <input> tag does not have an accompanying closing tag and is classified as an empty element.

Simply by changing the value of its type attribute, the <input> tag can be used as a text field, a submit or reset button, checkbox or radio button. For example:

Checkbox:
<input type="checkbox" name="newsletter" value="newsletter-opt-in">

Submit button:
<input type="submit" value="Submit">

Prior to the release of HTML5, <input> tags with a type attribute of text were used to collect various forms of textual data, such as names, email addresses, numbers (including dates and telephone numbers) and URLs etc.

However, HTML5 now offers a series of new type attribute values that address particular textual data types, such as email, number, URL etc., for example:

<input type="email" name="customer_email">

Some of these new type attributes are more useful than others. However, to familiarize ourselves with their use, we’ll use 3 new type attribute values: email, tel and url.

If you’d like to know more about the full range of HTML5 type attributes, HTML5 Doctor provides quite a good introduction in these articles:

HTML5 forms introduction and new attributes
HTML5 forms input types

These new (actually, not so new anymore) HTML5 type attributes provide one aspect of client-side validation in modern browsers.

OTHER HTML5 ATTRIBUTES

Along with the new input tag type attributes, HTML5 also introduced several other new attributes, including these 3 we’ll use in our form:

required
After adding the required attribute to a form field, the browser will require the user to enter data into that field before it will submit the form.
placeholder
Creates placeholder text. This acts as a hint to the user as to what data should be entered in the field.
autofocus
Specifies that a form control should have focus when the page loads. Only one form element in a document can have the autofocus attribute.
pattern
A pattern, written using a regular expression, that the user input must match.

THE NAME ATTRIBUTE

Lastly, note that every <input> tag (and, ultimately, nearly every element within the form) has a unique name attribute.

<input type="text" required name="client_name" placeholder="Joe Bloggs" >

The name attribute uniquely identifies each element in the form and, importantly, is used by the server-side script when it processes the form data after the form is submitted.

All form elements that collect data should have a unique name attribute.

OK, back to our form.

The user’s name is required information. Let’s indicate this by adding the required attribute to our input tag.

4. With your contact-form.html document open in your text editor, extend the <input> tag by adding required as follows:

<form action=”process-form.php” method=”post”> 
   <ul> 
      <li><label>Name</label><input type="text" required ></li> 
   </ul> 
</form>

In HTML5, certain attributes such as required can be minimized, that is, added to a tag without setting a value. In other words, we do not have to specify required="required".

As a further cue to the user, let’s also specify a placeholder.

5. Add a placeholder attribute as follows:

<form action=”process-form.php” method=”post”> 
   <ul> 
      <li><label>Name</label><input type="text" required placeholder="Joe Bloggs"></li> 
   </ul> 
</form>

 

6. The next two text fields (for Address and Suburb) follow the same format as the Name field, so let's add them:
<ul> 
   <li><label>Name</label><input type="text" required placeholder="Joe Bloggs"></li> 
   <li><label>Address</label><input type="text" required placeholder="21 Main St" ></li> 
   <li><label>Suburb</label><input type="text" required placeholder="Coolsville" ></li> 
</ul>

VIEW IN A BROWSER

If you like, you can view your HTML5 document in a browser and see how the required attribute works.

To do this, you’ll have to add a Submit button to the form. Since we will be progressively adding more elements to the form and since the Submit button should be at the end (bottom) of the form, we’ll wrap the button in a separate <ul> tag.

7. Below the code you have already created, add the following code to your form:

<ul> 
   <li><label>Name</label><input type="text" required placeholder="Joe Bloggs"></li> 
   <li><label>Address</label><input type="text" required placeholder="21 Main St" ></li> 
   <li><label>Suburb</label><input type="text" required placeholder="Coolsville" ></li> 
</ul> 
<ul> 
   <li id="btn"><input type="submit" value="SEND" ></li> 
</ul>

 

A Submit button submits form data to the server. The button is usually created in one of two ways:

<input type=”submit” value=”SEND” >

Using an <input> tag with a type attribute set to ‘submit’. Also include a value attribute which creates the label that appears on the button.

<button>SEND</button>

If more control over the structure and design of the input is desired the <button></button> tag may be used. When used within a form, the button tag, by default, will submit form data to the server.

8. Save your HTML5 document and then open it in a browser. Don’t enter any data into the text fields, just click the Submit button. You should see a prompt appear asking you to complete, in turn, the required fields.

Since we haven’t written any CSS for the form yet it probably won’t look the best but you should be able to get an idea of how basic browser validation works.

If you leave your browser open, you can now check your form anytime as you continue to build it by just refreshing the browser window.

The next text field, Postcode will contain two extra attributes, maxlength and pattern.

9. Let’s add the basic HTML for this field. Make sure you add this code above the button code you added earlier:

<ul> 
   <li><label>Name</label><input type="text" required placeholder="Joe Bloggs"></li> 
   <li><label>Address</label><input type="text" required placeholder="21 Main St" ></li> 
   <li><label>Suburb</label><input type="text" required placeholder="Coolsville" ></li> 
   <li><label>Postcode</label><input type="text" required placeholder="1234" ></li> 
</ul> 
<ul> 
   <li id="btn"><input type="submit" value="SEND" ></li> 
</ul>

Note that, when we’ve completed the Postcode field, it will only accept numbers. However, we haven’t used the number type attribute introduced in HTML5. We’ve actually assigned a text type attribute to this field.

This is because we want to also use the pattern attribute within the Postcode field and, according to the W3C specification, the pattern attribute can only be used where the input type is text, search, url, telephone, e-mail or password.

Since Australian postcodes are all 4 characters in length, we can refine the postcode field by restricting the number of characters allowable to 4.

10. Let’s add a maxlength attribute. This specifies the maximum number of characters permitted in the Postcode <input> element:

<ul> 
   <li><label>Name</label><input type="text" required placeholder="Joe Bloggs"></li> 
   <li><label>Address</label><input type="text" required placeholder="21 Main St" ></li> 
   <li><label>Suburb</label><input type="text" required placeholder="Coolsville" ></li> 
   <li><label>Postcode</label><input type="text" required placeholder="1234" maxlength="4" ></li> 
</ul> 
<ul> 
   <li id="btn"><input type="submit" value="SEND" ></li> 
</ul>

Let’s further refine the Postcode field. The maxlength attribute allows any 4 alphanumeric characters. However, since postcodes are numeric we need to restrict the allowable characters to numeric characters only.

In other words, for the Postcode field, we wish to check or search the user input to make sure that the 4 characters entered are numeric characters, specifically, any 4 numbers within the range 0 – 9.

HTML5 PATTERN ATTRIBUTE & REGULAR EXPREESIONS

To do this, we need to use the HTML5 pattern attribute. The pattern attribute allows us to define a regular expression (sometimes called a regex).

A regular expression is a series of characters, written using a special notation, that define a pattern that you wish to search for.

Each character in a regular expression has a special meaning.

For example, to check that a user has only entered numeric characters (digits) into our form’s postcode field, we could use the following regex:

[0-9]{4}

[ ]
Square brackets create a bracket expression. For example, [abc] matches “a”, “b”, or “c”. In our regex above, the bracket expression checks for digits between 0 and 9.
{4}
We require 4 digits in the postcode so this expression, using curly braces, checks for matches with the preceding element [0-9] at least 4 times.

So, using this regex any combination of 4 digits, each between 0 and 9, will match. For example, “3782”, “9610”, “5600” and so on.

We could simplify our regex even more. In regular expression syntax, \d is a shorthand character class representing the digits 0-9. Or, to put it another way, \d is short for [0-9].

If we used this shorthand syntax, our regex would look as follows:

\d{4}

HTML5 Pattern Attribute and Regular Expressions

Regular expression syntax is not the easiest or most intuitive language to learn. Most programming languages offer support for regular expressions and so most tutorials or books discuss how they are used within a particular language.

Nevertheless, if you are interested, here are a couple of sites to kickstart your further exploration of the pattern attribute and regexes:

TutsplusHTML5 Pattern Attribute
WikipediaRegular Expressions
SitePoint

One last point, there are plenty of sites that offer pre-written regular expressions, for example, HTML5 Pattern. If you want to use a regular expression you’ve found online, no worries … just make sure it is well written and that you test it thoroughly to make sure it suits your needs.

Although we could continue to refine our regular expression it’s quite useable as it is so let’s add it to our form.

11. Back in your HTML5 document, within the Postcode field, create a pattern attribute and add the regular expression:

<ul> 
   <li><label>Name</label><input type="text" required placeholder="Joe Bloggs"></li> 
   <li><label>Address</label><input type="text" required placeholder="21 Main St" ></li> 
   <li><label>Suburb</label><input type="text" required placeholder="Coolsville" ></li> 
   <li><label>Postcode</label><input type="text" required placeholder="1234" maxlength="4" pattern="\d{4}" ></li> 
</ul> 
<ul> 
   <li id="btn"><input type="submit" value="SEND" ></li> 
</ul>

12. Once you have saved your HTML5 document, view it in a browser. Complete the Name, Address and Suburb fields and then fill out the Postcode field – but use incorrect data! I entered 12qw.

Click the Send button and check out the validation prompt displayed by the browser. You should see something like that shown in the screen grab below:

Note that the prompt displayed by the browser, Please match the format requested, is very general and doesn’t give any indication to the user as to exactly what the correct format is.

There are a couple of methods available to customize this message and make it more specific:

specify a title attribute
The easiest approach is to append additional information to the default message by specifying a title attribute. If a title attribute is used, the contents of the title will be displayed as part of the browser prompt.
use JavaScript (or jQuery) to completely customize the message
HTML5 provides the constraint validation API to customize, among other things, the text of the error message. This method involves using JavaScript so I won’t cover it here. If you are interested in following this up there is plenty of information online, for example, HTML5 Rocks.

13. Add a title attribute to the Postcode field as shown below:

<ul> 
   <li><label>Name</label><input type="text" required placeholder="Joe Bloggs"></li> 
   <li><label>Address</label><input type="text" required placeholder="21 Main St" ></li> 
   <li><label>Suburb</label><input type="text" required placeholder="Coolsville" ></li> 
   <li><label>Postcode</label><input type="text" required placeholder="1234" maxlength="4" pattern="\d{4}" title="4 numbers only" ></li> 
</ul> 
<ul> 
   <li id="btn"><input type="submit" value="SEND" ></li> 
</ul>

14. Save your contact-form.html document and view it in a browser. You should see a browser prompt similar to that shown in the screen grab below:

15. OK, let’s complete this section of the form by adding fields for email address, telephone number and website (URL).

Although they have limited validation features (particularly tel and url – see below), we’ll use the HTML5 email, tel and url type attributes.

Add 3 more <li></li> tags (including their content) to your existing code as shown below:

<ul> 
   <li><label>Name</label><input type="text" required placeholder="Joe Bloggs"></li> 
   <li><label>Address</label><input type="text" required placeholder="21 Main St" ></li> 
   <li><label>Suburb</label><input type="text" required placeholder="Coolsville" ></li> 
   <li><label>Postcode</label><input type="text" required placeholder="1234" maxlength="4" pattern="\d{4}" title="4 numbers only" ></li> 
   <li><label>Email</label><input type="email" required placeholder="name@someplace.com.au" ></li> 
   <li><label>Phone</label><input type="tel" required placeholder="03 9123 4567" ></li> 
   <li><label>Website</label><input type="url" required placeholder="http://www.awesome.com.au" ></li> 
</ul> 
<ul> 
   <li id="btn"><input type="submit" value="SEND" ></li> 
</ul>

 

email

When the email type attribute is combined with required, the browser will check that user input matches the syntax of an e-mail address.

Note that this validation is fairly simple and will not catch errors, for example, where the user enters ‘harry@gmail’ instead of ‘harry@gmail.com’. Of course, if stricter validation is needed, a pattern attribute with a Regular Expression could be used.

tel

The tel type attribute does not enforce any restrictions on valid values and by default browsers do no validation (except to check that the field is not empty if required is used). This is probably because different countries have different phone number lengths and different ways of writing phone numbers.

However, when the tel type attribute is used, most touch devices will display a numeric keypad.

If you need a specific syntax for the phone number, use the pattern attribute with a Regular Expression.

url

Like the preceding type attributes, the url type attribute does not enforce specific restrictions on valid values and by default browsers don’t validate (again, except to check that the field is not empty if required is used). For example, Safari, Chrome, Opera, Android and Firefox all simply require a single letter plus a colon – a:

If you need a specific syntax for a URL, use the pattern attribute with a Regular Expression.

<fieldset> and <legend> tags

The 7 text fields we’ve just created collect various contact details for the user. To make our form a little more user-friendly, we can group these related form elements together using a <fieldset> tag.

A <fieldset> tag is used to physically indicate a logical group of form elements. It is usually used along with a <legend> tag which provides a caption for the <fieldset>.

16. Create <fieldset> and <legend> tags as shown below:

<form action="process-data.php" method="post"> 
   <fieldset id="details-container"> 
      <legend>CONTACT DETAILS</legend> 
      <ul> 
         <li><label>Name</label><input type="text" required placeholder="Joe Bloggs"></li> 
         <li><label>Address</label><input type="text" required placeholder="21 Main St" ></li> 
         <li><label>Suburb</label><input type="text" required placeholder="Coolsville" ></li> 
         <li><label>Postcode</label><input type="text" required placeholder="1234" maxlength="4" pattern="\d{4}" title="4 numbers only" ></li> 
         <li><label>Email</label><input type="email" required placeholder="name@someplace.com.au" ></li> 
         <li><label>Phone</label><input type="tel" required placeholder="03 9123 4567" ></li> 
         <li><label>Website</label><input type="url" required placeholder="http://www.awesome.com.au" ></li> 
      </ul> 
   </fieldset> <!-- close details-container --> 
   <ul> 
      <li id="btn"><input type="submit" value="SEND" ></li> 
   </ul>

 

Note the use of a HTML comment ( <!–– close details-container ––> ) in the code above.

17. Save your work and check it in a browser (remember, we still have to add styles).

CREATE A SECTION FOR POOL TYPE

Radio buttons

Now we want to get information on exactly what type of pool the user owns. Here, it’s appropriate to use a group of radio buttons. Radio buttons allow the user to select one option from a set.

Radio buttons are created using the ubiquitous input element with the type attribute set to ‘radio’:

<input type="radio" name="pool-type" value="In-ground concrete">

Note:

The name attribute is required as it groups multiple radio inputs into set. When you give a number of radio button inputs the same name value they create a group of mutually exclusive options.

The value attribute is also required. When one particular radio button is selected (or checked) its value will be sent to the server for processing when the form is submitted.

18. Create a group of radio buttons, including a fieldset tag. Place your code directly after the closing </fieldset> tag (for the fieldset you created earlier) as shown below:

</fieldset> <!-- closes details-container --> 

<fieldset id="type-container"> 
   <legend>POOL TYPE</legend> 
   <ul> 
      <li> <input type="radio" name="pool-type" id="rd1" value="in-ground concrete" required > <label for="rd1">IN-GROUND CONCRETE</label> </li> 
      <li> <input type="radio" name="pool-type" id="rd2" value="in-ground fiberglass" required > <label for="rd2">IN-GROUND FIBERGLASS</label> </li> 
      <li> <input type="radio" name="pool-type" id="rd3" value="in-ground other" required > <label for="rd3">IN-GROUND OTHER</label> </li> 
      <li> <input type="radio" name="pool-type" id="rd4" value="above ground" required > <label for="rd4">ABOVE GROUND</label> </li> 
   </ul> 
</fieldset> <!-- closes type-container -->

 

CREATE A SECTION FOR POOL PROBLEMS

Checkboxes

Checkboxes are created using the input tag with its type attribute set to ‘checkbox’. As with radio buttons, you create groups of checkboxes by assigning them the same name value.

<input type="checkbox" name="pool-problems" value="Algae">

However, the difference is that more than one checkbox may be checked at a time. The value of every selected (checked) checkbox is sent to the server when the form is submitted.

19. Create a group of checkboxes, including a fieldset tag. Place your code directly after the closing </fieldset> tag for the pool type fieldset you created earlier, as shown below:

</fieldset> <!-- closes type-container --> 

<fieldset id="problems-container"> 
   <legend>POOL PROBLEMS</legend> 
   <ul> 
      <li> <input type="checkbox" name="pool-problems" id="chk1" value="algae" > <label for="chk1">ALGAE</label> </li> 
      <li> <input type="checkbox" name="pool-problems" id="chk2" value="cloudy water" > <label for="chk2">WATER REPLACEMENT</label> </li> 
      <li> <input type="checkbox" name="pool-problems" id="chk3" value="acidic water" > <label for="chk3">ACIDIC WATER</label> </li> 
      <li> <input type="checkbox" name="pool-problems" id="chk4" value="filtration" > <label for="chk4">FILTRATION</label> </li> 
   </ul> 
</fieldset> <!-- closes problems-container -->

 

20. If you save and check your work in a browser, it should look something like that shown in the screen grab below:

ALLOW THE USER TO ADD A MESSAGE

Next, let’s add <textarea></textarea> tags to allow the user to enter a longer message into the form (as opposed to single-line text fields). A textarea is a multi-line text field, allowing input from a user.

The <textarea> tag has a number of attributes that can be applied to it. More information can be found at:

W3Schools
Mozilla Developer Network

21. Add the following code directly after the closing </fieldset> tag for the pool problems fieldset you created earlier:

</fieldset> <!-- closes problems-container --> 

<fieldset id="message-container"> 
   <legend>ADDITIONAL INFORMATION</legend> 
   <textarea name="message" required></textarea> 
</fieldset> <!-- closes message-container -->

 

We’ll style the textarea with CSS a little later. In the meantime, it should look something like that shown in the screen grab below:

ADD A DROP-DOWN MENU

Finally, let’s add a drop-down menu using a <select> tag. When clicked, the <select> tag presents a menu of options. The options within the menu are represented by <option> tags.

Each option has a value attribute. The content of this attribute is the value submitted by the form if that particular option is selected.

22. Add the following code directly after the closing </fieldset> tag for the message-container fieldset you created earlier:

</fieldset> <!-- closes message-container --> 

<fieldset id="list-container"> 
   <ul> 
      <li> <label class="general">How did you hear about us?</label> <select required> <option value="">Please select one option</option> <option value="newspaper">Newspaper</option> <option value="tv">TV</option> <option value="facebook">Facebook</option> <option value="referral">Referral</option> </select> </li> 
   </ul> 
</fieldset> <!-- closes list-container -->

 

Save and view your contact-form.html document in a browser. It should look something like that shown in the screen grab below:

We’ve finally completed the form.

Just one last thing … later, the form will be centred using CSS. To accomplish this, let’s wrap our form in <div></div> tags. We’ll also give the opening <div> tag an id attribute so that it can be targeted with CSS.

23. Add an opening <div> tag immediately after the opening <body> tag, as shown below:

<body> 
   <div id="form-container"> 
      <header> 
         <h1>Contact Us</h1> 
         <h4><img src="images/asterisk.png"> Required</h4> 
      </header> 
      <form action="process-data.php" method="post">

 

24. Now add a closing </div> tag immediately after the closing </form> tag but just before the closing </body> tag as shown below:

      </form> 
   </div> <!-- #form-container --> 
</body> 
</html>

 

STYLE THE FORM

We’re done! Now to style the form. Go to Part 2 of this tutorial, which looks at styling the form we’ve just created.