Chapter 9 - Forms Flashcards
two parts to a working form
the form you see on the page itself, an application or script on the server that processes the information collected by the form and returns an appropriate response
form controls
buttons, input fields, and drop down menus used to collect information from the user
submit
submitting a form for processing
<form>...</form>
interactive form
action attribute
provides the location (URL) of the application or script that will be used to process the form
six technologies that can process web forms
PHP, Microsoft ASP, Microsoft’s ASP.NET, Ruby on Rails, JavaServer Pages, Python
two ways to get your forms to work if you’re not a programmer
use hosting plan goodies, hire a programmer
method attribute
specifies how the information should be sent to the server
two methods for sending encoded data to the server
POST, GET
GET method
the encoded form gets tacked right onto the URL sent to the server; appropriate if the form submission performs an action, such as deleting something or adding data to a database, because if the user goes back, it gets submitted again; character limit
POST method
the browser sends a separate server request containing some special headers followed by the data; only the server sees the content of the request, so this is the best method for sending secure information such as a home address or other personal information; also preferable for sending a lot of data; no character limit
name attribute
provides the variable name for the control
variable
one bit of information from a user
value (content)
the data entered by the user
input element
single line of text
textarea element
multiple lines
<input></input>
single-line text-entry control
name attribute
required for indicating the variable name
value attribute
specifies default text that appears in the field when the form is closed
placeholder attribute
provides a hint of what to type in the field
maxlength attribute
set a maximum character limit
minlength
set a minimum character limit
<textarea>...</textarea>
multiline text-entry control
<input></input>
password text control
<input></input>
search field
<input></input>
email address
<input></input>
telephone number
<input></input>
location (URL)
<datalist>...</datalist>
drop-down menu input
<input></input>
submits the form data to the server
<input></input>
resets the form controls to their default settings
<input></input>
replace the submit button with an image of your choice
<input></input>
creates a button that can be customized with JavaScript
<button>…</button>
flexible element for creating custom buttons similar to those created with the input element
<input></input>
radio button (select one)
<input></input>
checkbox button (select several)
minimized
shortened attribute that stands for a more redundant longer version of the attribute
<select…</select>
menu control
<option>...</option>
an option within a menu
<optgroup>...</optgroup>
a logical grouping of options within a menu
drop-down menu (pull-down menu)
only one item can be selected
multiple attribute
allows users to make more than one selection from the scrolling list
<input></input>
file selection field
<input></input>
hidden control field
<input></input>
date input control
<input></input>
time input control
<input></input>
date/time control
<input></input>
specifies a month in a year
<input></input>
specifies a particular week in a year
<input></input>
number input
<input></input>
slider input
<input></input>
color picker
<progress>...</progress>
indicates the state of an ongoing process
<meter>...</meter>
represents a measurement within a range
<output>...</output>
calculated output value
<label>…</label>
attaches information to form controls
implicit association
nests the control and its description within a label element
explicit association
matches the label with the control’s id reference
<fieldset>...</fieldset>
groups related controls and labels
<legend>...</legend>
assigns a caption to a fieldset
Decide whether each of these forms should be sent via the GET or POST method: A form for accessing your bank account online
POST
Decide whether each of these forms should be sent via the GET or POST method: A form for sending t-shirt artwork to the printer
POST
Decide whether each of these forms should be sent via the GET or POST method: A form for searching archived articles
GET
Decide whether each of these forms should be sent via the GET or POST method: A form for collecting long essay entries
POST
Which form control element is best suited for the following tasks? Choose your astrological sign from 12 signs.
<select></select>
Which form control element is best suited for the following tasks? Indicate whether you have a history of heart disease (yes or no).
<input></input>
Which form control element is best suited for the following tasks? Write up a book review.
<textarea>
</textarea>
Which form control element is best suited for the following tasks? Select your favorite ice cream flavors from a list of eight flavors.
<input></input>
Which form control element is best suited for the following tasks? Select your favorite ice cream flavors from a list of 25 flavors.
<select></select>
Each of these markup examples contains an error. Can you spot it? <checkbox></checkbox>
checkbox is not an element name, it is the value of the type attribute in the input element
Each of these markup examples contains an error. Can you spot it? <select> <option> <option> <option> </select></option></option></option></select>
the option element is not empty; it should contain the value for each option (for example, <option>Orange</option>).
Each of these markup examples contains an error. Can you spot it? <input></input>
the required name attribute is missing
Each of these markup examples contains an error. Can you spot it? <textarea>Your story.</textarea>
the width and height of a text area are specified with the cols and rows attributes, respectively
