HTML Forms are used to select different kinds of user input.
Try it Yourself - Examples
How to create text fields. The user can write text in a text field.
Create password field
How to create a password field.
(You can find more examples at the bottom of this page)
HTML Forms
HTML forms are used to pass data to a server.An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
<form>
.
input elements
.
</form>
.
input elements
.
</form>
HTML Forms - The Input Element
The most important form element is the <input> element.The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.
The most common input types are described below.
Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Password Field
<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
Password: <input type="password" name="pwd">
</form>
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<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>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
Submit Button
<input type="submit"> defines a submit button.A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "demo_form_action.asp". The page will show you the received input.
More Examples
How to create radio buttons.
Checkboxes
How to create checkboxes. A user can select or unselect a checkbox.
Simple drop-down list
How to create a simple drop-down list.
Drop-down list with a pre-selected value
How to create a drop-down list with a pre-selected value.
Textarea
How to create a multi-line text input control. In a text-area the user can write an unlimited number of characters.
Create a button
How to create a button.
Form Examples
How to create a border around elements in a form.
Form with text fields and a submit button
How to create a form with two text fields and a submit button.
Form with checkboxes
How to create a form with two checkboxes and a submit button.
Form with radio buttons
How to create a form with two radio buttons, and a submit button.
Send e-mail from a form
How to send e-mail from a form.
HTML Form Tags
= Tag added in HTML5.
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <button> | Defines a clickable button |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <keygen> | Defines a key-pair generator field (for forms) |
| <output> | Defines the result of a calculation |
