web development -2

sri999

t7.pptx

Home >Information Systems homework help >web development -2

HTML5, CSS3, and JavaScript

6th Edition

Designing a Web Form

Tutorial 7

Carey

Objectives

Explore web forms

Work with form servers

Create forms and field sets

Create labels and input boxes

Explore form layout

Work with date and time fields

Create a selection list

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued)

Create option buttons

Create check boxes and text area boxes

Create spinners and range sliders

Use data lists

Create form buttons

Validate a form

Apply validation styles

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Structure of a Web Form

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Web Forms

Web form

Allows users to enter data that can be saved and processed

Common way to accept user input

Allows the creation of interactive websites for user feedback

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Parts of a Web Form

Controls, also known as widgets, are the objects that allow a user to interact with a form

Each data entry control is associated with a data field

Data field: Stores the data values supplied by a user

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Parts of a Web Form (continued 1)

Types of controls

Input boxes to insert text and numeric values

Option/radio buttons to select data values from a predefined set of options

Selection lists to select data values from an extensive list of options

Check boxes to select data values limited to two possibilities, such as “yes” or “no”

Text area boxes to enter text strings that may include several lines of content

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Parts of a Web Form (continued 2)

Types of widgets

Spin boxes to enter integer values confined to a specified range

Slider controls to enter numeric values confined to a specified range

Calendar controls to select date and time values

