Forms

Example Form

Mailing List Signup

Form Element & Attributes

A form cannot be inside another form. Form elements are like containers to hold form control elements.

Action Attribute.

'action' attribute. Provides URL location of the application or script that will be used to process a form. Popular languages for this are: PHP, ASP, ASP.NET, Ruby, JavaServer Pages, Python. From example:

Example Action Attribute

action="/mailinglist.php"

Method Attribute

'method' attribute. Specifies how information is sent to the server. A browser encodes the form information to send to the server.

The default method is GET. GET tacks on a question mark plus the encoded form data to the end of the URL of the action attribute. GET is preferable to allow users to bookmark the results of a form submission, like a search result.

The other method is POST. The browser sends a server request containing special headers followed by the data. Only the server should see the content, so it is the best method for sending secure information. POST is also preferable to send a lot of data or to upload files.

Examples

method="POST"

Form data being sent

fullname = Sally Strongarm
email = strongarm.com

Form data after encoding

fullname=Sally+Strongarm&email=strongarm%40example.com

Encoded data added to end of URL via GET method

http://www.bandname.com/mailinglist.phpname=Sally+Strongarm&email=strongarm%40example.com

'name' attribute. Essentially the 'variable name' for the piece of data to be sent in the form. User input creates the variable's value. The 'name' must match the variable name in the code being used in tandem with the form data. Normally required for inputs unless no value is being sent, such as for the 'submit' and 'reset' input types.

'label' element. Important for accessibility. Associates a form control with a 'label' or description. Can use the attribute 'for' to specify an id rather than defaulting to the contents. For form controls that come with multiple options, like radio, checkbox, or scroll menus, 'label' must be applied to each individual option.

'fieldset' element. Helps accessibility. Groups related form controls together within a form. Fieldsets can be nested with fieldsets.

'legend' element. Can be included in a 'fieldset' as a caption describing the fieldset's content.

'optgroup' element.

Form Controls

Most of these form controls are 'type's of the 'input' element, like so:

input type="control_type_here"

Text input form controls.

Single-line text field, "text":
Multi-line text-entry field, element "textarea":
Content can be put inside a textarea element. This context appears in the text box when displayed in a browser. This content is also sent to the server when the form is submitted. Alternatively, 'placeholder' text can be provided, which will not be sent if submitted. The placeholder attribute works for 'text' and 'textarea'.
Password entry field, "password":
Search field, "search":
Email address entry field, "email":
Telephone number entry field, "tel":
URL entry field, "url":
Drop-down suggestions, element "datalist":

Button form controls.

Submit button, "submit":
Reset button, "reset":
Image to replace the default submit button, "image":
Generic button that can be customized with JavaScript, "button":
Customizable button, element "button":

Multiple-choice form controls.

Radio buttons, "radio":
- Option 1
- Option 2
- Option 3
Checkbox buttons, "checkbox":
- Choice A
- Choice B
- Choice C
Drop-down menu, "select" element:
Scrolling menu, "select" element. Includes option groups, "optgroup":

Date & Time Form Controls:

Date input control, "date":
Time input control, "time":
Date/time input control, "datetime-local":
Month picker, "month":
Week picker, "week":

Various other form controls.

File selection control, "file":
Numerical input, "number":
Numerical input (range), "number":
Color selector, "color":
Hidden control, "hidden". This is a hidden control whose only job is to pass a name-value pair to the server when the form is submitted.
Extra form elements: "progress", "meter", "output".

Exercise: Pizza Order Form

Black Goose Bistro | Pizza on Demand

Our 12" wood-fired pizzas are available for delivery. Build your custom pizza and we'll deliver it within an hour.

Chapter 9: Forms