Web Design Chapter 9

How would you configure a form with the name attribute set to the value "order", using the post method and invoking a script called demo.php on your server?

<form name="order" method="post" id="order" action="demo.php">

How would you create a hidden input control with the name attribute set to "sendto" and the value attribute set to an e-mail address?

<input type="hidden" name="sendto" id="sendto" value="[email protected]">

How would you use an image called login.gif as an image button?

<input type="image" src="login.gif" alt="Login Button">

Radio Button

Allows the user to select exactly once choice from a group of predetermined items. Configured with <input type="radio">

Option Element

An HTML element that marks an option from a selection list.

Form

An HTML element. Contains and organizes objects called form controls, including text boxes, check boxes, and buttons, that can accept information from website visitors. Purpose is to gather information.

Image Button

An image used in place of the standard submit button. Configured with <input type="image">

<input type="text">

Configures a text box

Form Element

Contains a form on a web page.

Password Box

Form control similar to textbox. Used to accept information that must be hidden as it is entered, such as a password. Configured with <input type="password" name="pword" id="pword">

Telephone Number

Form control that accepts a telephone number. Configured with <image type="tel"> . Browsers that don't support this will render this form control as a text box.

Scrolling text box

Form control that accepts free-form comments, questions, or descriptions

URL Input

Form control that accepts information that must be typed as a valid URL or URI. <input type="url"> configures a URL input form control.

E-mail address input

Form control that accepts information that must be typed in e-mail format.

Check Box

Form control that allows the user to select one or more of a group of predetermined items. Configured with <input type="checkbox">

Spinner

Form control that displays an interface that accepts numerical information and provides feedback to the user. Configured with <input type="number"> Only browsers that support this will display this. Other browsers will render this form as a text box. Min attribute is used to configure minimum range value and the max attribute is used to configure maximum range value. Step attribute is used to configure a value for the incremental steps between values to be other than one.

Color-Well

Form control that displays an interface that offers a color-picker interface to the user. Configured with <input type="color">

Select List

Form control that is a drop-down box.

Slider

Form control that provides a visual interactive user interface that accepts numerical information. Configured with <input type="range"> Default range is from 1 to 100. Min attribute is used to configure minimum range value and the max attribute is used to configure maximum range value. Step attribute is used to configure a value for the incremental steps between values to be other than one.

Calendar Form Control

Form control used to accept date and time-related information. Uses the input element and configures the type attribute to specify a date or time control.

Privacy Policy

Guidelines that you develop to protect the privacy of your visitors' information.

Form Controls

Objects that accept information. Ex: text boxes, scrolling text boxes, select lists, radio buttons, check boxes, and buttons.

Common Gateway Interface (CGI)

Protocol used to provide functionality. Standard method for a web server to pass a web page user's request.

Legend Element

Provides a text description for the fieldset grouping. Configured with <legend> and </legend>

Time Type Attribute Value

Purpose: Time without time zone information Format: HH:MM:SS

Datetime Type Attribute Value

Purpose: To configure a date and time with time zone information. Format: YYYY-MM-DDTHH:MM:SS-##:##Z

Datetime-local Type Attribute Value

Purpose: To configure a date and time without time zone information Format: YYYY-MM-DDTHH:MM:SS

Month Type Attribute Value

Purpose: Year and month Format: YYYY-MM

Week Type Attribute Value

Purpose: Year and week Format: YYYY-W##, where ## represents the week in the year

Date Type Attribute Value

Purpose: to configure a date Format: YYYY-MM-DD

Fieldset Element

Technique used to create a more visually pleasing form to a group of elements. Causes the browser to render an outline or border around form elements grouped together. Configured with <fieldset> and </fieldset>

Search Field

Used to accept a search term. Configured with <input type="search"> . Browsers that don't support this will render this form control as a text box.

Button Element

Used to configure image and blocks of any text as the selectable area that can submit or reset a form. Configured with <button> and </button>

Reset Button

Used to reset the form fields to their initial values. Doesn't submit the form. Configured with <input type="reset">

Submit Button

Used to submit form. Once clicked, the action method on the form element is triggered causing the browser to send the form data to the web server. Configured with <input type="submit">

Type Attribute (Check Box Attribute)

Value: Checkbox Purpose: configures a check box

List Attribute (Text Box Attribute)

Value: Datalist element id value Purpose: associates the form control with a datalist element

Value Attribute

Value: Text or numeric characters Purpose: Assigns an initial value to the text box that is displayed by the browser; accepts information typed into the box.

Value Attribute (Submit and Reset Buttons)

