HTML Form and Input

HTML forms are used to collect different types of user input.

Online examples

Create a text field (Text field)
This example demonstrates how to create a text field in an HTML page. The user can write text in the text field.

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

(You can find more examples at the bottom of this page.)

HTML form

A form is an area that contains form elements.

Form elements allow users to enter content in the form, such as: textarea, drop-down list, radio-buttons, checkboxes, etc.

The form uses the form tag <form> to set:

<form>
.
input element
.
</form>

HTML form-input element

The form tag used in most cases is the input tag (<input>).

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

Text Fields

The text field is set by the <input type=”text”> tag. When the user wants 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 as follows:

First name:
Last name:

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

Password field

The password field is defined by the tag <input type=”password”>:

<form>
  Password: <input type="password" name="pwd">
</form>

The browser display effect is as follows:

Password:

Note: The characters in the password field will not be displayed in plain text, but replaced by asterisks or dots.

Radio Buttons

The <input type=”radio”> tag defines the form radio options

<form>
  <input type="radio" name="sex" value="male">Male<br>
  <input type="radio" name="sex" value="female">Female
</form>

The browser display effect is as follows:

Male
Female

Checkboxes

<input type=”checkbox”> defines the checkbox. The user needs to select one or more options from a number of given options.

<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 effect is as follows:

I have a bike
I have a car

Submit Button

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

When the user clicks the confirmation button, the content of the form will be transferred to another file. The action attribute of the form defines the file name of the destination file. The file defined by the action attribute usually processes the received input data. :

<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 effect is as follows:

Username:

If you type a few letters in the above text box, and then click the confirm button, the input data will be sent to the “html_form_action.php” page. The page will display the input result.

More examples

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

Checkboxes (Checkboxes)
This example demonstrates how to create checkboxes in an HTML page. The user can check or uncheck the check box.

Simple drop-down list
This example demonstrates how to create a simple drop-down list box in an HTML page. The drop-down list box is a selectable list.

Preselected drop-down list
This example demonstrates how to create a simple drop-down list with preselected values.

Textarea
This example demonstrates how to create a textarea (multi-line text input control). The user can write text in the text field. 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 a border
This example demonstrates how to draw a box with a title around the data.

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

Form with check boxes
This form contains two check boxes and a confirmation button.

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

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

HTML form tags

New : HTML5 New Tab

label description
<form> Define the form for user input
<input> Define input fields
<textarea> Define a text field (a multi-line input control)
<label> Defines the label of the <input> element, generally the input title
<fieldset> A set of related form elements is defined and enclosed by a frame
<legend> Defines the title of the <fieldset> element
<select> Defines a drop-down list of options
<optgroup> Define option group
<option> Define the options in the drop-down list
<button> Define a click button
<datalist>New Specify a predefined list of input control options
<keygen>New Defines the key pair generator field of the form
<output>New Define a calculation result