HTML Form and Input
HTML Form Collects User Input Information
HTML Form Represents a Region in the Document, Containing Interactive Controls, and Sends the Collected User Information to the Web Server.
HTML Form Usually Contains Various Input Fields, Checkboxes, Radio Buttons, and Drop-down Lists.
Here is an example of a simple HTML Form:
<form>Element is used to create a form,actionAttribute defines the URL of the target for the form data submission,methodAttribute defines the HTTP method (here using "post") for submitting the data.<label>Element is used to add labels to form elements, improving accessibility.<input>Element is one of the most commonly used form elements, capable of creating text input fields, password fields, radio buttons, and check boxes.typeAttribute defines the type of input field,idAttribute is used to associate<label>Element,nameAttribute is used to identify the form field.<select>Element is used to create a drop-down list,<option>Element is used to define the options in the drop-down list.
Example
<!-- Text Input Field -->
<label for="name">Username:</label>
<input type="text" id="name" name="name" required>
<br>
<!-- Password Input Field -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- Radio Button -->
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<br>
<!-- Check Box -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">Subscribe to Push Notifications</label>
<br>
<!-- Drop Down List -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
Try It »
Online Example
Example
Here is an example of a form that contains two input fields:
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Try It »
Example
Here is an example of a form that contains a regular input field and a password input field:
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
Try It »
(You can find more examples at the bottom of this page.)
HTML Form
Form is an area containing form elements.
Form elements are elements that allow users to input content, such as text fields (textarea), drop-down lists (select), radio buttons (radio-buttons), and check boxes (checkbox).
We can use<form>Tag to create a form:
Example
.
input Element
.
</form>
HTML Form - Input Elements
Most commonly used form tags are input tags<input>。
Input Type is defined bytypeAttribute.
We will introduce several commonly used input types.
Text Field (Text Fields)
Text Field is defined by<input type="text">Tag, when users need to input letters, numbers, etc., they will use the text field.
Example
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Browser displays as follows:
Note:The form itself is not visible. In most browsers, the default width of the text field is 20 characters.
Password Field
Password Field is defined by<input type="password">Tag:
Example
Password: <input type="password" name="pwd">
</form>
Browser displays as follows:
Note:Password Field characters will not be displayed in plain text, but will be replaced with asterisks or dots.*Radio Button (Radio Buttons).Tag defines the options for the radio buttons:
Radio Button (Radio Buttons)
<input type="radio">Browser displays as follows:
Example
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Define the check boxes.
Check Box (Checkboxes)
<input type="checkbox">Browser displays as follows:
Check Box (Checkboxes)
Example
<input type="checkbox" name="vehicle[]" value="Bike">I like bicycles<br>
<input type="checkbox" name="vehicle[]" value="Car">I like small cars
</form>
Browser displays as follows:
Submit Button (Submit)
<input type="submit">Define the submit button.
When the user clicks the confirm button, the form's content will be sent to the server. The form's action attributeactionDefines the file name on the server.
actionAttribute will be processed on the received user input data:
Example
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Browser displays as follows:
If you enter several letters in the text field above and click the confirm button, the input data will be sent tohtml_form_action.phpFile, and the page will display the input results.
In the above example, there is a method attribute, which is used to define the submission method of the form data, can be one of the following values:
-
post: HTTP POST method, the form data will be included in the form body and sent to the server, used to submit sensitive data, such as username and password.
-
get: Default value, HTTP GET method, the form data will be appended to theactionAttribute's URL, and separated by?, generally used for non-sensitive information, such as pagination, etc. For example: https://www.example.com/?page=1, the page number "1" is the get method submitted data.
Example
<form>
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- Below is a form that uses POST request to send data to the current URL. -->
<form method="post">
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- Form uses fieldset, legend, and label tags -->
<form method="post">
<fieldset>
<legend>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>
More Examples
Radio Button (Radio Buttons)
This example demonstrates how to create radio buttons in HTML.
Check Box (Checkboxes)
This example demonstrates how to create check boxes in HTML page. Users can select or unselect check boxes.
Simple Drop Down List
This example demonstrates how to create a simple drop-down list box. The drop-down list box is an optional list.
Simple Drop Down List with Preselected Values
This example demonstrates how to create a simple drop-down list with preselected values.
Text Area (Textarea)
This example demonstrates how to create a text area (multi-line input control). Users can write text in the text area. The number of characters that can be written is not limited.
Create Button
This example demonstrates how to create a button. You can customize the text on the button.
Form Example
Form with Borders
This example demonstrates how to draw a form around the data with a title.
Form with Input Fields and Confirm Button
This example demonstrates how to add a form to the page. This form contains two input fields and a confirm button.
Form with Check Boxes
This form contains two check boxes and a confirm button.
Form with Radio Buttons
This form contains two radio buttons and a confirm button.
Send Email from Form
This example demonstrates how to send email from a form.
HTML Form Label
New: HTML5 New Tags
| Tag | Description |
|---|---|
| <form> | Defines the form where users can input data |
| <input> | Defines the input field |
| <textarea> | Defines the text field (a multi-line input control) |
| <label> | Defines the <input> element's tag, usually the input title |
| <fieldset> | Defines a group of related form elements and encloses them with an outer frame |
| <legend> | Defines the <fieldset> element's title |
| <select> | Defines the drop-down list options |
| <optgroup> | Defines the option group |
| <option> | Defines the drop-down list options |
| <button> | Defines a click button |
| <datalist>New | Specify a pre-defined input control option list |
| <keygen>New | Defines the key generator field for the form |
| <output>New | Defines a calculation result |