HTML 5.0 Forms

I.  Learning Objectives:

By the end of this lesson, you will be able to:

1. Explain how html forms work and create the front end of an html form

2. Create forms that include text labels, hidden data and appropriate input controls for the data being entered.

3. Apply CSS to the fieldset, legend, labels and other divisions within the form

4. Submit form data to a processing script

We will be covering how to create HTML 5 forms.  HTML 5 includes limited error handling which we will also be covering; however, most of the error handling done in forms is created using a web programming language like JavaScript or PHP.  Forms are typically submitted to a script for processing.  You will be submitting forms to a script designed to display the data you submitted (that way you can tell if there are any issues with your form fields).

II. Overview - How Forms Work

To see a video overview explaining forms and form elements, view: https://youtu.be/BU4mIBx9tgQ

Registration forms, subscription forms, purchase order forms etc. are widely used on the Internet. 

When a user submits a form, the data is sent to a scripting language.  The scripting language processes the data.   Scripting languages can be front-end (client-side) or back-end (server-side). 

Front-end languages run on the client computer (your home computer) and typically perform form validation.  They may also take the form data and manipulate it or they may send it on to another page within their domain.  JavaScript is an example of a popular client-side language.

Back-end languages run on the web server and typically perform database updates.  These languages will also perform form validation prior to database updates.   PHP and ASP.net are two of the most popular server-side languages.

Many Internet Service Provider's (ISP's) have a library of common scripts available for you to use.  Normally, customers are not given access to create & run their own scripts on an Internet web server because it could cause performance problems on the server.

Scripts are used to:

1. maintain databases
2. publish catalogues for online shopping
3. count the number of hits a page gets
4. create server-side image maps
5. create message boards for online discussion groups
6. manage e-mail for discussion groups
7. store customer information

In order to use a script you must know what input the script expects and what output the script will create.  When you create your form, you can provide the script with the input information it needs to run.

Once the form has been created, users will fill in the form and select the submit button.  The script will receive information from the form and act on it. 

We will be creating a form that takes in information and sends it to a script for processing (your instructor will provide the script information for you to use).

II.  Form Elements

There are a variety of elements you can add to a form including:

Each element in a form that is used to store information is called a field or field element. 

The actual entry the user types is referred to as the field value. 

Before you can add field elements to a form, you need to tell the browser you will be creating a form - this is done with the <form> tag.

III.  Form & Element tags

A.  <form> tag

The form tag contains attributes that indicate what script to use, how the data should be transferred to the script and how the script should process the data. 

HTML allows more than 1 form on a web page.   Because of this, the form tag contains an id attribute and a name attribute so the script knows which form contains the data.  (The id attribute is newer and conforms to HTML standards,  the name attribute is the old standard and is required for scripts to run on older web browsers.)

The id and name attributes are used to identify the form and items within it (you should give the form an id and a  name, even if you are only creating one form on your page).

Syntax:

<form  id="name you selected" name="name you selected"  method="post or get"  action="URL of processing script" >
    element tags
</form>

The element tags between the opening <form> and closing </form> tags tell the browser what elements should display within the form.

To make form boxes and elements line up on a web page, form developers use the CSS box model.

B.  Grouping Elements

The <legend>, <fieldset> and <label> elements are used in forms to help group the data. 

<fieldset> groups logical areas within a form together.

<legend> identifies major sections within the form by displaying text for the group or section

Example:

<fieldset>
    <legend>Personal:</legend>
        Name: <input type="text"><br>
        Email: <input type="text"><br>
        Date of birth: <input type="text">
</fieldset>

<label> identifies text prompts used with form elements (like <input>)

Example:

<fieldset>
    <legend>Personal:</legend>
        <label for="name">Name:</label> <input type="text" id="name" value="First and Last Name"><br>
&       <label for="email"> Email: </label><input type="text" id="email" name="email" value="Enter your email addr"><br>
        <label for="dob">Date of birth:</label><input type="text" id="dob" name="dob" value="Enter your birthdate">
</fieldset>/p>

NOTE:  The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

The grouping elements can be formatted using CSS.  You can apply formatting to the element, create a class and add the class to the element or create an ID and add the ID to the element.  

