Chapter 10: Form Basics

accesskey attribute

a value of one of the characters on the keyboard will create a hot key that your website visitor can press to move the cursor immediately to a form control. Testing hot keys is crucial.

textarea element

configures a scrolling text box. Begins with <textarea> ends with </textarea>

step attribute

configures a value for the step between values to be other than 1.

max attribute

configures the maximum range value.

min attribute

configures the minimum range value.

form element

contains a form on a web page. Begins with <form> ends with </form>. Can be multiple forms on a web page, but cannot be nested inside each other.

scrolling text box

form control accepts free-form comments, questions, or descriptions. Example: Comments: <br> <textarea name="cm" id="cm" cols="40" rows="2">Enter Comments</textarea>

form

is an HTML element that contains and organizes objects called form controls.

id attribute

creates an identifier that can be used by the label element, anchor element, and CSS selectors.

radio button

form control allows the user to select exactly ONLY one choice from a group of predetermined items. each button in a group is given the same name attribute and a unique value attribute. Buttons with the same name attribute area treated as a group. Example: <input type="radio" name="fav" id="favCH" value="CH"> Google Chrome<br> <input type="radio" name="fav" id="favFF" value="FF"> Firefox<br>

server-side scripting

is a technology in which a server-side script is run on a web server to dynamically generate web pages. Scripting technologies include: PHP, Ruby on Rails, Adobe ColdFusion, Sun JavaServer Pages, and Microsoft.NET.

action attribute

is used on the <form> tag to invoke a server-side script.

direct execution

script is run either by the web server itself or by an extension module to the web server.

for attribute

associates the label with a particular HTML form element. This is more flexible and it does not require and it does not require the text label and the form control to be adjacent. Example: <label for="email">E-mail: </label> <input type="text" name="email" id="email">

name attribute

can be used by client-side scripting and server-side processing.

datalist

can be used to suggest predefined input values to the web page visitor. Configure by using three components: an input element, the datalist element, and one or more option elements. Example: <label for="color">Favorite Color:</label> <input type="text" name="color" id="color" list="colors"> <datalist id="colors"> <option>black</option> <option>red</option> </datalist>

search

form control is similar to the text box and is used to accept a search term. Example: <label for="keyword">Search:</label> <input type="search" name="keyword" id="keyword">

tabindex attribute

if the tab order needs to be changed for a form.

form controls

include text boxes, scrolling text boxes, select lists, radio buttons, check boxes, and buttons. Purpose is to gather information from a web page visitor.

label element

is a container tag that associates a text description with a form control. Helpful to visually challenged individuals using assistive technology to match up the text descriptions on forms with their corresponding form controls. Also benefits individuals without fine motor control. Example: <label>E-mail: <input type="text" name="email" id="email"></label>

privacy policy

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

legend element

provides a text description for the fieldset grouping. Begins with <legend> ends with </legend> <fieldset> <legend>Billing Address</legend> </fieldset>

attribute selector

when you need to configure an element that has a specific attribute value and you would like to avoid creating a new id or class. When coding, type the element name first followed by a set of braces that contain the name and value of the attribute you choose to use for the criteria. Example: input[type="radio"]

required attribute

will cause supporting browsers to perform form validation. It will verify that information has been entered in the text box and display an error message when the condition is not met.

fieldset element

will cause the browser to rend a visual cue, such as an outline or a border, around form elements grouped together within this element. Begins with <fieldset> ends with </fieldset> Example: <fieldset> <label>Street: <input type="text" name="street" id="street" size="54"></label><br><br> </fieldset>

common gateway interface (CGI)

a protocol, or standard method, for a web server to pass a web page user's request to an application program and to accept information to send to the user. Common programming languages are Perl and C.

option element

contains and configures an option item displayed in the select list form control. Begins with <option> ends with </option>

select element

contains and configures the select list form control. Begins with <select> ends with </select>

check box

form control allows the user to select one or more of a group of predetermined items. Example: <input type="checkbox">

color-well

form control displays an interface that offers a color-picker interface to the user. Example: <label for="myColor">Choose a color:</label> <input type="color" name="myColor" id="myColor">

select list

form control is also known by several other names, including select box, drop-down list, drop-down box, and option box. Configured with one select element and multiple option elements. Example: <select size="1" name="favbrowser" id="favbrowser"> <option>Select your favorite browser</option> <option value="Chrome">Chrome</option> <option value="Firefox">Firefox</option> <option value="Edge">Edge</option> </select>

password box

form control is similar to the text box, but it is used to accept information that must be hidden as it is entered. Example: Password: <input type="password" name="pword" id="pword">

url

form control is similar to the text box. It is intended to accept any type of URL or URI. Example: <label for="myWebsite">Suggest a Website:</label> <input type="url" name="myWebsite" id="myWebsite">

telephone number

form control is similar to the text box. Its purpose is to accept a telephone number. Example: <label for="mobile">Mobile Number:</label> <input type="tel" name="mobile" id="mobile">

e-mail address

form control is similar to the text box. Its purpose is to accept information that must be in e-mail format. Example: <label for="myEmail">E-mail:</label> <input type="email" name="myEmail" id="myEmail">

reset button

form control is used to reset the form fields to their initial values. Does not submit the form. Example: <input type="reset">

submit button

form control is used to submit the form. When clicked, it triggers the action method on the <form> tag and causes the browser to send the form data to the web serve. Example: <input type="submit">

slider

form control provides a visual, interactive user interface that accepts numerical information. Example: <input type="range">

hidden field

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

calendar

form control that accepts date- and time-related information. Example: <label for="myDate"> Choose a Date</label> <input type="date" name="myDate" id="myDate">

method attribute

is used on the form tag to indicate the way in which the name and value pairs should be passed to the server. Example: method="post"

input element

is used to configure several different types of form controls. Not coded as a pair of opening and closing tags. It is a stand-alone or void element. Example: E-mail: <input type="text" name="email" id="email">