creating web page forms l.
Skip this Video
Loading SlideShow in 5 Seconds..
Creating Web Page Forms PowerPoint Presentation
Download Presentation
Creating Web Page Forms

Loading in 2 Seconds...

play fullscreen
1 / 43

Creating Web Page Forms - PowerPoint PPT Presentation

  • Uploaded on

Creating Web Page Forms. Objectives. Describe how Web forms can interact with a server-based program Insert a form into a Web page Create and format a form Add different objects to a form Organize fields into field sets Describe how data is sent from a Web form to a server

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Creating Web Page Forms' - elkan

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
  • Describe how Web forms can interact with a server-based program
  • Insert a form into a Web page
  • Create and format a form
  • Add different objects to a form
  • Organize fields into field sets
  • Describe how data is sent from a Web form to a server
  • Understand how to create image fields, hidden fields, and file buttons
  • Apply tab indices and access keys to control elements
introducing web forms
Introducing Web Forms
  • 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
forms and server based programs
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
forms and server based programs5
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 popular languages include:
    • AppleScript - PHP
    • ASP - TCL
    • ColdFusion - the Unix shell
    • C/C++ - Visual Basic
creating the form element
Creating the Form Element
  • Forms are created using the form element, structured as follows:

<form attributes>



Where attributes are the attributes that control how the form is processed and elements are elements places within the form.

creating the form element7
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
creating the form element8
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.

creating input boxes
Creating Input Boxes
  • 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.

creating input boxes10
Creating Input Boxes
  • Input types:


Displays a button that can be clicked to perform an action from a script


Displays a check box


Displays a browse button to locate and select a file


Creates a hidden field, not viewable on the form

creating input boxes11
Creating Input Boxes
  • Input types:


Displays an input image that can be clicked to perform an action from a script


Displays an input box that hides text entered by the use


Displays an option button

creating input boxes12
Creating Input Boxes
  • Input types:


Displays a button that resets the form when clicked


Displays a button that submits the form when clicked


Displays an input box that displays text entered by the user

setting the size of an input box
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.

creating a password field
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” />

creating an input box
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.

working with form labels
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.

creating a selection list
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
modifying the appearance of a selection list
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.

making multiple selections
Making Multiple Selections
  • Add the multiple attribute to the select element to create multiple selections

<select multiple=“multiple”>… </select>

working with option groups
Working with Option Groups
  • Use option groups to organize selection lists into distinct groups.

<select attributes>

<optgroup label=“label1”>



<select attributes>

<optgroup label=“label1”>





creating option buttons
Creating Option buttons
  • Option buttons, or radio buttons allow users to make selections.
    • Unlike selection lists, option buttons only allow the user to select one option at a time.

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

Labels are matched to the id values of the option buttons

creating a field set
Creating a Field Set
  • HTML and XHML allow you to organize option buttons 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




Where fields are the individual fields within a set.

creating a field set24
Creating a Field Set
  • To create a field set, enclose the fields in the following tags:



Where fields are the form fields in the field set. Field sets are

usually displayed in a group box

creating a field set25
Creating a Field Set
  • To add a caption to a field set, add the following tag after the opening <fieldset> tag:


Where text is the text of the field set caption.

creating check boxes
Creating Check Boxes
  • 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” />


<input type=“checkbox” checked />

creating a text area box
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
creating a text area box28
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


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

wrap values
Wrap values
  • Wrap=“off”
  • Wrap=“soft”
  • Wrap=“hard”
working with form buttons
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
creating a command button
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” />

designing a command button
Designing a Command button
  • Use the button element for greater artistic control over the appearance of a button

<button name=“name” id=“id” value=“value” type=“type”>



Where the name and value attributes specify the name of the button

and the value sent to a server-based program, the id attribute

specifies the button’s id, the type attribute specifies the button type,

and the content is page content displayed within the button.

creating a file button
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.
working with hidden fields
Working with Hidden Fields
  • 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” />

working with form attributes
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>

Where url specifies the filename and location of the program that processes

the form and the method attribute specifies how your Web browser sends

data to the server. The enctype attribute specifies the format of the data

stored in the form’s field.

working with form attributes37
Working with Form Attributes
  • The method attribute can have one of two values:
    • Post
    • Get
  • 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”
using the mailto action
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”

enctype=“text/plain”> … </form>

Where e-mail_addressis the e-mail address of the recipient in the form

specifying the tab order
Specifying the Tab Order
  • Users typically navigate through a form with the tab key
  • You can specify an alternate tab order by adding the tabindex attribute to any control element in your form
  • The syntax is as follows:

<input name=“fname” tabindex=“1” />

This syntax assigns the tab index number “1” to the fname field from the registration form

specifying an access key
Specifying an Access Key
  • An access key is a single key typed with the Alt key (Windows) or Control key (Mac), in order to jump to one of the control elements in the form
  • Create an access key by adding the accesskey attribute to any control element
  • Example of creating an access key for the lname field:

<input name=“lname” accesskey=“1” />

tips for creating effective forms
Tips for Creating Effective Forms
  • Label all control elements clearly and concisely
  • Use horizontal lines, tables, and line breaks to separate topical groups from one another
  • Use field sets to organize common groups of fields, especially option buttons
  • Use the tab order to ensure that users will move correctly from one field to another
tips for creating effective forms42
Tips for Creating Effective Forms
  • Use option buttons, check boxes, and selection lists whenever possible to limit a user’s choice of entries, thus reducing the chance of an erroneous data value. Use input boxes only when the field has no predefined list of values.
  • Use selection lists for items with several possible options. Use option buttons for items with few options. Use a check box for each item with only two possible values.
tips for creating effective forms43
Tips for Creating Effective Forms
  • Let users know the correct format for input box text by inserting default text in the appropriate format (for example, insert the text string, “mm/dd/yyyy” in a Date input box to indicate the format for inserting date values
  • Use password fields for sensitive or confidential information (such as passwords)
  • Because form elements differ between browsers, view your form on different browsers and different browser versions to ensure that the form displays correctly in all situations