C.  Input Tags

Input tags are used to create a majority of the elements within a form (text boxes, option buttons, submit buttons, reset buttons etc).   Selection tags are used to create drop down lists and textarea tags are used to create comment boxes.

Syntax:  <input type="field type"  attributes>

The type property can take on a variety of values including:

1. button
2. checkbox
3. file
4. hidden
5. image
6. password
7. radio
8. reset
9. submit
10. text (default)
11. textarea
12. color  (new in HTML 5)
13. date  (new in HTML 5)
14. datetime  (new in HTML 5)
15. datetime-local  (new in HTML 5)
16. email  (new in HTML 5)
17. month  (new in HTML 5)
18. number  (new in HTML 5)
19. range  (new in HTML 5)
20. search  (new in HTML 5)
21. tel  (new in HTML 5)
22. time  (new in HTML 5)
23. url  (new in HTML 5)
24. week  (new in HTML 5)

As you can see from the list, there are a large number of new input types that are part of HTML 5.0   These new types allow for greater control over the type of data that is entered and they can also be used for data validation to ensure that information entered is more accurate.

If you don't specify the type, the default text box is created.  Since text is the default type, we will begin by creating text input tags.

Attributes include additional information to customize the form element and to make the data more accurate. Attributes include:

1. name - gives the input element a name to identify it by (used by server-side scripts)
2. id  - gives the input element a name to identify it by (used by client-side scripts)
3. value - specifies the default value
4. size - width ofthe box in characters
5. maxlength - maximum number of characters allowed
6. required - the user must fill the element in
7. autocomplete - the browser tries to help out by autofilling the entry area
8. autofocus - you can use this in a form element if you want the cursor to be placed there when the form loads
9. list - used with a data-list to provide choices the user can pick from
10. multiple - allows you to pick more than one (typically used in selection lists)
11. placeholder - gives the user a hint about what to enter or do.  The attribute works with text, search, url, tel, email and password.
12. min and max - specifies a low value and a high value for numbers, ranges and dates
13. step - controls how numbers in a spin box increment.  Typically used in number or date fields

Typical syntax:  <input   type="type of input field you are creating"   name="fieldname"  id="fieldname"   value="default displayed in box"   size="width of the box in characters"  maxlength="max width of data in the field" />

When working with attributes, the name=  and the id= attributes are normally set to the same field name.  When you send the form data to a script, it associates field entries with the text you specify as the id or name (it brings in the data as a name/value pair).  Some scripts require specific field names in order to run correctly.  When you are specifying field names, the case you use is important (i.e. NAME is different than Name).   When submitting to a script, you need to be aware of the names the script expects (this includes what letters are uppercase and lowercase)

 The size attribute affects the width of the box only (you can enter as many characters as you want to).  To limit the number of characters entered, you must use the maxlength attribute.

Both value and placeholder display text to the user, the difference is that the text associated with value is default text and the text associated with placeholder is a hint regarding what to do or enter.  The value attribute has different uses depending upon the input type.  For "button", "reset", and "submit" , it defines the text on the button.  For "text", "password", and "hidden", it defines the initial  (default) value of the input field.  For "checkbox", "radio", and "image", it defines the value associated with the input (this is also the value that is sent to the script upon submission).

NOTE:  Anything you enter in value will display within the text box itself as a default.    If you want to display a hint rather than a default value, use the placeholder attribute. If you don't want any text to display within the box, omit the value property.

Example:

        <input name="FirstName" id="FirstName" placeholder="Enter your first name"  size="25"  maxlength="25"  style="border:3px red inset;" />

       <input name="LastName" id="LastName" placeholder="Enter your last name"   size="25"  maxlength="25"   style="border:3px red inset;" />

How it looks online:

You'll notice in the html, styling was used to outline the form boxes.  The same CSS styles we have been using throughout the course can be used with form tags.  You can add the styles inline as shown above, you can insert them into an internal style sheet OR if you are going to have several pages of forms, you can place the styles into an external style sheet.

