Learn one of the most powerful programming languages in the world and become a rockstar developer.
HTML Forms are required to collect different kinds of user inputs, such as contact details like name, email address, phone numbers, or details like credit card information, etc.
Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit buttons, etc. Users generally complete a form by modifying its controls e.g. entering text, selecting items, etc. and submitting this form to a web server for processing.
The <form>
tag is used to create an HTML form. Here's a simple example of a login form:
<form> <fieldset> <legend>Log In</legend> <label>Username: <input type="text"></label> <label>Password: <input type="password"></label> <input type="submit" value="Submit"> </fieldset> </form>
The following section describes different types of controls that you can use in your form.
This is the most commonly used element within HTML forms.
It allows you to specify various types of user input fields, depending on the type attribute. An input element can be of type text field, checkbox, password field, radio button, submit button, reset button, etc. and several new input types introduced in HTML5.
Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
The most used input types are described below.
Text fields are one line areas that allow the user to input text.
Single-line text input controls are created using an <input>
element, whose type
attribute has a value of text
. Here's an example of a single-line text input used to take username:
<form> <label>username:</label> <input type="text"> </form>
— The output of the above example will look something like this:
<input type="radio">
defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
<form> <label>Radio:</label> <input name="gender" type="radio"> Male <input name="gender" type="radio"> Female </form>
— The output of the above example will look something like this:
<form> <label>Textarea:</label> <textarea type="text"> %lt;/textarea> </form>
— The output of the above example will look something like this:
This is also created using an <input>
element, whose type
attribute value is set to file
.
<form> <label>Choose File:</label> <text type="file"> </form>
— The output of the above example will look something like this:
Select box is created using the <select>
element and <option>
element. The option elements within the <select>
element define each list item.
<form> <select> <option> NEPAL </option> <option> INDIA </option> <option> CHINA </option> </select> </form>
— The output of the above example will look something like this:
Select box is created using the <select>
element and <option>
element. The option elements within the <select>
element define each list item.
<input type="submit">
defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action
attribute:
<form> <option> CHINA </option> <label for="first-name">First Name:</label> <input type="text" name="first-name" id="first-name"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form>
— The output of the above example will look something like this:
HTML5 added the following attributes for <input>
:
and the following attributes for <form>
: