Skip to main content

Building Forms

There are two parts to an HTML form:

Forms are added to web pages using the <form> element. The <form> element is a container for all the content of the form, including some number of form controls, such as text entry fields and buttons. It may also contain block elements, (h1, p, and lists, for example), however, it may not contain another form element.

top

Form Attritutes

The form element has some attributes that are necessary for interacting with the form-processing program on the server.

The action attribute provides the location (URL) of the application or script that will be used to process the form. The method attribute specifies how the information should be sent to the server.

<form action="process.php" method="POST">...form controls...</form>

When the form’s method is set to POST, the browser sends a separate server request containing some special headers followed by the data. Only the server sees the content of this request, thus it is the best method for sending secure information such as credit card or other personal information. The POST method is also preferable for sending a lot of data, such as a lengthy text entry, because there is no character limit as there is for GET.

With the GET method, the encoded form data gets tacked right onto the URL sent to the server. The GET method is appropriate if you want users to be able to bookmark the results of a form submission (such as a list of search results). Because the content of the form is in plain sight, GET is not appropriate for forms with private personal or financial information. In addition, because there is a 256 character limit on what can be appended to a URL, GET may not be used for sending a lot of data or when the form is used to upload a file.

top

Passing Form Variables

Web forms use a variety of form control elements that allow users to enter information or choose options via text entry fields, buttons, menus, and a few controls with special functions. The job of a form control is to collect one bit of information from a user as a variable, and pass it to the processing application or script. The name attribute identifies the variable name for the control. In the example below, the text gathered by a <textarea> element is identified as the 'comment' variable:

<textarea name="comment" rows="4" cols="45">Would you like to add a comment?</textarea>

When a user enters a comment in the field ('Your site is dumb.'), it would be passed to the server as a name/value (variable/content) pair like this:

comment=Your%20site%20is%20dumb

All form control elements must include a name attribute so the form-processing application can sort the information. The only exceptions are the submit and reset button elements because they have special functions (submitting or resetting the form) not related to data collection.

top

Form Controls

Web forms use a variety of controls that allow users to enter information or choose options. Control types include various text entry fields, buttons, menus, and a few controls with special functions.

Even though <form> is a block-level element, if you’re writing HTML individual form controls are inline-level elements and must must be contained within a further block-level element, usually a a <div> or a <p>, in order to validate. Because form controls are all inline-level elements, you can place them adjacent to each other within a single block container.

Form control elements:
Control type Elements Attributes Example
Text entry controls: single-line text entry <input type="text" /> , <input type="password" /> name, value, size, maxlength Text:
Password:
Multi-line text entry <textarea>Initial content</textarea> name, rows, cols
Submit and reset buttons: <input type="submit" />, <input type="reset" />, <button> value
Radio and checkbox buttons <input type="radio" />, <input type="checkbox" /> name, value, checked Checkbox:
Radio:



Drop-down menus <select>, <option>, <optgroup label="labelname"> <select>: name
<option>: value, selected
Scrolling menus <select>, <option>, <optgroup label="labelname"> <select>: name, size, multiple
<option>: value, selected
File selection and upload control <input type="file" /> name, size
in <form>: enctype="multipart/form-data"


Hidden controls:
A hidden input element is used to include extra data within a form that is not visible to the user but is submitted along with the rest of the form data
<input type="hidden" /> name, value

top

Additional <input> Types

HTML5 has several new input types for forms. These new features allow better input control and validation. Not all browsers support all the new input types. If they are not supported, they will behave as regular text fields.

Additional HTML5 Input Types
Input Type Description HTML Markup
date A control for entering the date. <input type="date">
datetime Date and time using UTC date and time format <input type="datetime">
datetime-local Date and time according to your local time <input type="datetime-local">
month Month and year <input type="month">
time The time of day <input type="time">
week Allows you to pick the week and year. <input type="week">
color Allows you to enter a simple color value (which is in hexadecimal color notation) <input type="color"">
email Validates the input using the standard email format <input type="email">
tel Gives you the ability to validate telephone numbers format against a pattern <input type="tel">
search Searches a data set (like a <datalist> HTML element) <input type="search">
range A slider control for picking a number in between two numbers <input type="range">
number Accepts numbers only <input type="number">
url Accepts URLs only <input type="url">

top

Additional <input> Attributes

HTML5 adds some new attributes for <input>.

HTML5 Additional <input> Attributes
Input Type Description HTML Markup
placeholder

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.

<input type="text" name="first" placeholder="First Name">
required

The required attribute specifies that an input field must be filled out before submitting the form.

<input type="text" name="user" required>
min-max The min and max attributes specify the minimum and maximum value for an <input> element. <input type="date" name="dob" min="1970-01-01">
<input type="number" name="quantity" min="1" max="5">
autofocus

The autofocus attribute specifies that an <input> element should automatically get focus when the page loads.

First name:<input type="text" name="first" autofocus>
autocomplete

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off. When autocomplete is on, the browser automatically complete values based on values that the user has entered before. It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.

<form action="demo_form.asp" autocomplete="on">
<input type="email" name="email" autocomplete="off">

top

Form Accessibilty Features

It is essential to consider how users without the benefit of visual browsers will be able to understand and navigate through your web forms. These form elements provide ways to make semantic connections between the components of a form clear. They also provide more 'hooks' for style sheet rules.

The <label> element is used to associate descriptive text with its respective form field. This provides important context for users with speech-based browsers. Each <label> element is associated with exactly one form control.

<label for="male">Male: <input type="radio" name="gender" id="male" value="M" /></label>
<label for="female">Female: <input type="radio" name="gender" id="female" value="F" /></label>

The <fieldset> element is used to indicate a logical group of form controls. A fieldset may also include a legend element that provides a caption for the enclosed fields.

Fieldset One
Fieldset Two

top