This type of input box will "hide" anything the user enters by displaying *** (or some other character) in place of the text.   This will NOT encrypt the field entry, it will only mask the text from view.

Syntax:  <input type="password"   name="fieldname"  id="fieldname"   value="value you want displayed in box"   size=width of box />

Example:

<label for="password">Please enter your password:</label>
 <input type="password" name="password"  id="password" value="" size="25" style="border:5px blue groove;"/>

<label for="confirmPassword">Enter your password again: </label>
<input type="password" name="confirmPassword"  id="confirmPassword" value="" size="25" style="border:5px blue groove;"/>

Display as a circular button and let the user make a single choice.  The selected option has a black dot in it.

If you want to turn a button on as a default, add the checked="checked"  attribute to the input tag.

IMPORTANT:  The ID and name don't need to match for this.  Name is required.  ID may be required by the processing script,  it is also used extensively in JavaScript and other client-side scripting languages. 

<div id="simple">
<p><strong>Used for:</strong></p>
<p><input type="radio" name="use" value="home" id="home"><label for="home">Home</label><br />
    <input type="radio" name="use" value="bus" id="bus" checked="checked"><label for="bus">Business</label><br />
    <input type="radio" name="use" value="gov" id="gov"><label for="gov">Government</label><br />
    <input type="radio" name="use" value="ed" id="ed"><label for="ed">Educational Institution</label><br />
    <input type="radio" name="use" value="other" id="other"><label for="other">Other</label><br />
</p>
</div>

The input tag for radio buttons doesn't display text within the button, so you need to add a description next to the tag.

How it looks online:

NOTE:  Radio buttons should be used for a short list of alternatives.  If you have a longer list, you should use a selection list.

Checkboxes display as square buttons that you can turn on or off by clicking in the box (a checkmark means it is on).  

Each checkbox is a separate field in your form.  Multiple check boxes can be turned on or off.

The input tag for checkboxes doesn't display text within the box, so you need to add a description next to the tag.

 <fieldset>
    <legend>Operating System Used<br/>(check all that apply):</legend>
             <input type="checkbox" name="WIN10" id="WIN10" value="YES" />Windows 10<br/>
             <label for="WIN10">Windows 10</label><br/>
             <input type="checkbox" name="WIN8" id="WIN8" value="YES"   checked="checked" />
                <label for="WIN8">Windows 8.0 or 8.1</label><br/> 
            <input type="checkbox" name="WIN7" id="WIN7" value="YES"   />
               <label for="WIN7">Windows 7.0</label><br/>
            <input type="checkbox" name="MAC" id="MAC" value="YES" />
                <label for="MAC">Macintosh</label><br/>
            <input type="checkbox" name="UNIX" id="UNIX" value="YES" />
                <label for="UNIX">Unix</label><br/>
            <input type="checkbox" name="OTHER_SYSTEM" id="OTHER_SYSTEM" value="YES" />
                <label for="OTHER_SYSTEM">Other</label><br/>
 </fieldset>

 NOTE:  If you want the box checked by default, place the attribute checked="checked"  in the input tag

The new data types include minor validation to help ensure data entered is accurate

The number type is used for input fields that should contain a numeric value.  You can set restrictions on the numbers, such as min and max values.

In the example below, the quantity field will be limited to the numbers 1 through 50.  It will display a spin box that will increase numbers to select from by 2

<form>
    Quantity (between 1 and 50): <input type="number" name="quantity" min="1" max="50" step="2">
</form>

Here's how it looks live (it will only display with the spin box if the browser supports the feature)

The email type is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted. Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input.

Example:

<form>
    E-mail: <input type="email" name="email">
</form>

The tel type is used for input fields that should contain a telephone number  (this feature is not supported by all browsers yet).  You can use the placeholder attribute to display how the number should be entered

Example:

<form>
    Telephone: <input type="tel" name="usrtel" placeholder="(999) 999-9999">
</form>

Here's how it looks live:

The url type is used for input fields that should contain a URL address. Depending on browser support, the url field can be automatically validated when submitted  Some smartphones recognize the url type, and add ".com" to the keyboard to match url input.

Example:

<form>
    Add your homepage:<input type="url" name="homepage" id="homepage">
