Input Tag

Use the <input> tag to define any one of a number of common form “controls,” as they are called in the HTML and XHTML standards, including text fields, multiple-choice lists, clickable images, and submission buttons. Although there are many attributes for the <input> tag, only the name attribute is required for each element (but not for a submission or reset button; see the following explanation). And as we describe in detail later, each type of input control uses only a subset of the allowed attributes. Additional <input> attributes may be required based upon which type of form element you specify.

Text Fields in Forms

The HTML standards let you include four types of text-entry controls in your forms: a conventional text-entry field, a masked field for secure data entry, a field that names a file to be transmitted as part of your form data, and a special multiline text-entry <textarea> tag. The first three types are <input>-based controls.

Conventional text fields

The most common form input control is the text-entry field for usernames, addresses, and other unique data. A text-entry field appears in the browser window as an empty box on one line and accepts a single line of user input. Eventually, that line of text becomes the value of the control when the user submits the form to the server. To create a text-entry field inside a form in your document you set the type of the <input> form element to text. Include a name attribute as well; it’s required.

<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form method=POST action="http://www.website.com/submitPage.php">
<input type=text name=comments><br>
<input type=text name=zipcode size=10 maxlength=10><br>
<input type="text" name="address" size="30" maxlength="256" /><br>
<input type="text" name="rate" size="13" maxlength="3" value="100" /><br>
<input type="submit" />
</form>
</body>
</html>

password field

Consider the following example for password field

<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action="">
  Username:
  <input type="text" name="user">
  <br>
  Password:
  <input type="password" name="password">
</form>
<p><b>Note:</b> demonstrates password field</p>
</body>
</html>

File-selection controls

As its name implies, the file-selection control lets a user select a file stored on the computer and send it to the server when she submits the form. Create a file-selection control in a form by setting the value of the type attribute to file. Like other text controls, the size and maxlength of a file-selection field should be set to appropriate values, with the browser creating a field 20 characters wide, if not otherwise directed.

<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action="demo_form.asp">
  <input type="file" name="pic" accept="image/*">
  <input type="submit">
</form>
</body>
</html>

Checkboxes

<form>
  What pets do you own?
  <p>
    <input type="checkbox" name="pets" value="dog" /> Dog
  <br />
    <input type="checkbox" checked="checked" name="pets" value="cat" /> Cat
  <br />
    <input type="checkbox" name="pets" value="bird" /> Bird
  <br />
    <input type="checkbox" name="pets" value="fish" /> Fish
  </p>
</form>

Radio Buttons

<form>
  Which type of animal is your favorite pet?
  <p>
    <input type=radio name=favorite value="dog"> Dog
    <input type=radio checked name=favorite value="cat"> Cat
    <input type=radio name=favorite value="bird"> Bird
    <input type=radio name=favorite value="fish"> Fish
</form>

Submission buttons

The submit button (<input type=submit>) does what its name implies, setting in motion the form’s submission to the server from the browser. You may have more than one submit button in a form. You may also include name and value attributes with the submit type of form <input> button.

<input type=submit>
<input type=submit value="Order Kumquats">
<input type="submit" value="Ship Overnight" name="ship_style" />

Reset buttons

<input type=reset>
<input type="reset" value="Use Defaults" />

Custom image buttons

<input type="image" src="pics/map.gif" name="map" />
<input type=image src="pics/xmap.gif" align=top name=map>

Multiple buttons in a single form

<input type=submit name=edit value="Add">
<input type=submit name=edit value="Delete">
<input type=submit name=edit value="Change">
<input type=submit name=edit value="Cancel">

Hidden Fields

<input type=hidden name=action value=change>