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>
#
#
Form with Input Field and Submit Button
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 |