Transcript Web forms - gozips.uakron.edu

2440: 141
Web Site Administration
Web Forms
Instructor: Joseph Nattey
Introducing Web Forms
 Web forms collect information from clients and pass data
to a server.
 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
Web Forms
2
Introducing Web Forms
 When you create a form,
divide it into topical areas
 The first requests contact
information from the
donor
 In the second, donor
provides payment
information
 Final part is for any
comments the donor has
New Perspectives on HTML
and XHTML, Comprehensive
3
Introducing Web Forms
 Web forms collect information from Web site visitors.
Parts of a Web Form
 Information entered for a form is stored in a field and the
value itself is known as the field value
 Some of the fields are freeform, while other fields are
limited to a set of possible values.
 Control elements such as buttons, boxes, lists and so
on, provide a way of associating a field value with a
particular field
New Perspectives on HTML
and XHTML, Comprehensive
4
Introducing Web Forms
 HTML supports the following control elements:
 input boxes for text and numerical entries
 option buttons also called radio buttons, for selecting a
single option from a predefined list
 selection lists for long lists of options, usually appearing in
a drop-down list box
 check boxes for specifying yes or no
 text areas for extended entries that can include several
lines of text
5
Forms and 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.
6
Forms and Server-Based Programs
 Server-based programs are written in many languages
 The earliest and most commonly used are Common
Gateway Interface (CGI) scripts that are written in Perl.
 Other languages include:
 PHP
 JSP
 ASP
 ASP.Net
 ColdFusion
 Python
 Ruby
Web Forms
7
Creating the Form Element

Forms are created using the form element,
The syntax is:
<form attributes>
elements
</form>
where attributes are the attributes that control
how the form is processed and elements are
elements places within the form.
Web Forms
8
Creating the Form Element
Form attributes usually tell the browser
the location of the server-based
program to be applied to the form’s
data.
 Always specify an id or name for the
form.
 Two attributes are available to identify
the form: id and name.

Web Forms
9
Creating the Form Element

The syntax of the id and name attributes
are as follows:
<form name=“name” id=“id”>…
</form>
where name is the name of the form and id is
the id of the form.
Naming a form is useful for pages that contain multiple forms so
you can differentiate one form from another, and it might be
required for server-based programs that accept form values
Web Forms
10
Working with 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 elements
</form>
Where:



action is used to specify the email address, or the filename and location of the program, that
processes the form
method specifies how your Web browser sends data to the server
enctype specifies the format of the data stored in the form’s field
Web Forms
11
Working with Form Attributes
 The <form> tag’s method attribute can have one of two
values:
 post – sends the form’s data in a separate data stream, allowing the Web
server to receive the data through “standard input”
 get – the default method which appends the form’s data to the end of the
