My Web Training

📖 Creating Web Forms

Forms are a feature of HTML that allows the user to input information that can then be used by the web server through a form handler program. Chances are you've used an HTML form on the Internet to request information, to sign up for a service, or to order goods. The data contained in the form is then passed to the web server, which uses a program to process the information. Many times, this requires that a program be written to receive and process the data. Since this is beyond the scope of this course, we will simply use an e-mail handler to mail the form data to ourselves. There are many types of form fields that can be used in a form, and therefore many different tags to learn.

The form tag

To create a form in an HTML document, you must include the <form> and </form> tags. These two tags designate the beginning and end of a form. Between these two tags you may include text, HTML code and special form field tags. All text and HTML code will be displayed just like any other HTML page, but they will not be a part of the form data. Only the special form field tags will be recognized by the form and passed on to the receiving application.

The <form> tag has several parameters associated with it.

id="formname" - assigns a name to the form. Required if there is more than one form on the page. Useful to reference form fields and identify the purpose of the form.

action="form-handler-name" - required - tells the browser the name of the program that will process the form data. The form handler program will be called whenever the submit button (see below) is selected by the user and the form data will be passed to the program.

In this course we will code this as shown here.

<form id="myMailerForm" action="mailto:emailaddress@maildomain.ext" method="post">

This will email the form contents to the email address specified. We do not have php installed on the class server, so we cannot process the form data using a php program at this time.

method="get" or method="post" - required - specifies how the form data is to be passed to the form handler program. For method="get", the form data is passed to the form handler as part of the URL address. After the URL there is a question mark (?) followed by the form data. You have probably seen this when you've entered search criteria. The URL may look something like: http://search.yahoo.com/bin/search?p=searchword. The information following the ? is the form data (the word to use in the search) and is called a query string.

For method="post", the data is sent to the application as a separate transmission, not in full view of the user. Which method should you use? GET is faster and should be used whenever you have a few short form fields or if you want to send the link with the query string included in the link. If you have sensitive data (i.e. passwords or credit card numbers) or a large number of form fields or some very large text form fields, use POST. Regardless of which method you use, the form data is passed to the form handler as a list of name="value" parameters separated by commas (i.e., name1=value1, name2=value2, . . .).

The label tag

The <label> tag is used to associate a label with a form field for accessibility. All controls on your form should be labeled appropriately. There are 2 ways to use the label tag. The first method is to wrap the form control inside the label tag. This is probably the simplest way to add labels but limits the developer in formatting and layout.

<label> Last Name <input type="text" name="lastname"> </label>

Or you can separate the label from the control but reference the control using the for attribute in the label tag. The for attribute points at the control id attribute to connect the label to the control. Now it's much easier to place the label at different places relative to the form control.

<label for="lastname"> Last Name </label> <input type="text" name="lastname" id="lastname">

When the label is properly coded, you can see your mouse arrow change to a pointer when you hover the label and the cursor will be placed in the text box when the corresponding label is clicked.

Last Name

The input tag

The <input> tag is how you add form "controls" as they are called in HTML. This tag is used to for text fields, multiple-choice lists, and submission buttons. Because the different types of input form controls have different requirements and attributes, they are discussed separately below. However, all of the input types use the name attribute. This is the name that will be associated with the value entered in the form field when it is passed to the form handler. It is very important to always use a unique name for each form field to ensure the information will be processed correctly.

The submit button

<input type="submit" value="Push Me">

The Submit button does what its name implies, it submits the form data to the server from the browser. The value attribute is optional, but if included, the value entered will be displayed as the label on the button ( "Push Me" in the example above). If omitted, the button will be labeled Submit Query.

Text fields

Text box: <input type="text" name="xxxx" value="yyyy">

The input type="text" creates a one-line text area which shows up on the page as a rectangular box. The value attribute can be used to pre-populate the text box with data. If the value attribute is omitted, the box will be blank. Otherwise the specified value will be displayed in the box. If the user wishes to enter something else in the text field, they will have to delete the displayed value and then type in their value, so use it carefully to make your form user friendly.

Passwords

Password: <input type="password" name="xxxx" value="yyyy">

The type="password" form control works exactly like type="text", except that when the user types something in the box, each keystroke shows up as an asterisk (*) instead of the character they typed. The intent is that anyone looking over their shoulder would not be able to see the typed contents. It is important to note that although it does not show up on the screen, it is transmitted as clear text, and is therefore not all that secure. Never use method="GET" on a form with a type="password" control field or the password will be clearly displayed as part of the URL. And even with method="POST", hackers can gain access to the password contents without much trouble!

Checkboxes

Checkboxes
Checked <input type="checkbox" name="xxxx" value="yyyy" checked>
Unchecked <input type="checkbox" name="xxxx" value="yyyy">

The Checkbox form control gives users a way to select or deselect an item quickly and easily in your form. Checkboxes may be used singly or in groups. Groups of related checkboxes may be given the same name, but each one should have a different value. name and value are required attributes. You may also add the checked attribute which preselects that particular checkbox. Users can select and deselect checkboxes (even those with the checked attribute) by clicking on them. Each checkbox operates independently from the other checkboxes with the same name. Checking one checkbox does not affect the other checkboxes. If more than one checkbox with the same name is checked, the data values for each one will be passed to the form handler as a list separated by commas (i.e., name= value1, value2, . . .)

Radio buttons

Radio Buttons
Checked <input type="radio" name="xxxx" value="yyyy" checked>
Unchecked <input type="radio" name="xxxx" value="yyyy">

