CIS 4004: Web Based Information Technology

Fall 2012

Inside HTML5 – Part 4 - Forms

Instructor : Dr. Mark Llewellyn

Department of Electrical Engineering and Computer Science

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 1 © Dr. Mark Llewellyn
 Inside HTML5 – Part 4 - Forms
• One of the biggest problems with XHTML and HTML 4
forms was that they were just dumb fields. Validation was
required not only on the server-side, but also you had to
duplicate the validation in the user’s browser using
JavaScript if you wanted to give the user the seamless
experience they deserve.
• Given that almost every web page has some kind of form –
search, comments, sign-up, and so on, HTML5 has come to
the rescue and provides built-in validation for many of the
most common types of data entered via web forms.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 2 © Dr. Mark Llewellyn
 Inside HTML5 – Part 4 - Forms
• HTML5 makes developing forms quicker. There are some
nice goodies like the addition of two new HTTP types for
form action (update and delete) to go along with the
current get and post actions.
• The most useful new features and the new form input types
which provide special user interfaces and built-in error
reporting.
• Eventually, you won’t need JavaScript validation at all for
these fundamental data types. Until everyone is using an
HTML5 browser, some JavaScript validation will still be
required.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 3 © Dr. Mark Llewellyn
 Inside HTML5 – Part 4 - Forms
• It was actually the new form fields that were at the basis of the
specification that ultimately became HTML5. It is also in this
area where you’ll see the principle of specifying backwards-
compatible extensions to HTML5 in action.
• The extensions are largely new values of the type attribute of
the input element.
• XHTML and HTML4 specified that browsers should assume
<input type=text> if you don’t specify a type attribute,
or you use an unknown type. Therefore, legacy browsers that
don’t understand the new extensions will fall back to the default
and will allow the user to enter data in a plain text field. This
fallback can be detected in JavaScript and handled so that old
browsers can mimic the new behaviors.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 4 © Dr. Mark Llewellyn
 Inside HTML5 – Part 4 - Forms
• The HTML5 specification makes no requirements on how
browsers should present the new input types to the user or
report errors (handle validation). Different browsers and
different devices will present different user interfaces, as we
will see.
• The manner in which the browser reports errors is also
undefined by the HTML5 specification. Error messages are
part of the browser and are thus automatically localized. This
means much less work for the developer and a more usable
experience for the consumer.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 5 © Dr. Mark Llewellyn
 Inside HTML5 – Part 4 - Forms
• The HTML5 specification makes no requirements on how
browsers should present the new input types to the user or
report errors (handle validation). Different browsers and
different devices will present different user interfaces, as we
will see.
• The manner in which the browser reports errors is also
undefined by the HTML5 specification. Error messages are
part of the browser and are thus automatically localized. This
means much less work for the developer and a more usable
experience for the consumer.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 6 © Dr. Mark Llewellyn
 Inside HTML5 – Part 4 - Forms
• There are two basic parts to any form: the collection of fields,
labels, and buttons that the visitor sees on the page and
hopefully fills out; and the processing script that takes that
information and converts it into a format that you can read or
tally, or process in some manner perhaps on a database.
• Constructing a form’s fields and buttons is straightforward and
similar to creating any other part of the web page. Some of
these form field types include text boxes, special password
boxes, radio buttons, checkboxes, drop-down menus, large text
areas, and even clickable images.
• Each element has a name that will serve as a label to identify the
data once it is processed. CSS is used to style the form.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 7 © Dr. Mark Llewellyn
 Inside HTML5 – Part 4 - Forms
• Using forms often requires using a server-side scripting
language to receive the submitted information. It requires
code on the web server that listens for form responses and
processes the information in the response by storing
information in a database, sending it in an email, or redirecting
the user to new information.
• PHP is often the server-side scripting language that is utilized
for this purpose, but there are many other server-side scripting
languages. We’ll cover PHP in more depth later in the course.
• Before we look at some of the new HTML5 form elements, let
’s examine creating basic forms and processing them.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 8 © Dr. Mark Llewellyn
 Inside HTML5 – Part 4 - Forms
• Every form has 3 basic parts:
– The form element.
– The actual form elements where the visitor enters information.
– The submit button that sends the collected information to the server.

• The form element includes the URL of the script that will
process the form and its method (get, post, etc.).
• The example on the following page is a snippet of markup
from a much larger form that we’ll examine later. This
example shows only a very simple form.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 9 © Dr. Mark Llewellyn
 The form element

URL of the PHP script to process data