Value: Text or numeric characters Purpose: Configures text displayed on the button; a submit button displays the text "Submit Query" by default; a reset button displays the text "Reset" by default.

Accesskey Attribute (Submit and Reset Buttons)

Value: Text or numeric characters Purpose: configures a hot key for the form control

Action Attribute (form element)

Value: URL or file name/path Purpose: indicates where to send the form information when the form is submitted

id attribute

Value: alphanumeric, no spaces Purpose: Optional; provides a unique identifier for the form

Name Attribute

Value: alphanumeric, no spaces Purpose: optional; names the form so that it can be easily accessed by client-side scripting languages, such as JavaScript. To edit and verify the form information before the server-side processing is invoked

Autofocus Attribute (Text Box Attribute)

Value: autofocus Purpose: browser places cursor in the form control and sets the focus

Alt Attribute (Button Element Attribute)

Value: brief text description of image Purpose: provides accessibility to visitors who are unable to view the image

Checked Attribute (Check Box Attribute)

Value: checked Purpose: configures the check box to be checked by default when displayed by the browser

Disabled Attribute (Text Box Attribute)

Value: disabled Purpose: form control is disabled

Method Attribute (form element)

Value: get, post Purpose: get - default value; the value of get causes the form data to be appended to the URL and sent to the web server post - More private. Transmits the form data in the body of the HTTP response; this method is preferred by the W3C

Wrap Attribute (Scrolling Text Box Attribute)

Value: hard or soft Purpose: configures the line breaks within the information entered

Type Attribute (Hidden Input Control Attribute)

Value: hidden Purpose: configures a hidden element

Accesskey Attribute (Text Box Attribute)

Value: keyboard character Purpose: configures a hot key for the form control

Multiple Attribute (Select Element Attribute)

Value: multiple Purpose: Configures a select list to accept more than one choice; by default, only one choice can be made from a select list.

Tabindex Attribute

Value: numeric value Purpose: Configures the tab order of the form control

Size Attribute (Text Box Attribute)

Value: numeric value Purpose: Configures the width of the text box as displayed by the browser; if size is omitted, then browser displays text box with its own default size

Maxlength Attribute (Text Box Attribute)

Value: numeric value Purpose: configures the maximum length of data (characters) accepted by the text box

Size Attribute (Select Element Attribute)

Value: numeric value Purpose: configures the number of choices the browser will display; scroll bars are automatically added by the browser if the number of options exceeds the space allowed.

Cols Attribute (Scrolling Text Box Attribute)

Value: numeric value Purpose: configures width in character columns of the scrolling text box. If omitted, the browser displays the scrolling text box with its own default height

Autocomplete Attribute

Value: on, off Purpose: on - default value; browser will use autocomplete to fill form fields off - browser will not use autocomplete to fill form fields

Type Attribute (Radio Button Attribute)

Value: radio Purpose: configures a radio button

Readonly Attribute

Value: readonly Purpose: Form control is for display; cannot be edited

Required Attribute (Text Box Attribute)

Value: required Purpose: browser verifies entry of information before submitting the form

Selected Attribute (Option Element Attribute)

Value: selected Purpose: configures an option to be initially selected when displayed by a browser.

Type Attribute (Submit and Reset Buttons)

Value: submit, reset Purpose: configures a submit or reset button.

Type Attribute (Button Element Attribute)

Value: submit, reset, button Purpose: submit - functions as a submit button reset - functions as a reset button button - functions as a button

Type Attribute (Text Box Attribute)

Value: text Purpose: Configures a text box

Value Attribute (Button Element Attribute)

Value: text or numeric characters Purpose: Value given to a form element that is passed to the form handler

Placeholder Attribute (Text Box Attribute)

Value: text or numeric characters Purpose: brief information intended to assist the user

Input Element

a stand-alone tag that is used to configure several different types of form controls

Server-side scripting

a technology by which a server-side script is run on a web server to dynamically generate web pages. Uses direct execution.

Textarea Element

configures a scrolling text box

Label Element

container tag that associates a text description with a form control

Select Element

contains and configures the select list form control

Datalist

form/input tag: specifies a list of pre-defined options for input controls

<option>

specifies beginning of option item

<textarea>

specifies beginning of scrolling textbox

<select>

specifies beginning of select list

</option>

specifies end of option item

</textarea>

specifies end of scrolling textbox

</select>

specifies end of select list

<form>

specifies the beginning of a form area

</form>

specifies the end of a form area

Hidden Input Control

stores text or numeric information, but it is not visible in the browser viewport. Configured with <input type="hidden">