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">