Submit button to send data to script

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 10 © Dr. Mark Llewellyn
 Rendering of the form in
Safari with no CSS
applied

The submit button

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 11 © Dr. Mark Llewellyn
 Part of the CSS to style
the form example

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 12 © Dr. Mark Llewellyn
 Rendering of the form in
Safari

The submit button

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 13 © Dr. Mark Llewellyn
 Visitor fills in the form and
the data in the form is
extracted by the
showformdata.php
script running on the
server.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 14 © Dr. Mark Llewellyn
 Output from the
showformdata.php
script.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 15 © Dr. Mark Llewellyn
 Fieldsets and Legends
• Let’s look at some of the basic form elements in the previous
example and see how they can be styled and grouped to create a form
that is both visually appealing as well as useful for your web page.
• If you have a lot of information to fill out on a form, you can use a
fieldset element to group related elements and make the form
easier to follow. The easier it is for your visitors to understand the
form, the more likely they are to fill it out correctly.
• You can also use the legend element to give each fieldset a
caption that describes the purpose of each grouping. However, there
is currently an almost universal lack of browser support for visual
control over the legend element, so I recommend using regular
heading elements.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 16 © Dr. Mark Llewellyn
 Fieldsets and Legends
• The legend element limits the power of CSS to position it. It is this
reason that its styling is limited in most browsers. I recommend
that you use an appropriately styled <p> element or <h1>-<h6>
element to recreate its effect. Notice that this is the approach I took
in the previous example.
• Text boxes can contain one line of freeform text – that is, anything
that the visitor wants to type – and they are typically used for
names, addresses, and so on.
• There are many ways to separate your form elements from each
other. In this example, I an using unordered lists, but it is also
common to see <div>, <p> or <br> elements used in this
context.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 17 © Dr. Mark Llewellyn
 Textboxes
• Personally, I feel that the unordered list is more semantically correct
for this as I would view a form as a list of elements to be completed
by the visitor before they click the submit button.
• Text boxes can be different sizes to accommodate different types of
fields. In the previous example, I used a CSS style sheet to set the
width using classes. However, you can also set the width with the
size = “n” attribute on the HTML5 element itself. I would
normally take this approach as it is easier to make changes to a form
in general via CSS than it is to go through the markup looking for
size attributes in the various form elements.
• While every form element must have the name attribute set, the
value attribute is optional and only needs to be specified if the form
element is to have a default value.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 18 © Dr. Mark Llewellyn
 Textboxes
• The name attribute must be specified for each element of your
form. The reason is that this is how you access these values on the
server to which the form data is sent for processing.
• Older versions of IE can get the name and id attributes confused
when the script uses the getElementByID method. The way this
is normally handled is to use the same unique value for both the
name and id for each field in the form. This enhances the
accessibility of your form. Notice that this is the approach I took in
the previous example.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 19 © Dr. Mark Llewellyn
 HTML5 Form Attribute Enhancements
• Forms are one area of HTML that many developers find painstaking,
because it often requires extra effort with CSS and JavaScript to
make them function well.
• HTML5 has made some significant improvements to forms by adding
many form enhancements that were not available in HTML 4 or
XHTML.
• These enhancements include attributes autofocus, required,
placeholder, maxlength, and pattern. I’ll introduce some
of these as we go along with additional examples, but if you look at
the complete code for the previous example (see course webpage for
complete markup and next page for quick view), you’ll see that both
required and placeholder were used in text box for the first
name.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 20 © Dr. Mark Llewellyn
CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 21 © Dr. Mark Llewellyn
 Placeholders are a great way to give visitors a
hint or extra instructions for filling out the
form. The placeholder attribute will put text in
a light grey color inside your text box. When
the user begins to input text in the file, the
light grey text will disappear, and it will come
back if the user leaves the field without
entering any information.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 22 © Dr. Mark Llewellyn
 HTML5 Form Attribute Enhancements
• The required attribute can be applied to any number of fields in
a form. Any field that is designated as required must have a value
entered in the field for the form to submit. If the user clicks the
submit button and a required field has no data entered and error will
be generated and the form data will not be submitted to the server.
• When desired, an element can have the autofocus attribute set to
have a value of autofocus. If it is the first element to have this
attribute, the input element will by default have focus when the
page loads. Notice in the previous example, that no element had
autofocus set, so the visitor was required to click on the first (or
some) element to begin filling out the form. Notice the difference
in the two renderings on the next page.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 23 © Dr. Mark Llewellyn
 No autofocus on first Autofocus on first element