Color pickers to choose color values

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Parts of a Web Form (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Forms and Server-Based Programs

Field values entered by a user are processed by a program running on the user’s computer or on a web server in a secure location

Example: A web form is used to collect data from a customer for an order and the server program processes the data and handles the billing and delivery

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Forms and Server-Based Programs (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Starting a Web Form

Web forms are marked using the form element

content

</form>

id identifies the form

attributes specify how the form should be processed by the browser

content is the form’s content

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Starting a Web Form (continued)

A form element can be placed anywhere within the body of a page

Forms also can contain page elements such as tables, paragraphs, inline images, and headings

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Interacting with the Web Server

The action, method, and enctype attributes have to be included in a form to specify where and how to send the form data

content

</form>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Interacting with the Web Server (continued 1)

action attribute provides the location of the web server program that processes the form

method attribute specifies how the browser should send form data to the server

enctype attribute specifies how the form data should be encoded as it is sent to the server

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Interacting with the Web Server (continued 2)

Two possible values for method attribute

Get method: Tells the browser to append the form data to the end of the URL specified in the action attribute

The get method is the default method

Post method: Sends the form data in its own separate data stream

The post method is considered to be a more secure form of data transfer

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Interacting with the Web Server (continued 3)

The enctype attribute has three possible values

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Interacting with the Web Server (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Interacting with the Web Server (continued 5)

A script element is an HTML element used to access and run JavaScript programs that will run within the user’s browser

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Field Set

Field set: Groups fields that share a common purpose

Field sets are created using the fieldset element

content

</fieldset>

id identifies the field set

content is the form content within the field set

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Marking a Field Set

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding a Field Set Legend

Legend describes the content of a field set using the legend element

where text is the text of the legend

The legend element contains only text and no nested elements

By default, legends are placed in the top-left corner of the field set box and can be moved to a different location using the CSS positioning styles

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding a Field Set Legend (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Input Boxes

Syntax for the input element

The name attribute provides the name of the data field associated with the control

The id attribute identifies the control in which the user enters the field value

The type attribute indicates the data type of the field

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Input Boxes (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Input Boxes (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Input Types and Virtual Keyboards

Virtual keyboards are software representations of a physical device

Web forms can be made responsive by displaying different virtual keyboards for each input type

Example: An input box for telephone number is more convenient to read with digits displayed prominently on the keyboard

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding Field Labels

To associate a text string with a control, the text string has to be enclosed within the label element

<label for=“id”>label text</label>

id is the id of the control that is associated with the label

label text is the text of the label

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding Field Labels (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Designing a Form Layout

There are two general layouts

Labels are placed directly above the input controls

Labels and controls are placed side-by-side

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining Default Values and Placeholders

The value attribute is used to specify a default field value

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining Default Values and Placeholders (continued 1)

Placeholders: Text strings that appear within a form control, providing a hint about the kind of data that should be entered into a field

They are defined using the placeholder attribute

placeholder=“text”

where text is the text of the placeholder

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining Default Values and Placeholders (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining Default Values and Placeholders (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Entering Date and Time Values

Date and time fields ensure that users enter data in the correct format

Indicated using type attributes: date, time, datetime-local, month, and week

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Selection List

A selection list is a list box that presents users with a group of possible values for the data field

The list is created using the select and option elements

...

</select>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Selection List (continued 1)

name is the name of the data field

value1, value2,… are the possible field values

text1, text2,… are the text of the entries in the selection list that users see on the web form

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Selection List (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Select Attributes

By default, a selection list appears as a drop-down list box

To display a selection list as a scroll box, use the size attribute to the select element

where value is the number of options that the selection list displays at one time

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Select Attributes (continued 1)

By default, selection lists allow only one selection from the list of options

To allow more than one item to be selected, add multiple attribute

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Select Attributes (continued 2)

Two ways for users to select multiple items from a selection list

For non-contiguous selection, press and hold the Ctrl key while making the selections

For contiguous selection, select the first item, press and hold the Shift key, and then select the last item in the range

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Grouping Selection Options

Organize selection list options by placing them in option groups using the optgroup element

</optgroup>

</select>

where label1 is the label for the different groups of options

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Grouping Selection Options (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Option Buttons

Option buttons are also called radio buttons

Unlike selection lists, the options appear as separate controls in the web form

They are created with a group of input elements with a type attribute value of “radio”

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Option Buttons (continued 1)

…

where name is the name of the data field and value1, value2, value3,… are the field values associated with each option

Set an option button to be selected as the default by adding the checked attribute to the input element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Option Buttons (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Check Boxes

Check boxes are designed for fields that record the presence or absence of an object or event

They are created using the input element with the type attribute set to “checkbox”

value attribute contains the value of the field when the check box is checked

type attribute indicates that the input box is a check box

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Check Boxes (continued)

By default, a check box is not checked

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Text Area Box

Text area is created using the textarea element

text

</textarea>

where text is the default value of the data field

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Text Area Box (continued 1)

HTML supports the rows and cols attributes to set the text area size

...

</textarea>

rows attribute specifies the number of lines in the text area box

cols attribute specifies the number of characters per line

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Text Area Box (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Entering Numeric Data

Creating a Spinner Control

Spinner control: Displays an up or down arrow to increase or decrease the field value by a set amount

To create a spinner control, apply the input element using the number data type

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Entering Numeric Data (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Entering Numeric Data (continued 2)

Creating a Range Slider

Slider control: Limits a numeric field to a range of possible values

To create a slider control, apply the range data type in the input element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Entering Numeric Data (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Suggesting Options with Data Lists

Data list: A list of possible data values that a form field can have

Data lists are defined using the datalist element

…

</datalist>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Suggesting Options with Data Lists (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Form Buttons

Form buttons: A type of form control that performs an action

Actions performed

Run a command from a program linked to the web form

Submit the form to a program running on the web server

Reset the form fields to their default values

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Command Button

Command button: Runs a program that affects the content of a page or the actions of a browser

Created using the input element with the type attribute set to button

text is the text that appears on the button

script is the name of the program code that is run when the button is clicked by the user

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Submit and Reset Buttons

Submit button: Submits a form to the server for processing when clicked

Submit button is created using input elements with the type attribute set to “submit” and “reset” respectively

where text is the text string that appears on the button

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Submit and Reset Buttons (continued 1)

Reset button: Resets a form, changing all fields to their default values and deleting any field values that a user has entered

Reset button is created using input elements with the type attribute set to “reset”

where text is the text string that appears on the button

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Submit and Reset Buttons (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Designing a Custom Button

The appearance of a command, submit, and reset button is determined by the browser

For more control over a button’s appearance use the button element

content

</button>

type attribute specifies the button type

content are HTML elements placed within the button

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Validating a Web Form

Validation: Process of ensuring that a user has supplied valid data

Types of validation

Server-side validation – validation occurs on the web server

Client-side validation – validation occurs in the user’s browser

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Identifying Required Values

The first validation test is to verify if data is supplied for all the required data fields

Add the required attribute to the control to identify the required data fields

If a required field is left blank, the browser will not submit the form returning an error message to indicate the unavailability of data

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Validating Based on Data Type

A form fails the validation test if the data values entered into a field do not match the field type

Example:

A data field with the number type will be rejected if nonnumeric data is entered

Fields with email and url types will be rejected if a user provides an invalid e-mail address or text that does not match the format of a URL

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Testing for a Valid Pattern

To test whether a field value follows a valid pattern of characters, test the character string against a regular expression

Regular expression or regex is a concise description of a character pattern

To validate a text value against a regular expression, add the pattern attribute to the input element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Testing for a Valid Pattern (continued)

Example: The value of the custZip field against the regular expression pattern ^\d{5}$

where regular expression ^\d{5}$ represents any string of five numeric characters

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining the Length of the Field Value

The syntax to define the maxlength attribute is <input maxlength=“value” />

where value is the maximum number of characters in the field value

Example:

The maxlength attribute does not distinguish between characters and digits

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Inline Validation

Inline validation: The technique of immediate data validation and reporting of errors

The focus pseudo-class is used to change the display style of fields that currently contain invalid data

Focus: The state in which an element has been clicked by the user, making it the active control on the form

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Inline Validation (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Inline Validation (continued 2)

Example: To create styles for all of the checked option buttons in the form, apply the checked pseudo-class

input[type=”radio”]:checked {

styles

}

styles are the CSS styles applied to checked option buttons

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Pseudo-Classes for Valid and Invalid Data

The valid and invalid pseudo-classes are used to format controls based on whether their field values pass/fail a validation test

Example: To display input elements containing valid data with a light green background, use the following style rule:

input:valid {

background-color: rgb(220, 255, 220);

}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Pseudo-Classes for Valid and Invalid Data (continued 1)

Example: To display input elements containing invalid data with a light red background with focus, use the following style rule:

input:focus:invalid {

background-color: rgb(255, 232, 233);

}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Pseudo-Classes for Valid and Invalid Data (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition