Forms
Forms allow web sites to collect information from users. They are the first truly interactive piece of a website that we have built. That being said, with only HTML, forms will not do anything. They typically need javascript to interact with the users and a server side script (PHP, JSP, ASP, etc) to transfer data between pages. For now, we will be focusing on building forms that look nice, though they will not actually collect any information.
NOTE: It is important for all form elements to have BOTH an id and name attribute. The id's are used in JavaScript for validation and names are used when passed on to other pages.
<form>
The <form> tag is the parent tag for any form. All elements of the form must occur WITHIN the <form> ... </form> tags. The form tag has several attributes including id, name, method, and action. The action attribute is used to direct users to a new page when they submit the form, like a thank you page or order summary. The method attribute is the process in which the information is sent. The basic options are GET and POST. POST sends the information behind the scenes and GET appends the information to the address contained in the action attribute. When using GET, the variables and their values are visible to the user and can be accessed by JavaScript. POST variables are not visible and require a server side scripting language to access.
<input>
The most common tag used in a form. It is a singleton tag so the appropriate use is <input /> The input tags most important attribute is type. The items marked with an * are HTML 5 types. These new types build in some validation that in the past required Javascript. The good news is that older browsers that do not support HTML 5 will simply treat these fields as text fields (the default type for input) so users will still be able to enter their information. Below, you will find the input tag type values that handle text type input:
- type=text - plain text to be used for a variety of purposes (name, street address, favorite color, etc)
- type=password - same as text, but the characters are hidden from the user as they type
- *type=email - only accepts information in the form of an email address. It does NOT check to see if the email is valid.
- *type=url - only accepts information in the form of a url. It does NOT check to see if the url is valid.
- *type=date - pops up a date picker
- *type=number - only accepts numeric characters. Can be used in conjunction with the min, max and step attributes.
- *type=tel - places no formatting on the phone number (see pattern attribute below) but will trigger the phone input pad on some mobile devices
Some of the other attributes available for the input tag include:
- name - used for sending information to server side scripts.. Must be unique in the form and should be self identifying
- id - used for css styling as well as Javascript validation code. Must be unique on the page and should be self identifying. Can be the same value as the name. Is also used as the target for element labels.
- size - changes the size of an input box
- maxlength - sets a maximum number of characters for a users input in an input box
- value - the default value for the input
- *placeholder - this HTML 5 attribute allows the programmer to enter sample text or directions that disappear when the element gains focus. This is different from a value.
- *required - this HTML 5 attribute forces the user to complete the information before the form is submitted (set required=required).
- *pattern - this HTML 5 attribute allows the use of regular expression pattern matching to force data into certain formats. See link for common patterns you can copy and paste.
To verify information that comes from an input field in a JavaScript function, store the value of the input in a variable and check it against any value desired. For example, you can check if a number >=10 or if a password length is greater than five characters. To check that a value exists (it is not blank), check for equality with "" OR just use the required attribute.
<label>
The <label> tag is used to label input elements with the desired content. The label tag has an attribute called for that is set to the id of the element it is labeling. On some elements, using a label allows the user to toggle control by clicking on the label as well as the component.
Checkboxes
Checkboxes are used to allow users to select one or more items. Checkboxes are created using the input tag and type=checkbox. Checkboxes typically have a unique id and a shared name attribute that represents an array of options. An example follows:
<![CDATA[<input type="checkbox" name="gender[ ]" id="male" value="male" />Male
<input type="checkbox" name="gender[ ]" id="female" value="female" />Female
]]>
Also, note the use of the value attribute. Each checkbox should have a value that would be passed to a processing script that denotes what checking the box represents. This value can be text or a number, depending on how the information will be processed.
The final two items about a checkbox are:
- Using a label for the information that follows a checkbox will allow the checkbox to be selected when the label is clicked as well as the box
- Using the attribute checked="checked" will have the checkbox checked by default.
Radio Buttons
Radio buttons are used to allow users to select ONLY ONE item. Radio buttons are created using the input tag and type=radio. Radio buttons typically have a unique id and share a name, forcing them to be viewed as a button group, thus making the buttons mutually exclusive. An example follows:
<![CDATA[<input type="radio" name="gender" id="male" value="male" />Male
<input type="radio" name="gender" id="female" value="female" />Female
]]>
Like checkboxes, radio buttons need values to be processed. Note that radio buttons would be the appropriate choice for gender as you would not want a user to be able to check both male and female. Finally, labels and the checked attribute operate the same way as checkboxes.
<select>
The <select> tag allows a developer to provide drop down lists and selectable lists. The difference is similar to that of checkboxes and radio buttons. Options in a select box should be mutually exclusive while items in a list would allow multiple selections. Both type of selections use the <select> tag with <option> tags inside. The basic format for a select box is as follows:
<![CDATA[<select name="grade" id="grade">
<option value="9">9th<;/option>
<option value="10">10th</option>
<option value="11">11th</option>
<option value="12">;12th</option>
</select>
]]>
Note in this structure, the name and id are assigned in the select tag, and each option gets a specific value assigned to it.
To turn your select box into a list (for multiple selections) add the following two attributes: multiple="multiple" and size="n" where n is the number of visible rows in the list. Users of lists can click a single option, shift click to select a range, or ctrl click to select multiple, single choices.
<textarea>
<input type="text"> allows users to enter one line of text, no more. To give users the opportunity to enter multiple lines of text, programmers must use the <textarea>tag. An example of the use is seen below:
<![CDATA[<textarea name="comments" id="comments" row="n" cols="n"></textarea>]]>
Rows is the height of the text box and cols is the width (in characters). The maxlength attribute can also be used in HTML5 to limit the amount of text, in characters, that the user can input. The height and width can also be set using CSS.