HTML Forms
Jakob Jenkov |
HTML forms makes it possible to obtain input from the reader of the HTML document. This is useful for many things, like the user signing up for a news letter, or providing feedback about a website, or typing in the delivery address of products purchased online.
This tutorial covers the form fields found in HTML 4. I have a separate tutorial about the new form fields in HTML 5.
By the way, I also have a tutorial about styling forms with CSS as part of my CSS tutorial.
The form Element
HTML forms are enclosed in the form element. Here is how it looks:
<form> </form>
HTML4 has a set of form fields that you can use. There are:
- Text field
- Text area
- Checkbox
- Radio buttons
- Select box
- File field
- Button
- Image button
- Submit button
Most of these form fields use the input element, but some form fields have their
own elements. Here is a quick example showing all the form fields:
<form>
<input type="text"> <br>
<textarea></textarea> <br>
<input type="checkbox"> <br>
<input type="radio"> <br>
<select>
<option>Choose this</option>
<option>Or this</option>
</select> <br>
<input type="file"> <br>
<input type="button" value="Click Me" > <br>
<input type="submit" value="Submit Form"> <br>
<input type="image" src="/images/html4/forms-image-button.png"> <br>
</form>
The example above creates a form with one of each HTML form field.
Notice how a br (line break) element is added after each form field. This
is done to make each form field appear on its own line. To format the form nicer,
you can put it into an HTML table instead.
Here is how the form fields look in the browser:
Each form field will be described in more detail in the following sections.
In HTML5 there are several new form fields. You can see them in my HTML5 form fields tutorial.
Text Field
A text field can be used to type in a single line of text. Here is how a text field HTML element looks:
<input type="text">
And here is how it looks in the browser:
The text field has the following attributes:
| name | The name of this text field. This is used when submitting the form to the server. This name can also be used when referencing the form field from JavaScript. |
| value | Sets the text value to be displayed in the text field as default text. |
| size | The approximate size in characters of this text field. Note, that the size will not always fit the given number of characters, and is often different in different browsers. |
| maxlength | The maximum number of characters that is allowed to type into this text field. The value must be a number. |
| readonly |
Sets the text field in read-only mode, meaning you cannot change the text displayed in the
text field. Valid values are true and false.
|
| disabled |
Sets the text field in disabled mode, meaning you cannot change the text displayed in the
text area. Furthermore, when the form is submitted, the value of the text field is not submitted.
Valid values are true and false.
|
Here is an example text field that uses some of these attributes:
<input type="text"
value="Default Text"
size="20"
maxlength="15"
>
Here is how the text field looks in the browser:
Notice the default text displayed in the text field when it is displayed initially. Notice also that you cannot write more than 15 characters in the text field.
Text Area
The textarea element is used to create text form fields that are similar
to text fields. The difference between a text field and a text area is that the text
area can contain multiple lines of text. Here is an example:
<textarea></textarea>
Here is how the text area looks in the browser:
The textarea element has the following attributes:
| name | The name of this text field. This is used when submitting the form to the server. This name can also be used when referencing the form field from JavaScript. |
| rows | Sets the number of text rows the text area should show. You can type in more rows than this, but only this number of rows is displayed at a time. |
| cols | Sets the number of columns (characters) to show. |
| wrap |
Sets the text wrapping mode of the text area. soft = text is wrapped in browser, but not when submitted to server. hard = text is wrapped in browser, and also when submitted to server.off = no automatic text wrapping.
|
| readonly |
Sets the text area in read-only mode, meaning you cannot change the text displayed in the
text area. Valid values are true and false.
|
| disabled |
Sets the text area in disabled mode, meaning you cannot change the text displayed in the
text area. Furthermore, when the form is submitted, the value of the text area is not submitted.
Valid values are true and false.
|
Here is an example that uses the rows and cols attributes:
<textarea rows="5" cols="20" wrap="off"></textarea>
And here is how the text area looks in the browser:
Checkbox
Checkboxes are little square boxes which the reader of your HTML document can click on. When clicking on a checkbox once, a little check mark appears in the box. The checkbox is then "checked". If you click a checked checkbox, the check mark disappears again. Here is an example of a checkbox in HTML:
<input type="checkbox">
Here is how the checkbox looks in the browser:
Try clicking the checkbox and seeing what happens.
The checkbox has the following attributes:
| name | The name of this checkbox. This is used when submitting the form to the server. This name can also be used when referencing the form field from JavaScript. |
| value | The value of this text field. This is used when submitting the form to the server. If the checkbox is checked when the form is submitted, the value inside the value attribute is submitted. If the checkbox is not checked when the form is submitted, the checkbox field is not sent to the server at all. |
| checked | If this attribute is present, the checkbox starts out as checked. This attribute
does not need a value, although it is allowed to write checked="true".
|
| disabled |
Sets the checkbox in disabled mode, meaning you cannot change the initial state of the
checkbox. Furthermore, when the form is submitted, the value of the checkbox is not submitted.
Valid values are true and false.
|
Here is a checkbox using some of the above attributes:
<input name="receiveEmail" type="checkbox" checked>
And here is how the checkbox looks in the browser:
Radio Button
Radio buttons look a bit like checkboxes except that radio buttons are round. Additionally, radio buttons typically appear in groups where you can select just one of the radio buttons. Here is an example group of radio buttons in HTML:
<input type="radio" name="theChoice" value="1"> No 1. <br/> <input type="radio" name="theChoice" value="2"> No 2. <br/> <input type="radio" name="theChoice" value="3"> No 3. <br/>
Here is how the radio buttons look in the browser:
No 1.No 2.
No 3.
Try clicking the radio buttons, and notice how only a single of the buttons can be selected at a time.
It is the name attribute that defines which radio buttons belong together
in a group. All radio buttons with the same name belong to the same radio button group.
Of the radio buttons belonging to the same group, only one can be selected
at any time.
The radio button element has the following attributes:
| name | The name of this radio button. This is used when submitting the form to the server. This name can also be used when referencing the form field from JavaScript. |
| value | The value of this radio. This is used when submitting the form to the server. If the radio button is checked when the form is submitted, the value inside the value attribute is submitted. If no radio button from the radio button group is selected when the form is submitted, no radio button parameter is submitted at all. |
| checked | If this attribute is present, the radio button starts out as checked. This attribute
does not need a value, although it is allowed to write checked="true".
|
| disabled |
Sets the radio button in disabled mode, meaning you cannot change the initial state of
the radio button. Furthermore, when the form is submitted, the value of the radio button is not submitted.
Valid values are true and false.
|
Select Box
A select box (also known as a drop down box) is a list of items of which one or more items can be selected. Here is how a select box looks in HTML:
<select>
<option>Choice 1</option>
<option>Choice 2</option>
<option>Choice 3</option>
</select>
Here is how the select box looks in the browser:
Each item in the select box is enclosed inside an embedded option element.
If you want one of the options to be preselected, simply put the selected
attribute inside the corresponding option element. Here is an example:
<select>
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3" selected>Choice 3</option>
</select>
Here is how the select box looks in the browser. Notice that the third option is preselected:
The select element has the following attributes:
| name | The name of the select box. This is used when submitting the form to the server. This name can also be used when referencing the form field from JavaScript. |
| disabled |
Sets the select box in disabled mode, meaning you cannot change the initial value selected in the select box.
Furthermore, when the form is submitted, the value of the select box is not submitted.
Valid values are true and false.
|
The option element has the following attributes:
| value | The value given to the select box, if this option is chosen. |
File Fields
A file field is used when uploading a file to a server. Here is how the form field looks:
<input type="file" >
Here is how the file field looks in the browser:
If you click the "browse" button a file dialog will open in which you can select the file to upload.
For file upload to work the form element needs to have its enctype
attribute set to multipart/form-data. Here is how that looks in HTML:
<form action="fileReceiver.jsp" method="post"
enctype="multipart/form-data">
<input type="file" name="theFile">
</form>
As you can see, the form element now has the enctype attribute set.
Notice also, that the file field has a name. This is used to identify the file field
on the server side.
The file field has the following attributes:
| name | The name of this file field. This is used when submitting the form to the server. This name can also be used when referencing the form field from JavaScript. |
| accept |
Sets the mime-type of the files the server will accept. For instance, image/gif or
image/*.
|
| disabled |
Sets the file field in disabled mode, meaning you cannot change the initial value of the file field.
Furthermore, when the form is submitted, the value of the field field is not submitted.
Valid values are true and false.
|
Notice the accept attribute. This attribute can be used to tell the file dialog
which file types (mime types)
the server can accept, and thus which to show in the file dialog. For a full
list of mime types, look at IANA's Mime Media Types list.
Button
The button form field creates a button that can be pressed by the reader of your HTML document. To make something happen when a button form field is pressed, you need to attach a JavaScript event listener. Here is a button HTML example:
<input type="button" value="Click me" onclick="alert('you clicked me!');">
Here is how the button looks in the browser. Try clicking it.
If you clicked the button it shows a JavaScript alert box with the text "you clicked me!".
If you do not attach a JavaScript click handler to the button, nothing happens when you click it.
The button has the following attributes:
| name | The name of this button. This name can also be used when referencing the button from JavaScript. |
| value | Sets the text used on the button. |
| disabled |
Sets the button in disabled mode, meaning you cannot click it.
Valid values are true and false.
|
Submit Button
A submit button is a button that submits the form with all its values to the server. Here is how a submit button looks in HTML:
<input type="submit" value="Submit Form">
And here is how the submit button looks in the browser:
Nothing happens when you click the above submit button, because the submit button is not located inside a form. If the submit button was located inside a form, the form would be submitted to the server, and a new page would normally be displayed.
The submit button has the following attributes:
| name | The name of this submit button. This is used when submitting the form to the server. This name can also be used when referencing the submit button from JavaScript. |
| value | Sets the text used on the submit button. |
| disabled |
Sets the submit button in disabled mode, meaning you cannot click it.
Valid values are true and false.
|
Image Button
An image button is a submit button that displays a clickable image instead of a standard HTML button. You can use any image as button, but you should choose one that makes sense to the reader of your HTML document. Here is how an image button looks in HTML:
<input type="image" src="/images/html4/forms-image-button.png">
Here is how the image button looks in the browser:
Notice that the mouse cursor changes when it hovers over the image, just like when it hovers over a link. That is because you can click on the image. Nothing happens when you click the image though, because the image button is not nested inside a form. If it was, the form would have been submitted, just like with a submit button.
Note: Some browsers have a slightly different behaviour when using image buttons instead of submit buttons. With a submit button you can normally also press the enter key on the keyboard while a form field has focus, to make the browser submit the form. This does not work if you use an image button.
The image button has the following attributes:
| name | The name of this image button. This is used when submitting the form to the server. This name can also be used when referencing the image button from JavaScript. |
| disabled |
Sets the image button in disabled mode, meaning you cannot click it.
Valid values are true and false.
|
Submitting the Form
You can submit a form in three different ways:
- By clicking a submit button or image button.
- By clicking enter when a form field has focus (except text areas).
- Via JavaScript, by calling the
form.submit()function.
When the form is submitted, the form fields are sent to the URL listed inside the
form elements action attribute. Here is an example:
<form action="http://tutorials.jenov.com/html4/submit-form.jsp"> </form>
When this form is submitted, the values of the form fields are packed into name, value pairs,
and sent to the URL http://tutorials.jenov.com/html4/submit-form.jsp
There are two methods you can use to submit the form. Actually, there are more, but these two are the most common:
GET and POST
- GET
- POST
When you use GET, the form fields are appended to the URL listed inside the forms action attribute.
When you use POST, the form fields are packed into the body of the HTTP request sent to the server. Thus, the form fields (parameters) are not visible in the URL which the browser sends the form to.
You specify what method to use inside the forms method attribute. Here is an example:
<form method="POST"
action="http://tutorials.jenov.com/html4/submit-form.jsp">
</form>
On the server side you need some dynamic script (Java, C# .NET, PHP etc.) that receives the form, and processes it. How such a script looks is outside the scope of this text.
Form Layout With Tables
The form element does not provide any layout of the form by default. However, you can use
HTML tables to layout the form, so the form looks better. Here is an example form:
Here is the HTML needed to generate this form:
<form action="..." method="POST">
<table cellpadding="5" cellspacing="0">
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td valign="top">Gender</td>
<td>
<input type="radio" name="gender" value="male"> Male <br/>
<input type="radio" name="gender" value="female"> Female <br/>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit Form">
</td>
</tr>
</table>
</form>
Each form field is displayed in its own table row, along with a label describing what to type into that form field. The label is displayed in the first column, and the form field in the second column of the table.
| Tweet | |
Jakob Jenkov | |