element of form of form

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 24 © Dr. Mark Llewellyn
 Password Boxes
• The only difference between a password box and a regular text box
is that whatever is typed in the password box is hidden by bullets or
asterisks. The information is not encrypted when it is sent to the
server.
• A password box only keeps onlookers from seeing a user’s
password as it is typed. To really protect the password, a secure
(https) server connection must be utilized.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 25 © Dr. Mark Llewellyn
 Labeling Form Parts
• HTML5 provides a semantic method for marking up labels so that
they are formally linked to the associated element. This makes
them useable for scripting and other purposes.
• Notice in the example markup (see page 10) that each form element
is inside a label element with a for attribute.
• For example, you might want to have “First Name” before the text
field where the visitor should type their first name.

CAUTION ! ! !

Placeholders are sometimes incorrectly used as a replacement for the label. Be

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 26 © Dr. Mark Llewellyn
 Labeling Form Parts
• Using field labels in this semantically correct way gives you an easy
way to identify them in a CSS style sheet.
• If you use the for attribute, you must also add the id attribute to
the associated form element’s start tag in order to mark it with a
label. The document will not validate if you miss this step and use a
label but do not include a matching id.
• Using the for attribute in the label requires that the label match
the id attribute of the form element.
• Labels for radio buttons and checkboxes (more later) allow the user
to click the label as well as the form element to modify the state.
This is sometimes easier for the visitor to do than to place the cursor
on a small dot or checkbox.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 27 © Dr. Mark Llewellyn
 Radio Buttons
• Radio buttons are used when you want to provide the visitor, typically a
limited number of options for some field, but the visitor is limited to
being able to select only one of the options.
• Radio buttons are named after the type of radios that many old cars had
in which selecting a station was done by depressing a selector button.
Only one selector button could be pushed at a time.
• The name attribute serves a dual purpose for radio buttons: it links the
radio buttons in a given set together, and it identifies the value when it
is sent to the script for processing.
• The value attribute is crucial for a radio button, since the visitor has no
way of typing a value for a radio button.
• Part of the large form example that illustrates radio buttons is shown on
the next page.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 28 © Dr. Mark Llewellyn
CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 29 © Dr. Mark Llewellyn
 CSS is used to style the radio button list
elements to display inline rather than vertical.
Also, the radio button labels have a right
margin of 25 pixels to separate the radio
button label pair.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 30 © Dr. Mark Llewellyn
 Radio Buttons
• If desired, the attribute checked = “checked” can be set to
make the radio button active by default when the page is opened.
You can do this to only one radio button in the set.
• If you do not set the value attribute, the word “on” is sent to the
processing script. Its not particularly useful, since you cannot tell
which button in the set was selected.
• For radio buttons only, the name attribute must be the same for
every radio button in the set. The id attribute for each element on
the page must be unique.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 31 © Dr. Mark Llewellyn
 Selection Boxes
• Selection boxes are a convenient way to offer your visitors a choice
from a given set of options. They are most often rendered as drop-
down lists.
• You can give the user the option of choosing only one option or
several options from the list.
• Selection boxes render as a box of items with a scroll bar.
• Selection boxes are made up of two HTML5 elements: select and
option. You set the common name attribute in the select element
and you set the value attribute in each of the option elements.
• The part of the big example markup that displays the selection box
is shown on the next page.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 32 © Dr. Mark Llewellyn
CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 33 © Dr. Mark Llewellyn
 Exploded view of the selection box activated
by the visitor who will be selecting the Florida
option. When the user lets up on the click –
the form element will change to mirror their
selection.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 34 © Dr. Mark Llewellyn
 Selection Boxes
• A visitor will not be able to not make a selection in a menu unless
you set the size attribute.
• If you have a particularly large menu of items, you may want to
group the options into categories. Before the first option element
in the first group that you want to place together enter an
optgroup element and enclose all of the subgroup menu items
inside the optgroup element. Repeat this for as many
subgroupings as you’d like to create.
• Browsers generally do not create true submenus, but rather group
the items into a single menu with subgroups.
• The example on the next page illustrates this concept.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 35 © Dr. Mark Llewellyn
CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 36 © Dr. Mark Llewellyn
 Exploded view of the subgrouping of the
selection box.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 37 © Dr. Mark Llewellyn
 Selection Boxes
