1. Computing

Discuss in my forum

How to Use the Input Element

HTML Forms Tutorial

By

The INPUT element is a useful HTML form tag to know because it is one of the most flexible. The input tag prompts your readers to input data to your web server. It offers many different ways to solicit content from your users.

There are ten specific types of INPUT tag in HTML 4.01 and HTML5 adds 13 new ones. the HTML 4.01 types are:

  1. button
  2. checkbox
  3. file
  4. hidden
  5. image
  6. password
  7. radio
  8. reset
  9. submit
  10. text

You choose which type of input tag you would like by placing it in the type="" attribute of the tag. For example:

<input type="text">

Button

<input type="button" value="button" name="button">

The button input type allows you to create custom input buttons that do not have the default effects of the submit and reset buttons. It is most commonly used with JavaScript forms with the onclick attribute so that data is not sent to the web server until the JavaScript has processed it. This field is blank by default. If you want it to say something, use the value="" attribute.

Checkbox

<input type="checkbox">

With a checkbox element, you can give your readers a list of items to choose from. They can choose more than one in the list. Or it can be used as a "yes/no" toggle, when there is only one option. If you have a group of checkboxes, link them all together by giving them the same name. The values will all be sent to the form separately.

File

<input type="file">

The file input type allows your readers to upload a file to your web server. If you read my article on CGIs and File Upload, you can learn more about how to use the file input type.

Hidden

<input type="hidden">

Hidden fields are used to "save state" within an HTML form. They are most often used in forms that have multiple pages and information that needs to be carried from one page to the next. They are not shown on the Web page, but the information is sent along with other form input fields.

Image

<input type="image" src="ABCbuttn.gif" width="88" height="31" alt="About.com - image courtesy About.com" border="0">

With the image input type, you have yet another option for a button on your forms. The image shown here happens to look like a button, but you can use any image as a button on your forms. One thing to note, images as submit buttons don't allow for the tab key to move the focus to it, and this makes them less accessible for people with no mouse.

Password

<input type="password">

The password field looks almost identical to the text field. However, when you type in it, the letters are hidden. This allows you to have a little more security for passwords on your forms. The passwords are not sent encrypted in any way. So don't rely on this to secure truly important secret information.

Radio

<input type="radio">

Radio buttons give readers a "one of many" choice combination. Like the checkbox input type, radio button groupings all have the same name attribute, and each value is different. If a reader chooses one value, all the other values will be deselected.

Reset

<input type="reset">

The reset button resets the form to its default value. With most forms, this is blank entries, but if the fields have starting values, the reset button will return the form to that. This "resetting" is done by the browser, not the server. This button will have the default value of "Reset", if you want it to say something different, change the value="" attribute.

Submit

<input type="submit">

In order for a form to be sent to the server it needs some form of submit button. This field sends the form information to the web server when it is clicked. In Internet Explorer it has a default value of "Submit" and in Firefox of "Submit Query". If you want to change this, change the value="" attribute.

Text

<input type="text">

The text box is the most common input type and to make HTML easier, is the default for the input tag. This tag lets your readers type inany text information into the box. Text input fields are typically one line long. If you need a longer text field, you should use the textarea tag.

This article is part of the HTML Forms Tutorial

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. HTML and XHTML
  5. XHTML
  6. Forms
  7. HTML Form Tags
  8. How to Use the Input Element in Your Web Forms

©2014 About.com. All rights reserved.