HTML Forms

HTML forms are used to collect different types of user input, and all browsers support the <form> tag. The <form> tag is used to create HTML forms for user input. Forms can contain input elements such as text fields, checkboxes, radio buttons, submit buttons, etc.

Online Examples

Create text field input box
This example demonstrates how to create a text field input box in an HTML page. Users can write text in the text field.

Create password field input box
This example demonstrates how to create an HTML password field.

HTML Forms

A form is an area that contains form elements.

Form elements allow users to enter content in the form, such as: text fields (textarea), drop-down lists, radio buttons (radio-buttons), checkboxes (checkboxes) and so on.

Forms are set using the form tag <form>:

<form>
.
input element
.
</form>

HTML Forms - Input Elements

The most commonly used form tags are input tags (<input>).

The input type is defined by the type attribute (type). The most commonly used input types are as follows:

Text Fields

Text fields are set by the <input type="text"> tag. They are used when users need to enter letters, numbers, and other content in a form.

<form action="/run/demo-form.php"> 　　
First name:<input type="text" name="firstname" size="20"/><br/>Last name:<input type="text" name="lastname" size="20"/><br/><input type="submit" value="Submit"/> </form>

The browser displays as follows:

Note:The form itself is not visible. At the same time, the default width of the text field is 20 characters.

Password field

The password field is defined by the label <input type="password">:

<form action="/run/demo-form.php"> 　　
Password:<input type="password" name="pwd"/><input type="submit" value="Submit"/> </form>

Browser display effect 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 the radio button options in the form.

<form action="/run/demo-form.php"> 　　
<input type="radio" name="sex" value="male"/>Male<br/><input type="radio" name="sex" value="female"/>Female<input type="submit" value="Submit"/> </form>

Browser display effect as follows:

Checkboxes

<input type="checkbox"> defines the checkbox. The user needs to select one or more options from the given choices.

<form action="/run/demo-form.php"> 　　
<input type="checkbox" name="vehicle" value="Bike"/>I have a bike<br/><input type="checkbox" name="vehicle" value="Car"/>I have a car<input type="submit" value="Submit"/> </form>

Browser display effect as follows:

Submit Button

<input type="submit"> defines the submit button.

When the user clicks the confirm button, the content of the form will be sent to another file. The action attribute of the form defines the filename of the target file. The file defined by the action attribute usually processes the received input data:

<form name="input" action="/run/demo-form.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Browser display effect as follows:

If you type a few letters in the text box above and then click the confirmation button, the input data will be sent to the "html_form_action.php" page. This page will display the input results.

More online examples

Radio button (Radio buttons)
This example demonstrates how to create radio buttons in HTML.

Checkbox (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 box in an HTML page. The dropdown list box is an optional list.

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

Text area (Textarea)
This example demonstrates how to create a text area (a multi-line text input control). Users can write text in the text area. The number of characters that can be written is unlimited.

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

Form example

Form with border
This example demonstrates how to draw a titled box around data.

Form with input boxes and confirmation button
This example demonstrates how to add a form to a page. This form contains two input boxes and a confirmation button.

Form with checkboxes
This form contains two checkboxes and a confirmation button.

Form with radio buttons
This form contains two radio buttons and a confirmation button.

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

HTML form tags

New : HTML5New label