Radio buttons are similar to checkboxes, except that the user may select only one in a group. Like checkboxes, name and value are required attributes. Radio buttons with the same name are members of a group. Selecting one radio button will deselect any other radio button in the same group. The checked attribute will cause that button to be checked when the form is initially displayed. If no element in the group is checked, the browser automatically checks the first one.

File selection control

<input type="file" name="xxxx">

File input allows the user to select a file from a list and upload it to the server with the form data. It works only with method="post".

Reset

<input type="reset" value="Erase Me">

The Reset button erases all user-entered data from the form. The value attribute works the same way as for the Submit button, the value entered will be displayed as the label on the button ("Erase Me" in the example above). If omitted, the button will be labeled Reset.

In addition to the <input> tag, there are two other form controls that you may be interested in using.

Textarea

If you need a larger, multiline area for the user to enter freeform text, such as a comments area or special instructions, you can use the <textarea> tag to create a box:

<textarea>Contents goes here</textarea>

Contents goes here

Notice that you must include a closing tag as well. Any text between the <textarea> and </textarea> tags will be displayed inside the text box. Only text may appear here - no images or other HTML elements. If no text is found, the box will be blank. The name attribute is required. cols and rows are optional but recommended, and establish the width and height respectively of the textarea in characters. If omitted, the browser default will be used.

The select and option tags

The <select> and <option> tags are used together to create a pull-down menu of choices.

<select name="xxxx" size="n" multiple>
	<option value="xxxx" selected> CONTENTS </option>
</select>

The <select> and </select> tags indicate the beginning and end of the multiple choice list. The size attribute determines how many choices are visible to the user at one time and must be a positive integer. If size is omitted, the options will be displayed as a pop-up menu. If specified, the options will be displayed as a scrolling list. The multiple attribute indicates that the user may select more than one option. If omitted, the user may select only one option as with a radio button.

The <option> tag is used to define each item in the selection list. Any number of <option> tags may be included between the <select> and </select> tags. The CONTENTS will be displayed in the pop-up menu or scrolling list. The value attribute is optional. If included, it will be the value passed to the form handler program. If omitted, the CONTENTS will be passed as the form value. If the selected attribute is included, the item will be preselected. If none of the options contains the selected attribute, the first option will be preselected. However, if the multiple attribute was set in the <select> tag, no options will be preselected.

The fieldset and legend tags

<fieldset> is used to group related form fields together. <legend> is used to give a group name to the elements and will display on the form.

HTML5 Forms

New input types

Not supported in all browsers.

none supported in IE
all supported in Chrome and Opera
Firefox supports email, url and search
Safari supports number, range, and date pickers
OK to use now. Treated as <input type="text"> if not supported in a browser.

<input type="email">

should contain an e-mail address.
value of the email field is automatically validated when the form is submitted.
some mobile browsers will alter keyboard default to include @ and .com

<input type="url">

should contain a URL address.
value of the url field is automatically validated when the form is submitted.
some mobile browsers will alter keyboard default to include .com

<input type="number">

should contain a numeric value.
can also set restrictions on what numbers are accepted
max - maximum value allowed
min - minimum value allowed
step - legal number intervals
value - default value

<input type="range">

should contain a value from a range of numbers.
displayed as a slider bar.
can also set restrictions on what numbers are accepted
max - maximum value allowed
min - minimum value allowed
step - legal number intervals
value - default value

<input type="date">

Date pickers (date, month, week, time, datetime, datetime-local)

date - Selects date, month and year
month - Selects month and year
week - Selects week and year
time - Selects time (hour and minute)
datetime - Selects time, date, month and year (UTC time)
datetime-local - Selects time, date, month and year (local time)

<input type="search">

used for search fields, like a site search, or Google search.
behaves like a regular text field.

<input type="color">

should contain a color.
Opera will allow you to select a color from a color picker
Chrome will only allow hexadecimal color values to be submitted

The datalist element

provides an "autocomplete" feature on form elements.
enables you to provide a list of predefined options to the user as they input data.
not supported in IE, Chrome or Safari
used in conjunction with an <input> element that contains a list attribute.
fill the <datalist> element by nesting <option> tags inside the <datalist> tag

Example

<label>
 Enter your favorite cartoon character:<br />
	<input type="text" name="favCharacter" list="characters">
		<datalist id="characters">
		<option value="Homer Simpson">
		<option value="Bugs Bunny">
		<option value="Fred Flinstone">
		<option value="Bart Simpson">
	</datalist>
</label>

New form attributes

autofocus

specifies the element will be the focus of the first user input.
does not work in IE (but doesn't hurt)
only 1 per form

required

specifies that an input field must be filled out before submitting.
works with the following <input> types: text, search, url, telephone, email, password, date pickers, number, checkbox, radio, and file
does not work in IE or Safari
supporting browsers mark required fields (highlight in red, etc.) if not filled in and some send warning.
can use :required pseudoclass in CSS to apply a style to all required fields.

pattern

allows you to specify a regular expression used to validate the form
include a title attribute to indicate what the pattern is which the browser can use as a tip.
considered valid if the the content matches the regular expression
does not work in IE or Safari
works with <input> types: text, search, url, telephone, email, password, datepickers, range, and color

Country code example

<input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code">

placeholder

provides a hint that describes the expected value of an input field.
the hint is displayed in the input field when it is empty, and disappears when the field gets focus:
may be used in place of a label
works with the following <input> types: text, search, url, telephone, email, and password

<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" autofocus required>