Chapter 10 - Forms

reset button

Deletes entered values and resets the form fields to their initial values. A reset button does not submit the form. Example: <input type="reset"> Note: experts recommend not including reset buttons in forms because they're rarely useful and are instead more likely to frustrate users who click them by mistake.

datalist element

Enables you to present the user with a drop-down list of options to select from. Example: <input type="text" list="browsers"> <datalist id="browsers"> <option value="Firefox"> <option value="IE"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

textarea

Form control accepts free-form comments, questions, or descriptions. The textarea element configures a scrolling text box. Example: <textarea name="cm" id="cm" cols="40" rows="2">Enter comments</textarea>

select list

Form control known by several other names, including select box, drop-down list, drop-down box, and option box. A select list is configured with one select element and multiple option elements. Example: <label for="cars">Choose a car:</label> <select name="cars" id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

hidden field

Form control stores text or numeric information, but it is not visible in the browser viewport. Hidden fields can be accessed by both client-side and server-side scripting. Example: <input type="hidden" name="sendto" id="sendto" value="[email protected]">

radio button

Form control that allows the user to select exactly one (and only one) choice from a group of predetermined items. Example: <input type="radio" name="fav" id="favCH" value="CH"> Google Chrome<br> <input type="radio" name="fav" id="favFF" value="FF"> Firefox<br> <input type="radio" name="fav" id="favME" value="ME"> Microsoft Edge<br> Notice that all the name attributes have the same value: fav. Radio buttons with the same name attribute are treated as a group by the browser. Each radio button in the same group is typically configured with a unique value attribute.

submit button

Form control used to submit the form. Example: <input type="submit">

tabindex attribute

Modifies the default tab order by assigning a numeric value

required attribute

Must have a value, cannot be left empty; causes supporting browsers to perform form validation

password box

Select the type of form control that "disguises" the characters that are typed. Example: <input type="password" name="pword" id="pword">

method="post"

The <form> element attribute and value specify that the browser will send data to the Web server location specified by a URL. The data is not appended to the URL.

HTML5 added form controls

e-mail addresses, URLs, dates, times, numbers, and color selection

form id

included for use with Cascading Style Sheets (CSS) and client-side scripting. The value of the id attribute should be unique to the entire web page document that contains the form.

form name attribute

specifies the name of a form, and is used to reference elements in a JavaScript, or to reference form data after a form is submitted.

standard HTML form controls

text boxes, scrolling text boxes, select lists, radio buttons, check boxes, and buttons

reset button common attributes

type and value

submit button common attributes

type and value

The two main components of a form

1. The HTML form itself, which is the web page user interface. 2. The server-side processing, which works with the form data and sends e-mail, writes to a text file, updates a database, or performs some other type of processing on the server.

form element (html)

<form name="order" method="post" id="order" action="demo.php"> . . . form controls go here . . . </form>

input element

A Web form control used to mark elements in which data can be entered. Example: <input type="text" name="email" id="email">

check box

A form control allows the user to select one or more of a group of predetermined items. Example: <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> The only supported common attribute is checked.

Server-side scripting

A technology in which a server-side script is run on a web server to dynamically generate web pages. Examples of server-side scripting technologies include PHP, Ruby on Rails, Adobe ColdFusion, Sun JavaServer Pages, and Microsoft.NET. Server-side scripting differs from CGI in that it uses direct execution—the script is run either by the web server itself or by an extension module to the web server.

fieldset element

An HTML element that marks a group of control elements and data fields, structured as: <fieldset> ... form stuff ... </fieldset>

legend element

An HTML element that marks a legend for a Web form field set. Beginning with HTML 5.2, the description can also include heading tags. Example: <fieldset> <legend>Billing Address</legend> <label>Street: <input type="text" name="street" id="street" size="54"></label><br><br> <label>City: <input type="text" name="city" id="city"> </label> <label>State: <input type="text" name="state" id="state" maxlength="2" size="5"></label> <label>Zip: <input type="text" name="zip" id="zip" maxlength="5" size="5"></label> </fieldset>

label element

An HTML element that marks a text description for a Web form control. There are two construction methods: 1) Place the label element as a container around both the text description and the HTML form element: <label>E-mail: <input type="text" name="email" id="email"></label> 2) Use the for attribute to associate the label with a particular HTML form element. This is more flexible and it does not require the text label and the form control to be adjacent: <label for="email">E-mail: </label> <input type="text" name="email" id="email"> Notice that the value of the for attribute on the label element is the same as the value of the id attribute on the input element. This creates an association between the text label and the form control. The label element does not display on the web page—it works behind the scenes to provide for accessibility.

option element

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

What happens in browsers that do not support a form control?

Browsers that do not support an input type will display it as a text box and ignore unsupported attributes or elements.

CSS attribute selector

CSS selector configured with both an element name and an attribute value; use to configure an element that has a specific attribute value, and you would like to avoid creating a new id or class. Example: input[type="radio"] selector will configure styles for the radio button form controls but will not configure styles for other input elements.

CGI

Common Gateway Interface - CGI is a protocol, or standard method, for a web server to pass a web page user's request (which is typically initiated through the use of a form) to an application program and to accept information to send to the user.

method attribute

Contains the method of sending the form data: either POST or GET. The W3C recommends the method="post" method.

accesskey attribute

Creates a "hot-key" combination to place the focus on the component by assigning a value of a keyboard letter

method="get"

Data form is appended to the URL that is sent to the Web server location.

Difference between select and datalist

Think of it as the difference between a requirement and a suggestion. For the select element, the user is required to select one of the options you've given. For the datalist element, it is suggested that the user select one of the options you've given, but he can actually enter anything he wants in the input.

What is standard practice for form name and id?

Typically, the values assigned to the name and id attributes on a particular form element are the same.

action attribute

URL of the server-side script. Used on the form tag to indicate the way in which the name and value pairs should be passed to the server.

form

an HTML element that contains and organizes objects called form controls—such as text boxes, check boxes, and buttons—that can accept information from website visitors

form controls

devices for inputting data, such as text boxes, list arrows, or check boxes