Forms for HTML

Reading

Basics

• Content: one or more text-input boxes, clickable buttons (or images), multiple choice checkboxes or radio buttons, pull-down menus, multiline text areas, and even image maps.
• A form usually also includes regular body content, e.g., text to explain how to fill out the form.
• Once a user fills in a form, he/she clicks a "Submit" button, which sends the form data (all the user-supplied values) to the server.
• The server passes data to a supporting program or application that processes the information and creates a reply.
• Reply to user may be simply a "Thank you" or a prompt to fill in missing fields.

The <form> Tag

• Form elements treated like small images within text — i.e., any surrounding text will flow around the form element.
• No special layout rules for form elements, so use other HTML elements like tables and style sheets to control appearance.
• Must define two special form attributes:
  1. One providing the name of the processing server.
  2. The method by which parameters sent to the server.
• Can also choose encoding of parameters.

The action attribute

• Required attribute.
• Gives the URL of the application that is to receive the form's data.
• If there is no application, the value of the action attribute is the empty string ("").
• Best to use CGI scripts (for the action) to process a form — use "mailto:" only if all else fails.
  • Loss of security when mailing form data.
  • Data may arrive in a form difficult to read unless the encoding type text/plain is used (see enctype attribute below for information on encoding type).
• Most webmasters keep form-processing applications in the directory cgi/bin (stands for Common Gateway Interface-binaries).

The method attribute

• When the Submit button pressed, the form's data is encoded into a query string, which is then sent to the server for processing.
• The method attribute sets the method by which the browser sends the form's data to the server.
• Two methods: post and get.
• post
  • Data sent in two steps.
    1. Form-processing server specified in the action attribute contacted.
    2. Data sent in a separate transmission.
  • On server side: post-style applications expected to read in parameters from a standard location, then begin execution.
  • The length of the query string is passed through the environment variable CONTENT_LENGTH.
  • Use for forms with many fields or long text fields (since there is no length limitation), or if security is an issue.
• get
  • The default value for the method attribute (i.e., if the method attribute is omitted, get will be used).
  • Contacts form-processing server and sends form data in a single step.
  • The browser appends the query string to the URL of the processing program.
  • Data separated from the URL by a question mark, enabling server to easily find the beginning of the string.
  • Server removes the query string from the URL and places it in the environment variable QUERY_STRING.
  • Use get for small forms with a few short lines or if you are inexperienced at writing server-side form applications.
  • Use get to be able to pass parameters to the application from outside of the form. Since get obtains parameters from the action URL, any parameter-value pairs may be passed.
  • Be careful passing parameters explicitly — the ampersand problem. An ampersand indicates character entity (or a new parameter-value pair), so to invoke a form with the desired parameter via an <a> tag, replace the ampersand by its character entity equivalent.

The enctype attribute

• Encodes the form's data before passing it to the server so that it does not become corrupted.
• Options: multipart/form-data, text/plain.
• Standard encoding format: application/x-www-form-urlencoded
  • Converts " " to "+", nonalphanumerics into % plus two hexadecimal digits that are the ASCII code for the character, line breaks into %0D%0A.
  • Includes a name for each field in the form.
  • For fields with more than one value, values separated by ampersands.
• multipart/form-data
  • Used for forms with file-selection fields for upload by user.
  • Encapsulates the fields in the form as several parts of a single MIME-compatible (Multipurpose Internet Mail Extension) compound document.
  • Gives each field its own section in the resulting file, set off by standard delimiter.
  • Each section with one or more header lines defining the name of the field, followed by one or more lines defining the value.
  • No character conversions or encoding within transmitted data.
  • Only used when the method attribute set to post.
• text/plain
  • Used in conjunction with "mailto:" in the URL in the action attribute.
  • Used to send forms to an e-mail address.
  • Each element placed on a single line, with the field name and value separated by an equal sign.
  • Only carriage return and line feed characters in multiline text input areas are encoded.

Google

The <input />Tag

• Used to define form controls, e.g., text fields, multiple choice lists(checkboxes and radio buttons), clickable images, submission and reset buttons.
• type and name attributes required.
• Other attributes may be required, depending on the type.
• type: type of control (e.g., text, button, radio, etc.).
• name (of field): used during the form-submission process to the server.
• Recommendation: choose names that consist only of letters and numbers, with underlines representing spaces.

Text Fields in Forms

Four types: conventional, masked for security, a field that names a file to be transmitted, and a multi-line text field.

• Conventional text fields
  • Value of the type is text.
  • Entry field appears as an empty box on one line and accepts one line of input, which becomes the value of the parameter when the user submits the form to the server.
  • Can dictate the width, in characters, of the display (via the size attribute) and the maximum number of characters to accept from the user (via the maxlength attribute).
  • maxlength>size: text scrolls back and forth in text entry box.
  • maxlength<size: extra blank space in text entry box.
  • Default value of size browser dependent.
  • maxlength unlimited.
  • Use the value attribute to specify an initial default value for the field.
  • Example:
    Student ID: <input type="text" name="student_id" size="9" maxlength="9" /><br />
Major: <input type="text" name="major" size="20" maxlength="32" value="math" />
    appears as:
    Student ID:
    Major:
• Masked text controls
  • Value of the type attribute is password.
  • Characters that the user types in don't appear on screen (usu. appear as asterisks).
  • Information transmitted in unencrypted form, however.
  • Example:
    Please enter your credit card number:<br />
<input type="password" name="credit_no" size="16" maxlength="16" />
    appears as:
    Please enter your credit card number:
    
