The INPUT Element

The INPUT element is a general-purpose element that can be used to create most of the controls introduced earlier in this page. The controls that the INPUT element can create are password and single-line text input controls; checkbox and radio button controls; submit, reset, and push button controls; and file select, image, and hidden controls. What are left out of this list are object, menu, and multiple-line text input controls. Along this line, it’s also worth mentioning here that, although the INPUT element can create all three types of buttons, its facility for doing so is limited, and for situations that require a richer set of options, the BUTTON element is a better choice, which we'll cover in more detail later in this page.

The INPUT element consists of only one tag: <INPUT element attributes >. Its element attributes include the following:

• Attributes mentioned earlier in the quick facts about all controls: the name and value attributes and a set of “event” attribute
• Attributes dedicated to its function as an element— principally the type attribute
• Attributes that limit a control's input (the checked, disabled, readonly, size, and maxlength attributes)

Attributes that we'll say a little more about later in this page: the tabindex and accesskey attributes

The INPUT element’s name and value attributes function basically as described earlier. The name attribute specifies the control name. Using the control name, the form submission process allows other client-side programming entities, such as scripts, to access the control. The value attribute allows page authors to provide a control with an initial or default value, though an initial value is not required for most control types. The only exceptions to this are radio button or checkbox controls. With the radio button or checkbox controls, the value attribute designates the value that is to be submitted if the control is "on"—that is, if it is checked.

The type attribute, on the other hand, is the INPUT element’s principle attribute, controlling what type of control is created. Options for the type attribute include text, password, checkbox, radio, file, hidden, submit, image, reset, and button. These options are described in more detail below (except for the hidden option, which is beyond the scope of this course):

· text. This type attribute causes an INPUT element to create a single-line text input control. This is the default control type if no type attribute is specified. The value attribute, if present, specifies the initial value for the text input control, which will appear in the control when the form loads. The size attribute specifies the visible width of the control on the form. For text input controls, this width is specified in terms of number of characters (for other controls, it is specified in terms of pixels). The maxlength attribute sets a limit on the number of characters that can be entered into the control. When this limit is reached, the control generates an audible beep.

rendered control	source
	<input type='text' name='txtline'>
	<input name='txtline2'>
	<input name='txtline3' type='text' value='Default Value'>
	<input type='text' name='txtline4' size='12' maxlength='200'>

·

· password. This type option creates a single-line text input control that obscures from view with a special character, such as an asterisk (*), the characters that are entered into it. This characteristic, of course, makes the control a suitable choice when security is a concern, such as with password entry. In those situations, it is common to use it in conjunction with the size and maxlength attributes because passwords are typically limited to a small number of characters.

rendered control	source
	<input name='withoutdefault' type='password' size='8' maxlength='8'>

·

· checkbox. This type option creates a checkbox control. Unlike all other INPUT control types (except the radio type), checkbox types must include a value attribute, which specifies the value that is to be submitted with the form when the checkbox control is checked at the time the form is submitted. The control may be set initially to a checked state with the checked attribute. Doing so, specifies that, by default, the value of the value attribute will be submitted with the form—unless the control has been turned "off" in the meantime. The checked attribute is valid only for checkbox and radio INPUT types, and will be ignored if it is specified with any other control type.

rendered control	source
	<name='chkbx1' type='checkbox' value='value-to-be-sent'>
	<input name='chkbx2' type='checkbox' value='value-to-be-sent2' checked='checked'>

·

· radio. This type option creates a radio button control. Unlike all other INPUT control types (except the checkbox type), radio types must include a value attribute, which specifies the value that is to be submitted with the form when the radio button control is checked at the time the form is submitted. As with checkbox control types, a radio button may be set initially to an "on" state with the checked attribute. Again, doing so specifies that, by default, the value of the value attribute will be submitted with the form—unless the control has been turned "off" in the meantime. The checked attribute is valid only for checkbox and radio INPUT types, and will be ignored if it is specified with any other control type.

Radio buttons differ from checkboxes in that they are commonly used in groups in which only one button can be selected at a time. INPUT controls of type radio are made into a group by assigning each control that is to be in the group the same value for its name attribute.

rendered control	source
	<input name='rdbtn1' type='radio' value='value-to-be-sent'>
	<input name='rdbtn2' type='radio' value='value-to-be-sent' checked="checked">
	<input name='btn-grp' type='radio' value='default-value-to-be-sent' checked='checked'> <input name='btn-grp' type='radio' value='alt-value'>

·

· file. This option creates a file select control, which enables users to select a file or files to have their contents submitted with a form.

rendered control	source
	<input name='selct-a-file' type='file'>

·

· submit and image. These options both create submit buttons. Recall that a submit button causes a form to be submitted for processing to the server agent specified in the FORM element's action attribute.

The submit option results in a submit button with a text label. If no value attribute is present, button's default label is "Submit Query." A value specified with the value attribute will override this default.

The image option creates a submit button that displays an image. The src attribute specifies the path and file name of the image to be displayed. When using the image option, it is good practice to specify alternate text with the alt attribute. Doing so will make the control accessible to users who rely on text recognition software to read interfaces to them. For this type of control, the software will read the text specified by the alt attribute. But, text specified with the alt attribute can benefit other types of users as well: the alternate text appears as a context tip when the mouse pointer is held over the control. Note: given the important roles alternate text can play, care should be taken to make the text as descriptive as possible, perhaps identifying the button's function as a submit button or otherwise, indicating its purpose. (By the way, specifying an alt attribute with an image INPUT control is not yet required for HTML 4.01 validation, as it is for the IMAGE element, but the principle is a still good one to follow even though it's not required yet.)

rendered control	source	source for the equivalent button using the BUTTON element
	<input type='submit' name='subbtn'>	<BUTTON name='subbtn' value='submit' type='submit'>Submit Query</BUTTON>
	<input name='subbtn2' type='submit' value='Submit Answer'>	<BUTTON name='subbtn2' value='submit' type='submit'>Submit Answer</BUTTON>
	<input name='subbtn3' type='submit' value='Log On'>	<BUTTON name='subbtn3' value='LogOn' type='submit'>Log On</BUTTON>
	<input name='graphicsubbtn' type='image' src='tools.gif' alt='Submit Tools Information Form'>	<BUTTON name='graphicsubbtn' type='submit'><IMG src='tools.gif' alt='Submit Tools Information Form'></BUTTON>

·

· reset. This option creates a reset button, which will set the current values of all form controls back to what they were when the form first loaded. If no value attribute is present in the reset button control, the button's default label is "Reset." A value specified with the value attribute will override this default.

rendered control	source
	<input name='resetbtn' type='reset'>
	<input name='resetbtn2' type='reset' value='Reset Form'>

·

Дата добавления: 2015-07-26