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>
