DDW Topic 7

8/11/2019 DDW Topic 7

1/10

Topic 7 HTML Forms Designing and Developing a Website

V1.0 Visuals Handout Page 1

NCC Education LimitedV1.0

Website

Topic 7:

HTML Forms

HTML Forms Topic 7 -7.2

Scope and Coverage

This topic will cover:

Basic structure of HTML forms

HTML form controls


Controlling the layout of forms

HTML 5 form elements


Learning OutcomesBy the end of this topic, students will be able to:

Describe the basic structure of HTML forms

Select appropriate form controls for different

circumstances


Build accessible HTML forms using a variety of

form controls

Control the layout of HTML forms using CSS

8/11/2019 DDW Topic 7

2/10




Forms are a common part of surfing the web.

Search facilities Registration / login systems

Buying products

HTML can be used to build forms.

HTML Forms


Define the text boxes, buttons etc.

HTML has no power to process the data entered into

a Form. The browser passes the data to scripts on the web server.

e.g. PHP, ASP.NET, Ruby


The Structure of Forms

Username:


.

Identifies the start and end of an HTML form

The action attribute specifies the URL of the script to whichthe data will be sent.

It is a required attribute

The method attribute specifies how the data will be sent.


Form controls The text boxes and buttons used to gather data

from the user.

Most form controls are created using the

Form Controls


. Empty element

The type attribute is used to specify the type ofcontrol.

The name attribute is used by the script thatreceives the data.

8/11/2019 DDW Topic 7

3/10




A value of text for the type attribute specifies a text field.

The size attribute is used to define the visible size of the text field.

i i li i

Form Controls Text Fields

Username:


i i li ithat can be entered.

The value attribute can be used to specify a default value for thetext field.

A value of password for the type attribute creates apassword field.

The characters entered will be replaced with asterisk or bulletcharacters.


Form Controls CheckboxesI regularly do the following exercise:

Walking:

Running:

Cycling:


Checkboxes allow users to select multiple options froma list. A value of checkbox for the type element specifies a

checkbox. The checked attribute can be used to make the box checked

when the page loads.

The value attribute is used to associate a piece of data withthe checkbox.


Radio buttons allow users to select a single option

Form Controls Radio ButtonsWhich of the following has stripes?

Leopard

Lion

Jaguar

Tiger


from a group. Selecting one deselects all the others

To work together, all the radio buttons must have the

same value for the name attribute.

Can also feature the checked attribute

8/11/2019 DDW Topic 7

4/10

8/11/2019 DDW Topic 7

5/10




The element is used to associate a text

Accessible Forms The

Element

Username:


. The form control needs an id attribute.

The fo rattribute of the label element links the label

to the control.

All forms should use label elements.


Accessible Forms The

and Elements

Contact Details

Email :

Telephone number:

Mobile phone number:< >


The element is used to group related form

controls together.

The element is used to give this group a title. Screen readers will read the content before the each

element.

E.g. Contact Details Email Address


We can use the accesskey and tabindexattributes with form controls.

Accessible FormsEmail address:

Telephone number:


Used in the same way as hyperlinks

We have the same disadvantages discussedpreviously. Browser support

How does the user know the access key?

Tab order breaking conventional flow

8/11/2019 DDW Topic 7

6/10




Form Controls and Valid Documents

Username:


The , , and elements are all inline elements. Need to be nested inside a block level element for the page

to be valid

Form controls must be nested inside a element.


We can style forms using CSS. The :focus pseudo class specifies a style for when

CSS and Formsinput:focus{

outline:3px solid red;

}


.

The outline property is commonly used to

highlight the form control. Users are familiar with the default appearance of

forms. Style with moderation


CSS and Form Attribute

Selectors

input[type='text']{

width:200px;

}


e can use an a r u e se ec or o arge spec c

types of form control.

In this example, only form controls with a type

attribute of text will be affected by the rule.

8/11/2019 DDW Topic 7

7/10




A common problem is controlling the layout ofHTML forms.

By default, browsers apply little styling.

Form Layout


Use
elements

Use an HTML table

Use the CSS float property


Form Layout Using
Elements

Username:

First name:

Last name:


elements can be used to place different

elements on different lines. Limited control

Adding presentation information through HTML!


Form Layout Using Tables

Username:

First name:

Last name:


A simple table can be used to control form layout. Two columns

A row for each label-control pairing

With no CSS applied, the table is invisible.

8/11/2019 DDW Topic 7

8/10




We can use the floatproperty to make form

controls wrap onto the

same lines.

Form Layout Using CSS

input[type='text']{

float:left;width:150px;

}


e c earproper y ma es

the labels start new lines.

Can get complex when we

have many different form

controls

clear:both;

float:left;

text-align:right;

width:150px;

}


free text input is difficult for many mobile devices.

Mobile devices often have input limitations.

Use controls that do not require the user to type.

Forms and Mobile Devices


.

Use label elements

Should be visually close to the control


HTML 5 provides some new form controls and

attributes. Enhance usability of HTML forms

No need for JavaScript

HTML 5 New Form Elements


Few browsers support all these new features. degrade gracefully for older browsers

If a browser does not recognise the new input

type, it will display a plain text field.

8/11/2019 DDW Topic 7

9/10




HTML 5 - Attributes

Username:First name:

Last name:


The autofocus attribute places the users cursor in aform control when the page loads.

The placeholderattribute is used to place somedescriptive text in a form control.

The required attribute means the user has to fill in theform before it gets sent to the server.


Previous versions of HTML had no form controls

HTML 5 Number Types

Rating:


for numbers. The numbertype defines a spinbox.

The range type defines a slider.

The min and max attributes allow us to restrict the

numbers that can be entered.


HTML 5 Date Picker

Choose delivery date:


, , ,

week or time.

Previously, we have had to rely on JavaScript to

create these features on a web page.

8/11/2019 DDW Topic 7

10/10




These types allow browsers to validate user input. Check the user has entered a valid email address/URL

HTML 5 The email and ur l Types

Email address:


Useful for smart phones Limited space for on screen keyboard

Dynamically changes the keyboard for the input type

The keyboard features the @ symbol when the input

type is email.


Chisholm, W. and May, M. (2008). Universal

Design for Web Applications: Web Applications

That Reach Everyone. O'Reilly Media.

References


Duckett, J. (2010). Beginning HTML, XHTML, CSS,

and JavaScript. John Wiley and Sons.

Henick, B. (2010). HTML & CSS: The Good Parts.

O'Reilly Media.


Topic 7 HTML Forms


Any Questions?