HTML Forms and Input
HTML form used to collect different types of user input.
Online examples
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action=""> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> < P > < B > Note: </ B > The form itself is not visible. Note that text field and a default width is 20 characters. </ P > </body> </html>
This example demonstrates how to create a text field in the HTML page. The user can write text in a text field.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <form action=""> Username: <input type="text" name="user"><br> Password: <input type="password" name="password"> </form> < The p- > < b > Note: </ b > Password characters in the field is hidden (displayed as asterisks or circles). </ P > </body> </html>
This example demonstrates how to create HTML password fields.
HTML form
Form a region comprising a form element.
Form element allowing user input in the form, for example: text fields (TextArea), drop-down lists, radio buttons (radio-buttons), box (checkboxes) and the like.
Form using the form tag <form> is set:
<form> . input element . </form>
HTML form - input elements
Form tag to be used in most cases is the input tag (<input>).
The input type is defined by the type attribute (type). Most frequently used input types are as follows:
Text field (Text Fields)
Text field is set by <input type = "text"> tag, when the user to type letters, numbers, etc. in the form, the text field will be used.
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
The browser displays the following:
Note: The form itself is not visible. Meanwhile, in most browsers, the default width of the text field is 20 characters.
Password field
Password field with the tag <input type = "password"> to define:
<form> Password: <input type="password" name="pwd"> </form>
The browser display as follows:
Note: The password field characters are not displayed in clear text, but with asterisks or dots instead.
Radio button (Radio Buttons)
<Input type = "radio"> tag defines a table alone box options
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form>
The browser display as follows:
Check boxes (Checkboxes)
<Input type = "checkbox"> defines a checkbox. Require users to select options from one or several given several choices.
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
The browser display as follows:
Submit button (Submit Button)
<Input type = "submit"> defines the submit button.
When the user clicks the OK button, the contents of the form will be sent to another file. The form action attribute defines the file name of the destination file. By the action attribute definition file normally be received input data related to a process. :
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
The browser display as follows:
If you type a few letters in the above text box, and then click the OK button, then the input data is transferred to the "html_form_action.php" page. This page will show the results of input.
More examples
Radio button (Radio buttons)
This example demonstrates how to create radio buttons in HTML.
Check boxes (Checkboxes)
This example demonstrates how to create a check box in an HTML page. Users can select or deselect the check box.
Simple drop-down list
This example demonstrates how to create a simple drop-down list box in an HTML page. Drop-down list box is an optional list.
Pre-selection drop-down list
This example demonstrates how to create a simple drop-down list with a preselected value.
Text fields (Textarea)
This example demonstrates how to create a text field (multi-line text input control). The user can write text in a text field. Words can write characters is not limited.
Create a button
This example demonstrates how to create a button. You can customize the text on the button.
Form instance
Bordered Form
This example demonstrates how to draw a box around the band of the data header.
Form with input boxes and confirmation buttons
This example demonstrates how to add a form to the page. This form contains two fields, and a confirmation button.
Form with checkboxes
This form contains two checkboxes, and a confirmation button.
Form with radio buttons
This form contains two boxes and a confirmation button.
Send e-mail from a form
This example demonstrates how to send e-mail from a form.
HTML form tags
New: HTML5 new label
| label | description |
|---|---|
| <form> | Form definition for user input |
| <input> | Define the input field |
| <textarea> | Defined text field (a multi-line input control) |
| <label> | Tag defines the <input> element, typically enter a title |
| <fieldset> | It defines a set of related form elements, comprising a frame and use them |
| <legend> | The title defines the <fieldset> element |
| <select> | It defines the drop-down list of options |
| <optgroup> | Defined set of options |
| <option> | Defined drop-down list of options |
| <button> | Define a click of a button |
| <datalist>New | Enter a specified list of predefined control options |
| <keygen>New | Defined form key pair generator field |
| <output>New | Define a calculation |