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:[email protected]” 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”