HTML Forms

HTML forms are used to collect user input information.

An HTML form represents a section of a document that contains interactive controls, which send the collected user information to a web server.

An HTML form usually contains various elements such as input fields, checkboxes, radio buttons, dropdown lists, etc.

Here is a simple example of an HTML form:

• The <form> element is used to create a form. The action attribute defines the target URL for submitting form data, and the method attribute defines the HTTP method used to submit the data (here it is "post").
• The <label> element is used to add labels to form elements, improving accessibility.
• The <input> element is one of the most commonly used form elements. It can create text input boxes, password fields, radio buttons, checkboxes, etc. The type attribute defines the type of input box, the id attribute is used to associate with <label> elements, and the name attribute is used to identify the form field.
• The <select> element is used to create a dropdown list, while the <option> element is used to define options in the dropdown list.

Example

Username:
Password:
Gender: Male Female
Subscribe to push notifications
Country: CN USA UK

Try it »

Online Examples

Example

The following example creates a form containing two input fields:

First name:
Last name:

Try it »

Example

The following example creates a form containing a regular input field and a password input field:

Username:
Password:

Try it »

(More examples can be found at the bottom of this page.)

---

HTML Forms

A form is a section that contains form elements.

Form elements allow users to enter content in the form, such as text areas (textarea), dropdown lists (select), radio buttons (radio-buttons), checkboxes (checkbox), etc.

We can use the <form> tag to create a form:

Example

. input element .

---

HTML Form - Input Elements

The most commonly used form tag is the input tag <input>.

The input type is defined by the type attribute.

Next, we introduce several common input types.

---

Text Fields

Text fields are set using the <input type="text"> tag. Text fields are used when users need to enter letters, numbers, etc., in a form.

Example

First name:
Last name:

The browser displays as follows:

Note: The form itself is not visible. Also, in most browsers, the default width of a text field is 20 characters.

---

Password Field

Password fields are defined using the <input type="password"> tag:

Example

Password:

The browser display effect is as follows:

Note: The characters in the password field are not displayed in plain text but are replaced by asterisks * or dots .

---

Radio Buttons

The <input type="radio"> tag defines a radio button option in the form:

Example

Male
Female

The browser display effect is as follows:

---

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes can select one or more options:

Example

I like bicycles
I like cars

The browser display effect is as follows:

---

Submit Button

The <input type="submit"> defines a submit button.

When the user clicks the submit button, the form content will be sent to the server. The action attribute of the form defines the filename of the server-side file.

The action attribute will process the received user input data accordingly:

Example

Username:

The browser display effect is as follows:

If you type a few letters in the text box above and then click the submit button, the input data will be sent to the **html_form_action.php** file, which will display the input result.

In the above example, there is a method attribute, which is used to define the way of submitting form data. It can be one of the following values:

• post: This refers to the HTTP POST method. The form data will be included in the form body and sent to the server, used for submitting sensitive data such as usernames and passwords, etc.
• get: Default value, refers to the HTTP GET method. The form data will be appended to the URL of the action attribute, and separated by ? as a delimiter, generally used for non-sensitive information, such as pagination, etc. For example: where page=1 is the data submitted by the get method.

Example

Name: Save Name: Save

Title

Select me

---

More Examples

Radio Buttons
This example demonstrates how to create radio buttons in HTML.

Checkboxes
This example demonstrates how to create checkboxes in an HTML page. Users can select or deselect checkboxes.

Simple Dropdown List
This example demonstrates how to create a simple dropdown list on an HTML page. A dropdown list is a selectable list.

Pre-selected Dropdown List
This example demonstrates how to create a simple dropdown list with a pre-selected value.

Textarea
This example demonstrates how to create a textarea (multi-line input control). Users can write text in the textarea. There is no limit to the number of characters that can be written.

Create a Button
This example demonstrates how to create a button. You can customize the text on the button.

Form Examples

Form with Border
This example demonstrates how to draw a box with a title around the data.

Form with Input Fields and Submit Button
This example demonstrates how to add a form to a page. This form contains two input fields and a submit button.

Form with Checkboxes
This form contains two checkboxes and a submit button.

Form with Radio Buttons
This form contains two radio buttons and a submit button.

Send Email from Form
This example demonstrates how to send an email from a form.

---

HTML Form Tags

New: HTML5 New Tags

Tag	Description
form	Defines a form for user input
input	Defines an input field
textarea	Defines a text area (a multi-line input control)
label	Defines a label for an input field
button	Defines a button
select	Defines a dropdown list
option	Defines an option in a dropdown list
datalist	Specifies a list of predefined options for an input field
output	Defines the result of a calculation