HTML Form
Written By: Avinash Malhotra
Updated on
HTML Forms are used to send data across the web, like login, signup, search etc. Forms are often used as contact form to convert information input by a user into leads. Forms includes many inputs controls like text, password, file, radio, checkbox etc.
The elements used in HTML form are form tag as parent, input, textarea,, select, button and label.
HTML Form Elements
HTML Form Tag
Form Tag defines the form and within this tag, there is action attribute which tells the form where its contents will be sent when it is submitted.
An HTML form can have input elements, checkbox, radio buttons, submit button and more.A form can also contain select dropdown, textarea, fieldset, legend, and label elements.
Create HTML Form
form is build inside <form> tag. See the code below
<form action="" method="get" name="enquiry">
/* Content */
</form>
Form tag Attributes
| Attribute | Values | Use |
|---|---|---|
| method | get or post | http get method submit form data but is visible in url.
post includes data in body. more secure as data is not visible to user in url |
| action | path | the backend file collecting form data |
| name | any name | name of form control |
Input Element
The most important form element is the input element. The input element is used to get user information. An input element can be of type text, password, checkbox, radio button, submit button and more.
The default input type is text.
Attributes in Input element
| Attribute Name | values | Use |
|---|---|---|
| type | text, password, file, radio, checkbox, button, submit, and reset | type defines type of input control. |
| size | default value is 20 | change size of input control |
| tabindex | any numeric value | used to define a sequence followed by user when he navigate using Tab key |
| value | any possible value | set a default value of input control |
| maxlength | n digits | set maximum characters limit |
| disabled | disabled input control, or fieldset tag | |
| checked | Check checkbox or radio button | |
| multiple | Used in input type file for multiple files upload |
Input Type Text
Input type text <input type="text"> is the common input element for name, surname, country, numbers and symbols in single line. Default input type is always text. But still it is recommended to define type attribute in input element.
Inputs are always used inside label.
HTML Input type text
<label>First Name: <input type="text"></label>
<label>Last Name: <input type="text"></label>
Label
Label tag is used to write the content just before text field. To Specify particular label, place input inside label or the value of for attribute inside label should match the id of input control.
Input in Label
<label>First Name: <input type="text"></label>
Input Outside Label
<label for="lname">Last Name:</label>
<input type="text" id="lname">
Label Usage
Its always recommended to use inputs with labels for web accessibility. If label is not required, use aria-label attribute with placeholder.
<label for="name">Name:</label> <input type="text" id="name" > <span>Name:</span> <input type="text"> value attribute
value attribute can also be used inside input or textarea. Usually we ask user to fill values, but if value is fixed, use value attribute.
<form>
<label for="fname">First Name:</label>
<input type="text" value="First Name" id="fname" >
<label for="lname">Last Name:</label>
<input type="text" value="Last Name" id="lname" >
</form>
Maxlength
maxlength attribute is used to restrict no of characters in a text field. maxlength value is a number. Maxlength attribute is useful for form validations.
Input with maxlength
<form>
<label for="fname">First Name:</label>
<input type="text" id="fname" maxlength="10">
<label for="age">Age:</label>
<input type="text" id="age" maxlength="3">
</form>
Size
Size attribute is used to set the size of input or textarea. The default size is 20. To increase or decrease input size, change value of size.
size attribute example
<label>Age: <input type="text" size="3"> </label>
<label>Pincode: <input type="text" size="6" maxlength="6"></label>
Input type Password
The input type password is used to write passwords. The password value is written in encrypt form. i.e. a user cannot see, copy or cut password data from input type password.
Input type password example
<form>
<label for="pwd">Password:</label>
<input type="password" id="pwd" >
</form>
Input type File
Input type file let user to choose file from his system. This can be used to upload a picture, upload resume, upload a video or audio etc.
Default value of input type file is "No file chosen". Once the file is uploaded, the file name replace this text followed by extension.
<form>
<label for="resume">Resume:</label>
<input type="file" id="resume">
</form>
Input type file with multiple
<form>
<label for="pics">Upload pictures : </label>
<input type="file" id="pics" multiple>
</form>
accept
accept attribute is used in input type file to validate type of file or extension. accept can choose one or multiple values.
accept attribute example
<label>Age: <input type="file" accept=".pdf"> </label>
accept attribute with multiple extensions
<label>Age: <input type="file" accept=".jpg, .png"> </label>
Radio Buttons
Radio Buttons are used to choose a single element among a group.
To allow window to choose a single radio, use name attribute with same value on both radio inputs.
Radio Button For Gender Selection
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
Radio Button For Multiple Questions
Question 1
Question 2
Checkbox
Checkbox are used to select multiple selections unlike radio button. They can be checked and unchecked. We can use checkbox for hobbies, interests, terms & conditions, etc.
Form Checkbox
<label> <input type="checkbox"> :Bike</label>
<label> <input type="checkbox"> :Car</label>
Checkbox with disabled
Checbox can also have disabled attribute. A disabled checkbox can't be checked, means checked will remain checked, and unchecked will remain unchecked. See example
HTML Checkbox with disable
<input type="checkbox" disabled>>
Checkbox with checked
Default checkbox state is unchecked. But we can change default state to checked by using checked attribute in input type checkbox. See example
HTML Checkbox with checked
<label><input type="checkbox" checked>: I Agree</label>
Select Dropdown
select or select dropdown is used to fetch single or multiple options in dropdown list. Select options are fixed, thus used can choose only given option or options. To select city, country, date, month, year etc, Select Dropdown is used.
Select dropdown example
<select>
<option selected disabled>--Select City--</option>
<option>New York</option>
<option>Chicago</option>
<option>Los Angeles</option>
<option>Washington DC</option>
</select>
Select with Optgroup
Optgroup element is used to group multiple options in select dropdown. The name of optgroup is set using label attribute in optgroup.
<select>
<option selected disabled>--Select City--</option>
<optgroup label="Metros">
<option>New Delhi</option>
<option>Kolkata</option>
<option>Mumbai</option>
<option>Chennai</option>
</optgroup>
<optgroup label="Others">
<option>Noida</option>
<option>Gurgram</option>
<option>Faridabad</option>
<option>Gaziabad</option>
</optgroup>
</select>
Multiple Attribute in Select
Multiple attribute is used in select dropdown to select more than one options by using Ctrl or Cmd key.
<select multiple>
<option selected disabled>--Select City--</option>
<optgroup label="Metros">
<option>New Delhi</option>
<option>Kolkata</option>
<option>Mumbai</option>
<option>Chennai</option>
</optgroup>
<optgroup label="Others">
<option>Noida</option>
<option>Gurgram</option>
<option>Faridabad</option>
<option>Gaziabad</option>
</optgroup>
</select>
Choose Date Of Birth using Select Dropdown
Textarea
Textarea is used to write multiple line. Like post, query, address, comments, reviews etc. Textarea can have row and col attributes. Default rows are 2, and default columnns are 20.
Textarea Example
<textarea></textarea>
<textarea rows="4"></textarea>
<textarea rows="4" cols="30"></textarea>
Submit Button
Submit Button or input type submit is used to send information from user to web server. Submit button can be used only once in a form tag.
Submit Button example
<input type="submit">
Reset Button
Reset Button or input type reset is used to reload form data, without refreshing webpage. Reset is also used once in a form tag.
Create reset Button
<input type="reset">
Button Tag
Button Tag or Button can create buttons, like input type button. Button Tag is pair element. We can use image, icon or child element inside button tag.
Type of buttons
- Button,
<button>Button</button>. - Reset button,
<button type="reset">Button</button>. - Submit button,
<button type="submit">Button</button>.
Button Tag Example
<button>Button</button>
Fieldset
Form or form controls can also be placed inside fieldset tag. Fieldset tag is used to group form or multiple input controls. Fieldset group form controls in bordered area. We can also use legend tag inside fieldset.
The main functionality of Fieldset is to disable multiple form controls.
Fieldset with Legend
<fieldset>
<legend>Enquiry Form</legend>
<form onsubmit="return false">
<label>Name:<input type="text"></label>
<input type="submit">
<input type="reset"> </form>
</fieldset>
Fieldset with disabled
Fieldset also supports disabled attribute. By adding disables attribute, all form controls including submit button are disabled. Thus user cannot fill and submit form data.
<fieldset disabled>
<legend>Enquiry Form</legend>
<form onsubmit="return false">
<label>Name:<input type="text"></label>
<input type="submit">
<input type="reset"> </form>
</fieldset>
Contact Form Example
A complete HTML Form with all inputs, select dropdown, radio buttons, checkbox, textarea, submit and reset buttons.
<form>
<table>
<tr>
<td>
<label for="uname">Name</label>
</td>
<td>
<input type="text" id="uname" name="username">
</td>
</tr>
<tr>
<td>
<label for="uemail">Email</label>
</td>
<td>
<input type="text" id="uemail" name="usermail">
<button type="button">Check</button>
</td>
</tr>
<tr>
<td>
<label for="age">Age</label>
</td>
<td>
<input type="text" name="userage" id="age" size="2" maxlength="2">
</td>
</tr>
<tr>
<td>
<label>Country</label>
</td>
<td>
<input type="text" value="India" name="country" disabled>
</td>
</tr>
<tr>
<td>
<label for="pass">Password</label>
</td>
<td>
<input type="password" id="pass">
</td>
</tr>
<tr>
<td>
<label for="res">Resume</label>
</td>
<td>
<input type="file" id="res">
</td>
</tr>
<tr>
<td>
<label>Hobbies</label>
</td>
<td>
<label>
<input type="checkbox" checked> Cricket
</label>
<label>
<input type="checkbox"> Football
</label>
</td>
</tr>
<tr>
<td>
<label>Gender</label>
</td>
<td>
<label>
<input type="radio" value="f" name="gender"> Female</label>
<label>
<input value="m" type="radio" name="gender"> Male</label>
</td>
</tr>
<tr>
<td>
<label for="city">City</label>
</td>
<td>
<select id="city" name="city">
<option disabled selected>--Choose City--</option>
<optgroup label="Metros">
<option>New Delhi</option>
<option>Mumbai</option>
<option>Channai</option>
<option>Kolkata</option>
</optgroup>
<optgroup label="Others">
<option>Noida</option>
<option>Gurgram</option>
<option>Faridabad</option>
<option>Gaziabad</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>
<label>Address</label>
</td>
<td>
<textarea rows="4" cols="40"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit">
<input type="reset">
</td>
</tr>
</table>
</form>
Inside form element, button will work as submit button, but outside form, button will work as button.
Html5 Form
These form controls are HTML4/XHTML Based. To learn HTML5 based Form controls and attributes, click here HTML5 Form