Easy Tutorial
❮ Tag Mark Att Area Type ❯

HTML Forms and Input


HTML forms are used to collect user input.

An HTML form represents a region in a document that contains interactive controls for submitting information to a web server.


Online Examples

Example

The following example creates a form with two input boxes:

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Example

The following example creates a form with a regular input box and a password input box:

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

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


HTML Forms

A form is a region that contains form elements.

Form elements allow users to input content in the form, such as text areas, drop-down lists, radio buttons, checkboxes, and more.

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

Example

<form>
.
input elements
.
</form>

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 will introduce several commonly used input types.


Text Fields

Text fields are set using the <input type="text"> tag. They are used when the user needs to enter letters or numbers in the form.

Example

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

The browser displays as follows:

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


Password Fields

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

Example

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

The browser displays as follows:

Note: Characters in the password field are not displayed in plain text but are replaced with asterisks * or dots ..


Radio Buttons

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

Example

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

The browser displays as follows:


Checkboxes

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

Checkboxes can select one or more options:

Example

<form>
<input type="checkbox" name="vehicle" value="Bike">I like bikes<br>
<input type="checkbox" name="vehicle" value="Car">I like cars
</form>

The browser displays as follows:


Submit Button

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

When the user clicks the submit button, the form content is sent to the server. The form's action attribute defines the server-side filename.

The action attribute processes the received user input data:

Example

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

The browser displays as follows:

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

The above example includes a method attribute, which defines how the form data is submitted. It can have the following values:

- post: Refers to the HTTP POST method, where form data is included in the body of the form and sent to the server, used for submitting sensitive data such as usernames and passwords.

get: The default method, refers to the HTTP GET method, where form data is appended to the URL specified in the action attribute and separated by a ?, typically used for non-sensitive information such as pagination. For example: https://www.tutorialpro.org/?page=1, where page=1 is data submitted using the GET method.

Examples

<!-- The following form sends data to the current URL using a GET request, with the method defaulting to GET. -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- The following form sends data to the current URL using a POST request. -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- Form using fieldset, legend, and label tags -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
</form>

#

Radio Buttons

Checkboxes

Simple Dropdown List

Pre-selected Dropdown List

Textarea

Creating Buttons

#

Form with Border

Form with Input Field and Submit Button

Form with Checkboxes

Form with Radio Buttons

Sending Email from Form


HTML Form 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> element, typically an input title
<fieldset> Groups related form elements and includes them in a box
<legend> Defines a title for the <fieldset> element
<select> Defines a dropdown options list
<optgroup> Defines an option group
<option> Defines an option in the dropdown list
<button> Defines a clickable button
<datalist> New Specifies a predefined list of options for an input control
<keygen> New Defines a key-pair generator field for the form
New Define a calculation result
❮ Tag Mark Att Area Type ❯