The <input> Tag

The input element is used to add interactivity to HTML documents through the use of controls such as edit boxes, checkboxes and buttons. Although it is possible to use inputs anywhere in the document it is customary to use an HTML form as the parent for such elements. Inputs are extremely talented creatures. By setting their type attribute it is possible to make them behave like one of a whole host of controls. This is discussed in some detail below. There are some attributes specific to the input element and other more generic ones.

• The class attribute is discussed here. One can locally alter some aspects of the assigned style by defining an inline style using the code style="color:...". Needless to say, only those style attributes that require altering/adding need to be specified.
• The id attribute is discussed here.
• The events available across all three browsers - Firefox, Opera and IE - are discussed here.
• The style attribute is used to assign inline CSS styling information to the element. The specification takes the form style="color:...". Inline styling should be used sparingly to temporarily override CSS attributes inherited from a class specification.
• accept:Specifies the acceptable file types when the input type is file. For instance accept="image/png" would in theory constrain the user to browsing for PNG files only. In practice this feature does not work with many browsers.
• accesskey:This attribute determines the ALT + Key combination required to select the input control via the keyboard. If the input is a Submit button, using the access key causes the parent form to be submitted. With all other input types the control is selected - provided that it has not been disabled.
• alt:Provides alternate text for an image used as a button.
• checked:The code checked="checked" causes checkbox and radio button inputs to be checked.
• disabled:To set the input in an initially disable state use the code disabled="disabled".
• maxlength:When the input type is text or password this attribute determines the length of the longest string that can be entered.
• name:Assign a name attribute if you want the element contents to be submitted. Generally speaking, one would assign a name to every control hosted inside a form. The only exceptions are the Submit & Reset buttons - there isn't much to be gained by having them passed to the processing server as form data. Also, as a general rule the names assigned to controls on a form should be unique. However, radio inputs are grouped by giving all the inputs in the group the same name. This ensures that only one radio item in the group can be checked at any given time.
• readonly:Indicates that the input may not be modified. Firefox and Opera ignore the readonly="readonly" assignment if the input type is not text or password. Internet Explorer is more generous.
• src:A URL used to specify the image location when the input type is image.
• size:This attribute determines the width of the control. Size is specified as the number of characters to display. Thus <input type="text" size="3"/> would cause a textbox three characters wide to be displayed. Just what is deemed to be character width is determined by the browser. The size attribute is ignored if the input type is not file, password or text.
• tabindex:Assign tab indices to the controls on a form to control the order in which they are selected when the user hits the TAB key. Tab indices should be assigned to all the controls on the form. A partial assignment - where some of the controls do not have this attribute assigned - can lead to strange behavior.
• title:Browsers may use this attribute to show a tooltip when the mouse cursor hovers over the control.
• type:This attribute determines the nature of the input control. The possible choices are
  • button:Displays a button. With this input type the value attribute must be specified or else the button will appear empty.
  • checkbox:Displays a checkbox.
  • file:Displays an textbox with a button adjacent to it. The default button caption depends on the host browser. Clicking on the button causes a file selector dialog to be displayed.
  • hidden:Creates an invisible control. Hidden inputs are useful when it is necessary to return information that does not originate from the user back to the server. A typical use for this would be to uniquely identify a user when cookies have been disabled on the web browser.
  • image:Displays a clickable image which acts like a submit button. The mouse coordinates where the click occurred are shipped back to the server along with other form data. Naturally, this requires the specification of both the src and the value attributes.
  • password:Displays an edit box in which the characters typed in by the user are replaced by a placeholder - * in Firefox and Opera and • in IE.
  • radio:Displays a radio button.
  • reset:Clicking on this button input causes all the form controls to be reset to their initial state.
  • submit:When this button input is clicked the form data are shipped back to the URL defined in the form action attribute.
  • text:Displays a textbox.
• value:The initial content of button, password and text inputs is taken from the setting for this attribute. Submit and Reset buttons use this attribute setting to show a button caption but do not require it - in the absence of a suitable value they use an intrinsic, browser-dependant, value.

Inputs are inline elements. Therefore, in order to layout inputs the developer must either code in <br> tags or use CSS styling with changes to the display attribute where required. With one important exception, all input elements are amenable to CSS styling. There are browser-dependant limitations on what can be accomplished as described here. The exception is the file upload input subtype which is wholly unresponsive to CSS styling. This is a security feature implemented by all browsers - the thinking is that the appearance of a control which when interacted with provides access to the file system of the browser host should not be subject to modification. We discuss a workaround to this problem here.