Easy Tutorial
❮ Html Xhtml Index ❯

HTML Forms and Input


HTML forms are used to collect user input.

An HTML form represents a document region 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 fields (textarea), dropdown lists (select), radio buttons (radio-buttons), checkboxes (checkbox), etc.

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 by the <input type="text"> tag, which is used when the user needs to enter letters, numbers, etc., 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 by 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 confirm button, the form content is sent to the server. The form's action attribute action defines the server-side filename.

The action attribute processes the relevant 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 confirm button, the input data will be sent to the htmlformaction.php file, which will display the input results.

The above example has a method attribute, which is used to define how the form data is submitted. It can be one of the following values:

Example

<!-- The following form sends data to the current URL using a GET request, the method defaults 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

Create Button

#

Form with Border

Form with Input Boxes 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
<fieldset> Groups related form elements and is wrapped in a frame
<legend> Defines a title for the <fieldset> element
<select> Defines a dropdown list
<optgroup> Defines an option group
<option> Defines an option in the dropdown list
<button> Defines a clickable button
<datalist> New Specifies a list of pre-defined options for input controls
<keygen> New Defines a key-pair generator field for forms
<output> New Defines a calculation result
❮ Html Xhtml Index ❯