• The attribute selected=“selected” is used to specify that an
option in the selection box is to be selected by default.
• If desired, the attribute size=“n”, where n represents the height
(in lines) of the selection box can be used to define how many lines
are visible at one time by the visitor.
• If you use the size attribute, the selection box appears more like a
list, and there is no automatically selected option (unless you use
selected).
• If size is bigger than the number of options, visitors can deselect
all values by clicking in the empty space.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 38 © Dr. Mark Llewellyn
 Check Boxes
• Radio buttons can accept only one answer per set (grouping of radio
buttons). Check boxes allow the user to select as many options in a
set as they like.
• Similar to radio buttons, check boxes are linked together in a set or
group via the value of the name attribute.
• The visitor can select as many checkboxes as appropriate. Each
corresponding value will be sent to the script, along with the name
of the checkbox set.
• As you can see in the example on the next page, the label for a
checkbox comes after the input element. This means that you will
often need to style the label for a checkbox separately.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 39 © Dr. Mark Llewellyn
 Notice that the label for the checkbox comes
after the input element. Also notice that the
label text does not need to match the value
attribute. This is because the label text
identifies the checkboxes to the visitor in the
browser, whereas the value identifies the data
to the script.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 40 © Dr. Mark Llewellyn
 Text Areas
• Text areas are used when you want to provide your visitor room to
write questions or comments.
• There is no value attribute with text areas. The value instead is
the text that appears between the start and end textarea tags.
• Visitors can enter up to 32,700 characters in a text area (the
maximum number of characters allowed). Scroll bars will appear
automatically when needed, depending on the size of the text area
and the number of characters the visitor has entered.
• The attributes rows and cols set the height of the textarea in
rows and the width of the textarea in columns respectively. The
attribute maxlength (new in HTML5) sets the upper limit on the
number of characters that can be entered in the textarea.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 41 © Dr. Mark Llewellyn
 In this case, the height of the textarea will
be 8 rows and the width will be 50 characters.
If the user enters more text than 8 rows,
vertical scrollbars will appear at that point in
time.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 42 © Dr. Mark Llewellyn
 The visitor
has entered
an amount of
text equal to
the size of
the textarea.
No scrollbars
appear yet.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 43 © Dr. Mark Llewellyn
 The visitor
has entered
more text
than the size
of the box (in
rows) so the
vertical
scrollbar has
appeared.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 44 © Dr. Mark Llewellyn
 In this case the
maxlength
attribute is set to
20. As soon as
the visitor has
entered 20
characters, no
more text can be
entered.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 45 © Dr. Mark Llewellyn
 Calendar And Time Controls
• A common issue web developers have to deal with is how to
create calendar widgets that allow the users to pick a date from a
calendar so they do not have to enter the date themselves.
• In the past, creation of such a widget always required JavaScript,
but with HTML5 the need to use JavaScript is disappearing.
• HTML5 has several new input types that create different
calendar and time controls. Currently, not all browsers support
these new types. Opera has the best and most elaborate support
followed by Safari and Chrome. For the examples that follow,
I’ve used Opera 12.02 to demonstrate these new input types.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 46 © Dr. Mark Llewellyn
 Date and Datetime
• The new HTML5 input type date allows the user to select a
calendar date.
• In Opera, a calendar with a date picker is provided. In Safari a
scrollable element is provided that defaults to the current date.
• The HTML5 input type datetime generates a calendar along
with a time selector with the time being UTC.
• The HTML5 input type datetime-local is identical to
datetime except that the time is based on your local time
(whatever is considered local time by your computer).
• These are all illustrated on the next few pages.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 47 © Dr. Mark Llewellyn
 A portion of the markup for the following examples. Notice in particular
the new input element types. Also notice that these forms are for
display purposes only and are not being processed so no method or
action attributes are specified.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 48 © Dr. Mark Llewellyn
 Notice the differences in the input boxes for the three
different input types. Date provides only a date,
while datetime provides a date and time area, but is
designated UTC, and datetime-local drops the UTC
designation. Next pages illustrate them in action.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 49 © Dr. Mark Llewellyn
 date

Calendar widget
is displayed
allowing the user
to select a date.
Note scrollable
year and month.
Plus a “today”
button to select
today’s date.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 50 © Dr. Mark Llewellyn
 datetime

Calendar widget
is displayed
allowing the user
to first select a
date. Then the
up/down arrows
are used to select
the time (UTC)

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 51 © Dr. Mark Llewellyn
 datetime-local

Identical in
operation to
datetime
except that UTC
designation is
removed.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 52 © Dr. Mark Llewellyn
 month

