In the last article, I talked about the basics of HTML forms. This article will discuss the magical input element. Why is it magical? Because this one element can transform into many different input fields! From a standard text box to a checkbox to a button, this one HTML element can do a lot. So without further ado, let us look at the many faces of the input element.
The INPUT Element
Syntax: <input type=" text|password|checkbox|radio|submit| reset|file|hidden|image|button" name="<value>" value="<value>" size="<value>" maxlength="<value>" checked="true|false" src="<image location>" disabled="disabled" readonly="readonly" tabindex="<value>" />
The "input" HTML element does the bulk of the work for information collection on an HTML form. This element can change depending on its type.
Several attributes are the same across input types. The "name" attribute specifies the field name that the form processor uses when referencing the form element. If the "name" attribute is not specified, the value from the input element will not be passed to the form processor.
The "disabled" attribute disables the input element making it unusable. This can be useful if you do not want someone to be able to use this input element until another condition is met. When an input element is disabled, the user cannot do anything with it. This means it cannot be tabbed to and is not clickable. When the input is disabled, it will be "grayed out" (see figure 1).
Figure 1
The "tabindex" attribute specifies the tab order of the input element. The tab order is used to specify the order of the elements as the user presses the tab key on the keyboard.
The input element also supports a lot of the standard HTML attributes like: id, style, class, etc. It also supports many of the event attributes, onclick, onfocus, etc.
The TEXT Type
When you want a text box, you use type="text". This will render a single text box on the screen (see figure 2). The text box accepts pretty much any character. The "size" attribute specifies the size, in pixels, of the text box. If the size is omitted, the user agent (UA) or browser will use a default size. This default size can be different for different UAs. It is best to specify the size, to keep your text boxes consistent between UAs.
The "maxlength" attribute provides a way to limit the amount of characters that can be entered. If you set the maxlength attribute to 30, the text box will stop allowing characters to be entered after 30 characters have been entered. The user would need to delete some characters in order to add more.
The "readonly" attribute makes the text box read-only. The difference between the readonly attribute and the disabled attribute, is that the readonly attribute allows the text box to be selected and text within can be copied.
Figure 2
The PASSWORD Type
The "password" type is a text box that masks the text being entered (see figure 3). This is used when you want someone to enter sensitive information, such as a password. Like the text box, it supports the size and maxlength attributes. It also supports the readonly attribute, but making this read only would defeat the purpose unless there is a good reason for it.
Figure 3
The CHECKBOX Type
The "checkbox" type renders a checkbox (see figure 4). This is a box that when clicked, toggles the box checked or unchecked. The value of a checkbox is determined by the "checked" attribute and not the value. When the checked attribute is set to "checked", the checkbox is checked. When it is set to nothing, it is unchecked.
Figure 4
The RADIO Type
A radio button is rendered by setting the type to "radio" (see figure 5). You can render a single radio button, but it really does not provide any functionality. Radio buttons are usually created in groups. A radio button group allows only one value to be selected from a list of values. You group radio buttons together by setting the name attribute the same.
Figure 5
The SUBMIT Type
The "submit" type renders a submit button (see figure 6). The "value" attribute is used for the text inside the submit button. This text can be anything you want. If you omit the value attribute, the UA will provide its own default text. When this button is clicked, the form data is sent to the form processor specified in the action attribute of the form element. You can have multiple submit buttons on a form. The form processor would need to know which button was pressed by reading the "name" attribute of the submit button.
Figure 6
The RESET Type
Setting the input type to "reset" will create a reset button (see figure 7). This button will reset or clear all the form data. The UA takes care of clearing the form and no code needs to be written by you. As with the submit button, you can provide your own text for the reset button by changing the value attribute. If it is omitted, the UA will provide its own default text which is usually "Reset".
Figure 7
The FILE Type
The "file" type renders a textbox with a browse button (see figure 8). This allows for a file to be uploaded using the form. The "enctype" of the form element must be set to "multipart/form-data" for this to work. When you click the browse button, the UA will present a file dialog box to choose the file. When the form is submitted, the file will be uploaded.
Figure 8
The HIDDEN Type
Setting the type to "hidden" produces a hidden field. Hidden fields are not visible to the user. These are great for setting values that you want passed with the form, but not available to the user. These can be set using JavaScript for extra flexibility. One thing to note, hidden fields can be viewed by the user if they are able to view the source of your HTML so do not store anything you want to keep private.
The IMAGE Type
The "image" type uses an image for the submit button (see figure 9). When using the image type, you must supply the "src" and "alt" attributes. The "src" attribute is used to specify the location of the image. The "alt" attribute displays text if the image fails to load. When the user clicks on the image, the X and Y coordinates are sent along with the form data. This allows you to use one image as multiple buttons.
Figure 9
The BUTTON Type
The "button" type renders a clickable button. This button is different than the "submit" and "reset" buttons. This button does not do anything when clicked. The form processor ignores this button. So why is there? Well, you can use JavaScript attached to the button to perform an operation when it is clicked. The form processor only knows how to handle the "submit" and "reset" buttons.
Conclusion
As you can see, there is a lot of functionality that the input element provides. When it comes to forms, the input element is the most widely used. In the next article, we will discuss the other field type elements, such as, the drop-down list, the select list, the text area, and option groups. We will also discuss some of the layout and grouping options using labels and fieldsets.
