Input Fields

The most common type of field that we will want to add to our form are text input fields.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<h1>Input Fields</h1>
<form action="#">
<label for="desc">Description:</label>
<input type="text" size="10" id="desc" name="desc" value="description" />

Here's what the Input Text Field Form page looks like in your web browser.

There are actually two fields that we have defined here because we have also defined a label. Let's start by looking at how the input field is defined first though and we'll come back to the label aftwewards.

A text field is defined using the input tag the same as the submit button but instead of specifying type="submit" we specify type="text". Like all input fields everything is defined via attributes so a self closing tag with a slash at the end is required.

The size attribute defines how large the text area will appear on the page and has no effect on how much can be entered into the field as the field will scroll if necessary. If the optional size attribute is not specified then the default field size will be determined by the browser. An optional maxlength attribute can be specified if you want to limit the number of characters that can be entered.

The value attribute defines the default value that is to be displayed in the input field. If no value is specified then the field will be left blank.

The name attribute provides a name that is applied to the field when the action processing is performed in order to pass the field value. The id attribute is normally defined with the same value as the name attribute but is used for a different purpose - to provide a means for the current page to reference the field.

An input field can be defined as readonly by specifying the readonly="readonly" attribute or can be disabled by specifying the disabled="disabled" attribute.

The label tag defines a descriptive label that appears on the page to define what a field is for. The for attribute links it to to the actual field by specifying the id of the field that it labels. While it may be obvious to people seeing the web page on the screen as to which description goes with what field and so the label tag may appear redundant it is absolutely essential that the tag be used in order that talking browsers and other browsing devices that do not display the web page in the conventional way are able to indicate in their own manner which label matches to what field.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow