Input tags

The tags you use to collect input from your site visitors make up the bulk of any form. HTML supports a variety of input options, from text fields to radio buttons and from files to images.

Every input control associates some value with a name:

• When you create the control, you give it a name.
• The control sends back a value based on what the user does in the form.

For example, if you create a text field that collects a user’s first name, you might name the field ‘firstname’. When the user types her first name in the field and submits the form, the value associated with ‘firstname’ is whatever name the user typed in the field.

The whole point of a form is to gather values associated with input controls, so how you set the name and value for each control is important. The following sections explain how you should work with names and values for each of the input controls.

The <input> element (and by extension, the empty <input … > tag) is the major player when it comes to using HTML forms to collect user input. Inside the <input> element is where you define the kinds of input you want to collect, and how you package and present the input fields and cues you present to users so they can give you what you’re asking for.

Input fields

You can use a variety of input field types in your forms, such as:

• text,
• password, 
• radio (button), 
• checkbox, 
• hidden, 
• search, 
• tel (telephone number),
• url, email (address),
• datetime, date, month, week, time,datetime-local, 
• number, range (sets a range of numeric values), color,
• and more. 

Not all fields require values for name and type attributes (for example, text box or password fields), but it’s a good idea to provide users with explanatory labels and examples of input data any time they might have questions about formats — such as when pondering whether to include dashes or spaces in credit card numbers. Check boxes and radio buttons, on the other hand, require such information so they can be properly labeled when the browser shows users what selections are available. For input elements that require a user to select an option (a check box or radio button) rather than typing something into a field, you define both the name and the value. When the user selects a check box or a radio button and then clicks ‘Submit’, the form returns the name and value assigned to the element.

---