</form>

The color type is used for input fields that should contain a color.  Depending on browser support, a color picker can show up in the input field.

Example:

<form>
    Select your favorite color:<input type="color" name="favcolor" id="favcolor">
</form>

The date type is used for input fields that should contain a date.  Depending on browser support, a date picker can show up in the input field.   You can also add restrictions to the input using max="YYYY-MM-DD" or min="YYYY-MM-DD"

<form>
 
   Enter your birthday: <input type="date" name="bday" placeholder="2000-01-01"  min="1900-01-01"><br>

</form>

Here's the example live:

The range type is used for input fields that should contain a value within a range.  Depending on browser support, the input field can be displayed as a slider control.   You need to set a min and max value for this.

Example:

<form>
    Rate your performance:<input type="range" name="rating" id="rating"  min="0" max="10">
</form>

Here's the example live:

The input tag is used to enter hidden fields.  Hidden fields are used to send information to the script that you don't want the user to see.

If your script requires a particular field name, such as email, then you will set the name attribute equal to the required fieldname.   value= will be the field entry you hardcode (such as someone's e-mail address).   NOTE:  When you are working with hidden fields, the only reason you are doing this is to meet script specifications.

Form buttons are used to run programs, submit forms, reset forms etc. - they perform some type of action when activated. 

There are 4  types of form buttons that you can use:

Used to submit your form to the script.

Syntax:  <input type="submit"  value="text you want displayed on button" />

HTML example:   <input  type="submit"  value="Send Registration" />

Live Example: 

Used to reset the form back to it's default values (the form doesn't get submitted to the script).

Syntax:  <input type="reset"  value="text you want displayed on the button" />

HTML Example:  <input  type="reset"   value="Cancel" />

Live Example:

You can create buttons that will execute scripts embedded into your own web page.  When the button is clicked, the script is activitated and runs - for this to work, you would need to create the script yourself using a client-side language like JavaScript.

You can insert a graphical image to use in place of the text you would typically display in a command button

HTML Example:    <input type="image" src="images/submit.png" alt="click to submit" onclick="submitOrder();" height="39" width="172" />

Live Example: 

The <datalist> tag specifies a list of pre-defined options for an <input> element.  The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. 

The data list you create  is given an id="text" attribute.  The name used in the id="text"  statement must be the same name used in the input element's list="text" attribute.  The browser uses the text specified to connect the input element with the list.

Example of an input element with a pre-defined set of values in a data list (the input element and list are connected by the word chocolates which is in the id attribute of the datalist tag and the list attribute of the input tag):

Please select your favorite chocolatier: 
<input  list="chocolates" placeholder="favorite chocolatier" size="50">
<datalist id="chocolates">
<option value="Godiva Chocolatier (Brussels, Belgium and worldwide)">
<option value="Hershey (Hershey, Pennsylvannia, USA)">
<option value="Teuscher (Zurich, Switzerland)">
<option value="Vosges Haut-Chocolat (Chicago, Illinois, USA)">
<option value=" Richart (Paris, France)">
</datalist>

Here's how it looks live:

Now that we have thoroughly covered input tags, we are going to take a look at some additional tags that are heavily used in online forms: TextArea tags and Selection tags.

Text areas are used for comments, descriptions etc.    They contain multiple lines of free format text. 

How it looks live:

Text area tags contain an opening <textarea> tag and a closing</textarea> tag.

Selection tags create drop down lists or open list boxes in a form.   You can set this up so the user can select one item or multiple items.

<select   name="fieldname"  id="fieldname" size="1">
    <option>text displayed in box</option>
    <option>text displayed in box</option>
    <option>text displayed in box</option>
    <option>text displayed in box</option>
</select>

<select   name="fieldname" id="fieldname"   size="number of entries you want to display">
    <option>text displayed in box</option>
    <option>text displayed in box</option>
    <option>text displayed in box</option>
    <option>text displayed in box</option>
</select>