• File selection controls
  • Lets user select a file stored on their computer and send it to the server when they submit the form.
  • Browser presents file-selection form control to the user like other text fields, accompanied by a button labeled "Browse" on the right hand side.
  • User either types the pathname or uses "Browse" to select it.
  • Default size is 20 characters.
  • Required: enctype of the form set to "multipart/form-data" and method attribute set to post.

Checkboxes

• Allows user to select and deselect items.
• May be grouped to create a set of choices, any of which may be selected by user.
• type attribute set to checkbox.
• name, value attributes required.
• If an element is selected, its value is returned; otherwise it is not.
• Use checked attribute to display a default checked box and include the value when submitting the form, unless the user unchecks the box.
• Example:
  <form action="parseform.cgi" method="get">
<p>
What class(es) are you taking?
</p>
<p>
<input type="checkbox" name="class" value="p20A" />PIC 20A <br />
<input type="checkbox" name="class" value="p10B" />PIC 10B <br />
<input type="checkbox" name="class" value="p40A" checked="checked" /> PIC 40A </p>
</form>
  appears as:
  

  What class(es) are you taking?

  PIC 20A
  PIC 10B
  PIC 40A

Radio Buttons

• Similar to checkboxes, but only one in the group may be selected by the user.
• type attribute set to radio.
• name, value attributes required.
• Buttons with the same name are part of a group.
• May initially check one via the checked attribute.
• Radio buttons should appear in groups of 2 or more.
• Each button should get a different value.
• Example:
  <form action="parseform.cgi" method="get">
<p>
What is your favorite color?
</p>
<p>
<input type="radio" name="color" value="red" />Red<br />
<input type="radio" checked="checked" name="color" value="blue" />Blue <br />
<input type="radio" name="color" value="green" />Green <br />
<input type="radio" name="color" value="yellow" />Yellow
</p>
</form>
  appears as:
  

  What is your favorite color?

  Red
  Blue
  Green
  Yellow
  

Action Buttons

• Effects non-reversible.
• Affect contents of entire form.
• Examples: submit (to submit form's parameters to server), reset (returns partially filled out form to its default state), regular (can be used to validate form), clickable image buttons (also used to submit forms).
• You can have several buttons of the same or different types in a single form.
• Usually easier to let similar acting buttons have the same name.
• Give each button a different value to distinguish among them.
• For image buttons, they have no value attribute, so they must all have different names.

Submission buttons

• type is submit.
• name, value attributes optional.
• Default: rectangular (or oval, depending on the browser) button with the word(s) "Submit".
• If only value attribute appears, the button labeled with that value.
• If both name and value attributes given, the value labels the button and the value and name are added to the parameter list sent to the server.

Reset buttons

• type is reset.
• Default: button with the label "Reset".
• Use value attribute to display alternate label.

Custom image buttons

• type is image.
• Creates a custom button that is a clickable image.
• src attribute required (value is the URL of the image file).
• When clicked by user, tells the browser to submit the form to the server and returns the (x, y) coordinates of the mouse pointer in the form's parameter list.
• x, y coordinates defined in pixels by offset from left edge (x), top (y) of the image.
• Can include a name attribute.
• alt attribute optional (but recommended) — tells the browser what to display if the image is not supported.

Hidden Fields

• Allows embedding information in a form which cannot be ignored or altered by browser, and is not seen by the user.
• type attribute set to hidden.
• name, value attributes required.
• Can be valuable when sorting different forms or form versions from a collection of submitted and saved forms.
• Also used to manage user/server interactions (e.g., follow-up forms).

Multiline Text Areas — the <textarea> Tag

• End tag required.
• Creates multiline text entry area.
• name attribute required.
• Upon submission of text, browser collects the lines of text, each separated by %0D%0A and sends them to server using the name specified by the name attribute.
• Plain text (as default text) may be included between the <textarea> and </textarea> tags.
• Flow of text in form is above and below, but not around, multiline text areas.

rows, cols attributes

• Values are the number of characters in integers.
• Text that exceeds the number of rows is scrolled.

Example:

<textarea name="comments" rows="8" cols="50">
Please write your comments here.
</textarea>
appears as:
Please write your comments here.

Multiple Choice Elements

The <select> tag

• Gives options in pull-down menus or scrolling lists.
• <option> tag gives list of items inside <select> and </select> tags, creates a menu of choices.
• name attribute required and used by browser when submitting the choice(s) to the server.
• No item is preselected by default, so if none selected, no value sent to the server.
• If one or more items selected, the item(s) collected in a comma-separated list attached to the name when the form data submitted to the server This might appear as ...?...name=value1, value2,....
• multiple attribute
  • Value is multiple
  • Allows more than one option to be selected.
  • Otherwise, only one choice permitted.
• size attribute
  • Determines how many options visible to user at once.
  • Default: 1.
  • If size is 1, if multiple is not specified, choices shown as a pull-down menu.
  • If size > 1 or multiple specified, choices displayed in scrolling list.

The <option> tag

• Content: plain text only.
• value attribute
  • sets a value for each option.
  • default: the content of the <option> tag.
• selected attribute — included to preselect one or more options, which the user may deselect; value is selected.
• label attribute — if set, its value is used to label the option, not the contents of the <option> tag.

Example

<p> Choose your vegetable (one) </p>
<p>
<select name="veggie">
<option>carrots</option>
<option>broccoli</option>
<option>squash</option>
<option>spinach</option>
</select>
</p> appears as:

Choose your vegetable (one)

carrots broccoli squash spinach

carrots broccoli squash spinach