URL specified in the action attribute
 Never use the "get" method to pass sensitive information! (password or
other sensitive information will be visible in the browser's address bar)
 GET is better for non-secure data, like query strings in Google
Web Forms
12
Interacting with a Web Server
 The enctype attribute determines how the form data should be encoded
as it is sent to the server.
13
Using the mailto Action
 The mailto action accesses the user’s own e-mail
program and uses it to mail form information to a
specified e-mail address.
 By-passes the need for server-based programs.
 The syntax is as follows:
<form action=“mailto:e-mail_address” method=“post”>
</form>
Where e-mail_address is the e-mail address of the recipient in the
form.
Web Forms
14
Creating Form Controls
 There are four primary tags used within the <form>
tag to create form controls:
 <input> - the most commonly used tag which creates 10 form controls


The <input> tag’s type attribute is used to set any of the following values for the
form controls: text, password, radio, checkbox, file, image, submit, button,
reset, and hidden
E.g., <input type=“text” />
 <button> - may be used to create 3 out of the 10 <input> controls:
submit, button, and reset
 <select> - displays choices (using the <option> tag) in a drop-down
menu or a scrolling list (selection list)
 <textarea> used to create a text field with multiple lines of data
Web Forms
15
Creating <input> Controls
 The general syntax of <input> elements is as follows:
<input type=“type” name=“name” id=“id” />
Where type specifies the type of input field,
and the name and id attributes provide the
field’s name and id, respectively.
Web Forms
16
Creating Input Boxes
(ex12)
 Html 4 supports 10 different input types
17
Creating Input Boxes
 Html 5 adds 13 new input types
 color, date
 datetime, datetime-local
 email, month
 number, range
 search, tel
 time, url, week
18
(exCD)
Creating an Input Box
 To create an input box, use the following HTML
code:
<input name=“name” id=“id” value=“value”
size=“value” maxlength=“value” />
 where the name and id attributes identify the field,
 the value attribute assigns the field’s default value,
 the size attribute defines the width of the input box in characters, and
 the maxlength attribute specifies the maximum number of characters that
a user can enter into the field.
Web Forms
19
Setting the Size of an Input Box
 By default, an input box displays at 20 characters of text.
 To change the width of an input box, use the size attribute
which is displayed as follows:
<input size=“value” />
Where value is the size of the input box in characters.
Web Forms
20
Setting the Size of an Input Box…
(ex)
<html>
<body>
<form>
Email: <input type="text" name="email" size="35"><br>
PIN: <input type="text" name="pin" maxlength="4" size="4"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Web Forms
21
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” />
Web Forms
22
Creating
a
Password
Field
<html>
<body>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
<p><b>Note:</b> The characters in a password field are masked (shown as
asterisks or circles).</p>
</body>
</html>
Web Forms
23
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.
 You can create a selection list using the <select> tag.
 You can specify each individual selection item using
the <option> tag.
Web Forms
24
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>
Where value is the number of items that the selection list
displays in the form.
Web Forms
25
Modifying the Appearance of a
Selection List…
Web Forms
26
Modifying the Appearance of a Selection
List…
<html>
<body>
<form>
<select size="1">
<option value="camry">Camry</option>
<option value="ford">Ford Fusion</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Web Forms
27
Making Multiple Selections
(ex)
 Add the multiple attribute to the select
element to create multiple selections
<select multiple=“multiple”>
</select>
Web Forms
28
Working with Option Groups
 The <optgroup> is used to group related options in a drop-
down list.
 If you have a long list of options, groups of related options
are easier to handle for a user.
 You can organize the selection list options by placing them in
option groups using the optgroup element.
New Perspectives on HTML
and XHTML, Comprehensive
29
Working with Option Groups
(ex)
 <select>
<optgroup label=“label1”>
<option>text1</option>
<option>text2</option>
</optgroup>
<optgroup label=“label2”>
<option>text1</option>
<option>text2</option>
</optgroup>
</select>
where label1, label2, and so forth are the labels for the different groups of
options.
The text for the label appears in the selection list above each group of items but
is not a selectable item from the list.
New Perspectives on HTML
and XHTML, Comprehensive
30
Creating Option Buttons
 Option buttons, or
radio buttons allow
users to make
selections.
(ex)
All option buttons belonging to the same
field share a common name
 Unlike selection lists,
option buttons only allow
the user to select one
option at a time.
Web Forms
Labels are matched to the id values
of the option buttons
31
Creating Check Boxes
(ex)
 To create a check box, use:
<input type=“checkbox” name=“name” id=“id”value=“value” />
Where the name and id attributes identify the check box field and
the value attribute specifies the value sent to the server if the check
box is selected.
 To specify that a check box be selected by default,
use the checked attribute as follows:
<input type=“checkbox” checked=“checked” />
or
<input type=“checkbox” checked />
Web Forms
32
Creating a Text Area Box
 Text area boxes allow users to enter comments about the
products they’ve purchased.
 An input box would be too small to accommodate the
length of text for this use.
Web Forms
33
Creating a Text Area Box
 To create a text area box, use the textarea element:
<textarea name=“name” id=“id” rows=“value”
cols=“value”>
default text
</textarea>
Where the rows and cols attributes define the
dimensions of the input box and the rows attribute
indicates the number of lines in the input box.
Web Forms
34
Creating a Text Area Box
Web Forms
(ex)
35
Working with Form Buttons
 Buttons are a type of control element that performs an
action.
 Types of buttons:
 Command button
 Submit button
 Reset button
 File button
Web Forms
36
Creating a Command Button
 Command buttons are created using the <input> tag:
<input type=“button” 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” />
Web Forms
37
Designing a Custom Button
(ex)
 The <button> tag defines a clickable button.
 Inside a <button> element you can put content, like text or
images.
 Use the button element for greater artistic control over the
appearance of a button.
<button name=“name” type=“text”>
content
</button>
where the type attribute specifies the button type (submit,
reset, or button—for creating a command button) and content is
page elements displayed within the button
38
Creating a File Button
 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.
Web Forms
39
Working with Hidden Fields
(ex)
 Hidden fields are added to a form, but not
displayed in the Web page. The syntax is as
follows:
<input type=“hidden” name=“name” id=“id”
value=“value” />
Web Forms
40
Working with Form Labels
 You can also expressly link a label with an associated
text element for scripting purposes.
 The syntax for creating a form label is as follows:
<label for=“id”>label text</label>
Where id is the value of the id attribute for a field on the
form, and label text is the text of the label.
Web Forms
41
Web Form Example
<html>
<head>
<title> Web Forms </title>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” name=“client” />
<input type=“submit” value=“Send” />
<input type=“reset” value=“Clear” />
</form>
</body>
</html>
Web Forms
42
Web Form Example
<html>
<body>
<form action="demo_form.asp">
Email: <input type="text" name="email" /><br />
Pin: <input type="text" name="pin" maxlength="4" /><br />
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>
<p>Click on the reset button to reset the form.</p>
</body>
</html>
Web Forms
43