1

Creating Web Forms in HTML

• Web forms collect information from customers • Web forms include different control elements

including:– Input boxes– Selection lists– Drop-down lists boxes– Option buttons or radio buttons– Check boxes– Group boxes– Text areas– Form buttons

2

Forms Interact with Server-Based Programs

• While HTML supports the creation of forms, it does not include tools to process the information

• The information can be processed through a program running on a Web server

• The earliest and most commonly used are Common Gateway Interface (CGI) scripts that are written in perl

• Other popular languages include:– Python - PHP– ASP - Java/ JSP– ColdFusion - the

Unix shell– C/C++ - Visual Basic

3

Creating the Form Element

• Forms are created using the form element, created as follows:

<form name=“name” id=“id”>input elements

</form>

- elements are elements places within the form.- name is the name of the form and id is the id of

the form. They should have the same value.

4

Creating Input Elements Inside a Form

• A list of input elements go inside the form tags.

• The general syntax of input elements is as follows:<input type=“type” name=“name” id=“id”/>

- type specifies the type of input field,

- name and id are the field’s name and id.

5

Input Types

6

Creating a Text Input Field

• To create a text input field:<input type=“text” name=“name” id=“id” value=“value” size=“value” maxlength=“value’ />

name and id identify the field,

value assigns the field’s default value,

size defines the width of the input box in characters,

maxlength specifies the maximum number of

characters that a user can enter into the field.

7

Adding a Form Label• You can expressly link a label with an associated

input element for scripting purposes.

• The syntax for creating a form label is as follows:<label for=“id”>label text</label>

id is the value of the id attribute for a field on the formlabel text is the text of the label

8

Creating a Password Field

• A password field is an input box where characters typed by the user are displayed as bullets or asterisks to protect private or sensitive information on a Web site

• The syntax for creating a Password field is as follows:

<input type=“password” />

9

Creating Hidden Fields

• Hidden fields are added to a form, but not displayed in the Web page. They are used to pass information to the server script that the user need not enter. The syntax is as follows: <input type=“hidden” name=“name” id=“id” value=“value” />

10

Creating Option Buttons• Option buttons, or radio buttons allow users to make selections (only

one button is selected at a time).

• To create a radio button, use: <input type=“radio” name=“name” id=“id” value=“value” />

name and id attributes identify the fieldvalue is what’s sent to the server if the radio button is selected

All option buttons belonging to the same field share a common name

Labels are matched to the id values of the option buttons

11

Creating Check Boxes

• To create a check box, use:<input type=“checkbox” name=“name” id=“id” value=“value” />

name and id attributes identify the field

value is what’s sent to the server if the

check box is selected

• To specify that a check box (or radio button) be selected by default, use the checked attribute as follows:

<input type=“checkbox” checked=“checked” />

12

Creating Form Buttons

• File buttons are used to select files so that their contents can be submitted for processing to a program. <input type=“file” value=“text” />

• Submit buttons submit forms to the server for processing when clicked. Syntax is as follows:<input type=“submit” value=“text” />

• Reset buttons reset forms to their original (default) values. Syntax is as follows:<input type=“reset” value=“text” />

• Command buttons are useful for user-defined actions:<input type=“button” value=“text” />

• Image buttons let you use an image as a button:<input type=“image” src=“url” />

13

How a File Button Behaves

• File buttons are used to select files so that their contents can be submitted for processing to a program.

• The Web page then only displays the file’s location, not the file’s contents.

14

Designing Your Own Custom Buttons

• Use the button tag for greater artistic control over the appearance of a button<button name=“name” id=“id” value=“value” type=“type”>

content</button>

content is the HTML that displays the button.

15

Creating a Selection List

• A selection list is a list box from which a user selects a particular value or set of values– Selection lists are useful when there are a fixed

set of possible responses from the user• <select name=“list” id=“list”>

<option>Choice1</option></select>

• Add the multiple attribute to the select

element to create multiple selections. Add the selected attribute to the option element to create a default preselected item.<select … multiple=“multiple”><option … selected=“selected”>

16

Modifying the Appearance of a Selection List

• You can change the number of options displayed in the selection list by modifying the size attribute. The syntax is as follows:

<select … size= “value”>… </select>

17

Creating Option Groups in Selection Lists

• Use option groups to organize selection lists into distinct groups.

<select attributes><optgroup label=“label1”>

<option>itema1</option><option>itema2</option>

…

<optgroup label=“label1”><option>itema1</option><option>itema2</option>

…</optgroup>

…</select>

18

Creating Text Area Boxes

• Text areas are good for long, multi-line text input:

<textarea name=“name” id=“id” rows=“value”cols=“value”> default text </textarea>

rows and cols define the dimensions of the input box and the rows attribute indicates the number of lines

19

Additional Data Types in HTML5

Example:

Some New HTML5 Attributes

• placeholder – hint for how the input should look.

• autocomplete – currently only works in Firefox and Opera

• required – syntax is required = “required”

• pattern – used to require input in the format of a regular expression

Example:

21

Organizing Input Elements into a Field Set

• HTML and XHML allow you to organize input elements into a group of fields called field sets Most browsers place a group box around a field set to indicate that the fields belong to a common group

<fieldset id=“idname”>

fields </fieldset>fields are the individual fields within a

set.

• To add a caption to a field set, add the following tag after the opening <fieldset> tag:

<legend>text</legend>

22

Some Important Form Attributes

• After adding the elements to your form, you’ll need to specify where to send the form data and how to send it. Use the following attributes:

<form action=“url” method=“type” enctype=“type”>… </form>

- action specifies the filename and location of the program that processes the form - method attribute specifies how your Web browser sends data to the server. - enctype attribute specifies the format of the data stored in the form’s field.

The default enctype is the valueapplication/x-www-form-urlencoded.

23

The Action Attribute in a Form• The action attribute indicates what

program to run when the form is submitted:

<form action=“http://www.lh.org/cgi-bin/donate” method=“post”

id=“donateform”> … </form>

• The mailto action is a special action that accesses the user’s own e-mail program for mailing form information to a specified e-mail address:

<form action=“mailto:adavis@langear.com” method=“post” id=“donateform”> … </form>

24

The Method Attribute in a Form

• The method attribute can have one of two values:- The get method is the default; get appends the form data to the

end of the URL specified in the action attribute

– The post method sends form data in a separate data stream, allowing the Web server to receive the data through “standard input”