NOTE 1:  The default is to make 1 selection from the list.  If you want users to make multiple selections, add the multiple="multiple" attribute to the select tag.    You will need to let them know that they should click on the first selection and press CTRL while clicking on other selections they want.  If you turn multiple on, the form will send multiple values for the same fieldname & field entry (make sure the script you are using can handle this).

NOTE 2:  If you want an option selected by default, you need to add select="selected"  to the option tag for that item.   

There are 2 attributes you can add to the option tag.

This lets you send the script a value instead of the text string displayed to the user

HTML  Example:

<option value="CIT100">CIT100 Computers in Business</option>
<option value="CIT190">CIT190 JavaScript Programming</option>

By default, the first option within the list is displayed as the default, if you want a different option displayed, add select="selected" to the option tag.

<label for="classes">Courses:</label>
<select name="classes" id="classes" size="1">
<option value="CIT100">CIT100 Computers in Business</option>
<option value="CIT110">CIT110 Programming Logic and Design</option>
<option value="CIT178">CIT178 Relational Databases</option>
<option value="CIT180" select="selected">CIT180 HTML and CSS Programming</option>
<option value="CIT190">CIT190 JavaScript Programming</option>
<option value="CIT210">CIS210 Microsoft Excel</option>
</select>

If you want to control the tabbing order of items within a form, you can use the tabindex attribute to number the elements.  Numbering should begin with 1. ( If you assign the number zero or a negative number to a field, it will be skipped. )

Example:

<legend>Personal Information</legend>
<label for="last">Last Name: </label>
<input name="last" id="last" type="text" tabindex="1" size="20" style="width: 287px" /><br/>
<label for=first">First Name:</label>
<input name="first" id="first" type="text" tabindex="2" size="20" style="width: 281px" /><br/>
<label for="address">Address:</label>
<input name="address" type="text" id="address" tabindex="3" size="20" style="width: 283px"/><br/>
<label for="city">City:</label>
<input name="city" id="city" type="text" tabindex="4" size="20" style="width: 213px" />
<label for=state">State:</label>
<input name="state" id="state" type="text" size="4" value="MI" tabindex="4" />
<label for="zip">Zipcode: </label>
<input name="zip" id="zip" type="text" size="12" tabindex="5" style="width: 171px"/>

How it would look in your web browser:

IV Simple Form Validation

Most form validation is done in a client or server side programming script.  HTML 5 has some validation with new tags and attibutes, for example, the required attribute forces the user to enter something into the field.  The max and min attributes for numeric fields also help ensure the data is accurate.  

In addition to using the newer HTML 5 input types and attributes, you can also include regular expressions in form elements.

A.  Regular Expressions and the pattern attribute

Regular expressions can be used to validate data and are found in many programming languages.  They can be simple or very complex.  In this course, we will focus on simple regular expressions that are commonly used.

Please note that the pattern attribute is relatively new and is not fully supported in current browsers; however,  as time progresses, it will be fully supported and is worth learning.

To add a regular expression for validation, you need to use the pattern attribute

Syntax:  pattern="regular expression"

1.  Number Validation

To ensure the user enters a number, you can add the following regular expression to the form element tag:

pattern="[0-9]"

NOTE:  If you don't include a value for the size, it assumes 1 digit.

2.  Number Validation with a specific number of digits

To ensure the user enters numbers AND they enter a specific number of digits, create the following expression:

Syntax: pattern="[0-9]{number}"

Where number is the number of digits required

To require 3 digits, you would enter:  pattern="[0-9]{3}"

To require 10 digits, you would enter: pattern="[0-9]{10}"

NOTE:  the numbers 0-9 are in brackets and the value specifying the number of digits is in curly braces.

3.  Text Validation

To ensure text values are entered in lowercase letters, use:  pattern="[a-z]"

To ensure text values are entered in uppercase letters, use: pattern="[A-Z]"

NOTE:  If you don't include a value for the size, it assumes one letter.

To specify the number of letters, you can use {number} just like we did with number validation

To ensure 3 capital letters, use:  pattern="[A-Z]{3}"

4.  Additional Examples:

To ensure that a URL begins with http:// or https://, use the following pattern:

pattern="https?://.+"

For more information, see: https://www.w3schools.com/tags/att_input_pattern.asp