Calendar looks
the same but the
user can only
select an entire
month of days
(note highlighting
of the days).

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 53 © Dr. Mark Llewellyn
 week

Calendar looks
the same but the
user can only
select a week
(note highlighting
of the weeks plus
the week number
appears in the
calendar).

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 54 © Dr. Mark Llewellyn
 Date and Datetime
• There are two new attributes, min and max that can be used to
restrict the values for dates and times of the widget.
• For a date, if you wanted to make sure the user could not pick a
date to far in the past, the min attribute would be set. Similarly,
to make sure that they cannot enter a date too far in the future,
the max attribute would be set. The values would have the
format: YYYY-MM-DD.
• For times, similar restrictions are allowed but the format for a
time is HH:MM.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 55 © Dr. Mark Llewellyn
 Number Selectors
• The new number input type is used to allow the user to enter a
number, again, without them being required to type the number.
• It accepts only numbers, otherwise, a validation error is returned.
• It allows the min and max attributes to be specified to limit the
range of values that can be selected.
• It also allows for another new attribute, step, which allows you
to specify the increment values that can be entered.
• An example is shown on the next page.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 56 © Dr. Mark Llewellyn
CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 57 © Dr. Mark Llewellyn
 The up/down arrow keys
allow the user to scroll
through the available
numbers until their desired
number is selected.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 58 © Dr. Mark Llewellyn
 Sliding Numeric Selectors
• The new range input type generates a slider control. It has no
text area for the user to type into, and like the number input
type, it can use the min, max, and step attributes.
• In the past, with HTML4 or XHTML, including such a form
control would have required JavaScript to be able to generate and
control the widget.
• There is limited control over how the slider looks because at the
moment the controls are browser-specific. However, you can
apply a height and width to the range control. If you specify a
height larger than the width, the control renders vertically instead
of the default horizontal rendering.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 59 © Dr. Mark Llewellyn
CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 60 © Dr. Mark Llewellyn
CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 61 © Dr. Mark Llewellyn
 Color Selectors
• The new color input type allows the user a choice of some
basic colors with the options of entering a hex value or using a
color picker, similar to what is used in many software packages.
• The only desktop browser that currently supports this input type
is Opera 11+ (although newer Blackberry browsers also support
the color selector).
• The next couple of pages illustrate this input type.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 62 © Dr. Mark Llewellyn
 Output from
showform.php script
(i.e., the processed data
from the form)

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 63 © Dr. Mark Llewellyn
 Output from
showform.php script
(i.e., the processed data
from the form)

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 64 © Dr. Mark Llewellyn
 Displaying Results With The output Element
• The output element uses JavaScript to display results, usually
from a calculation or from a script. It however, can also be used
to add a little extra functionality to various input types like the
range type we just saw.
• To have the value that the range slider is currently set at as the
slider is being dragged you would use the output element.
• The default value is blank, but when the user moves the slider,
the output value is changed and displayed to the user in real time.
• The example on the next two pages illustrates this technique.
Don’t worry about the JavaScript at this point, we’ll see it later.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 65 © Dr. Mark Llewellyn
 Insert section of
code from mini
form 3.html here Output from
showform.php script
(i.e., the processed data
that illustrates from the form)

the onforminput
JavaScript for
the output
element

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 66 © Dr. Mark Llewellyn
 Output from
showform.php script
(i.e., the processed data
from the form)

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 67 © Dr. Mark Llewellyn
 Creating An Autocomplete Feature With list
and datalist
• The datalist element is new in HTML5. Combined with the
list attribute, it is used to provide a predefined list of options,
making the process of creating a list seem like an autocomplete
form.
• User’s don’t necessarily have to choose from the predefined
options, they can type their own answers if they wish.
• The datalist is similar to a select element. However, with
a select element, the user cannot type their own option if they
need to do so.
• The next two pages illustrate this new element.

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 68 © Dr. Mark Llewellyn
 Insert code Output from
showform.php script
section of mini (i.e., the processed data
from the form)

form 3 here
that illustrates
the datalist
element

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 69 © Dr. Mark Llewellyn
 Rendering of the
datalist element as
user is seeing the list.
Notice option for them to
type in their own value in
the text box.
CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 70 © Dr. Mark Llewellyn
 This section
not complete

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 71 © Dr. Mark Llewellyn
 Output from
showform.php script
(i.e., the processed data
from the form)

CIS 4004: Web Based IT (Inside HTML5 – Part 4) Page 72 © Dr. Mark Llewellyn