HTML Forms

The HTML <form> element defines a form that is used to collect user input from a web page. An HTML <form> element contains different types of user input elements like text boxes, checkboxes, radio buttons, large textareas, submit button, etc.

HTML Forms - Input Element

The HTML <input> element is the most used form element of all in HTML forms. It is used to input texts, emails, dates, numbers and much more. The checkboxes and radio buttons on web pages are also created using <input> element. The type attribute defines the way an <input> element is displayed in a web page. Each form element must have a reference name for submitting data or else the data from that form element will not be sent.

HTML Input - Type Attribute

Input Types	Description
<input type="text">	Defines a single line text input field
<input type="email">	Defines a single line email input field
<input type="password">	Defines a single line password input field where the input value is replaced with *
<input type="radio">	Defines a radio button to select one of many choices
<input type="checkbox">	Defines a checkbox to select multiple options
<input type="date">	Defines a date input field which comes with a calendar
<input type="color">	Defines a color input field
<input type="number">	Defines a single line number input field
<input type="tel">	Defines a single line telephone number input field
<input type="url">	Defines a single line url input field
<input type="search">	Defines a single line search text input field
<input type="time">	Defines a single line time input field
<input type="range">	Defines a range input field
<input type="datetime-local">	Defines a single line text input field for date and time
<input type="file">	Defines a button to upload one or multiple file
<input type="week">	Defines a single line input field for week number and year, comes with a calendar
<input type="submit">	Defines a submit button to submit the form
<input type="reset">	Defines a reset button to reset all the form fields

HTML Text Input Example

<form>
  <p>First name:</p>
  <p><input type="text" name="firstname"></p>
  <p>Last name:</p>
  <p><input type="text" name="lastname"></p>
</form>

First name:

Last name:

The <form> element is not visible but other input fields are visible. The default width of a text field is 20 characters.

HTML Radio Input Example

<form>
  <label><input type="radio" name="gender" value="male" checked> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>
  <label><input type="radio" name="gender" value="other"> Other</label>
</form>

Male Female Other

Input type radio and checkbox are written multiple times, each time with a different value. Reference name attribute for each of those values are same which means all the options point to the same thing where only one of the option can be chosen. The attribute value holds the value to be sent as user data via form as there is no other way to input data in this input type. The attribute checked keeps that option checked initially while the text outside the <input> element is the only text visible to web page viitors except for the radio button. This helps them understand which value is being chosen. <label> helps to group the input element and the plain text outside the input tag together so that the users can click on the text and get the option chosen instead of the need to click on the radio button itself.

HTML Form - Input Attributes

Attribute	Description
disabled	Specifies that an input field should be disabled
max	Specifies the maximum value for an input field
maxlength	Specifies the maximum number of character for an input field
min	Specifies the minimum value for an input field
pattern	Specifies a regular expression to check the input value against
readonly	Specifies that an input field is read only (cannot be changed)
required	Specifies that an input field is required (must be filled out)
size	Specifies the width (in characters) of an input field
step	Specifies the legal number intervals for an input field
value	Specifies the default value for an input field
placeholder	Displays information inside the input field and hides once any input value is added in the input field

HTML Form - Input Element Examples

input elements with min and max values

<input type="date" name="birthday" max="2009-12-31">
<input type="date" name="birthday" min="2000-01-02">
<input type="number" name="quantity" min="1" max="10">

input element with maxlength attribute

<input type="text" name="fullname" maxlength="15">

input element with multiple attribute

<input type="file" name="images" multiple>

input element with pattern attribute

<input type="text" name="country" pattern="[A-Za-z]{3}" title="3 Letter code">

input element with placeholder attribute

<input type="text" name="name" placeholder="Enter Your Fullname">

input element with required attribute

<input type="text" name="fullname" required>

input element with step attribute

<input type="number" name="score" step="3">

input element with size attribute

<input type="text" name="fullname" size="25">

input element with readonly attribute

<input type="text" name="fullname" value="James Smith" readonly>

input element with disabled attribute

<input type="text" name="fullname" value="James Smith" disabled>

HTML Form - Action Attribute

The input type submit is the button that submits the form data to the server where the data is processed as needed via another page which holds the data processing code. These codes can be written using any server side script. The data processing page is defined in the HTML <form> tag using action attribute. If the action attribute is not present in the form, the processing code is supposed to written in the same page where the form is displayed.

<form action="process.php">
  <p>First name:</p>
  <p><input type="text" name="firstname"></p>
  <p>Last name:</p>
  <p><input type="text" name="lastname"></p>
  <p><input type="submit" value="Submit"></p>
</form>

HTML Form - Target Attribute

The target attribute can be added to an HTML <form> tag to make the result of a form submission appear in a new window. The default value is _self that makes the result appear in the same window where the form is displayed while _blank makes the result appear in a new window. Other target values also work the same way it works for links.

<form action="process.php" target="_blank">

HTML Form - Method Attribute

The method attribute specifies the HTTP request method (GET or POST) to be used when submitting the form data.

The GETmethod is the default method for form submission where the submitted data will be visible on the url like action.php?firstname=James&lastname=smith. The length of the URL is limited to 3000 characters. This method is insecured as all the data will be visible where sensitive information like username and password should not be sent.

Post method does not display data on the URL while there is no character limit to be sent as well.

It is always a better option to use Post over Get method while submitting a form.

<form action="process.php" method="POST">
  <p>First name:</p>
  <p><input type="text" name="firstname"></p>
  <p>Last name:</p>
  <p><input type="text" name="lastname"></p>
  <p><input type="submit" value="Submit"></p>
</form>

HTML Form - Fieldset

The <fieldset> element is used to group related data in a form. The <legend> element defines a caption for the form elements inside a <fieldset>.

<form>
<fieldset>
  <legend>Personal information:</legend>
  <p>First name:</p>
  <p><input type="text" name="firstname"></p>
  <p>Last name:</p>
  <p><input type="text" name="lastname"></p>
  <p><input type="submit" value="Submit"></p>
</fieldset>
</form>

Personal information:

First name:

Last name:

HTML Form - Autocomplete Attribute

The autocomplete attribute defines whether the browser should autocomplete a form or not based on users' past data entry reference. The default value is on.

<form autocomplete="off">

HTML Form - Enctype Attribute

The enctype attribute defines whether the form data should be url encoded or not. Available options are as follows:

Enctype Value	Description
application/x-www-form-urlencoded	(Default) spaces are converted to + symbols and special characters are converted to ASCII HEX values
multipart/form-data	No character encoding but required for file uploads
text/plain	No character encoding except spaces converted to + symbols

HTML Form - Name Attribute

The name attribute is used to identify the form for DOM usage like writing validation codes for specific form via javascript.

<form name="userdata">

HTML Form - Novalidate Attribute

The novalidate attribute is used to instruct the browser not to validate the form data on its own.

<form novalidate>

HTML Form - Formaction Attribute

The formaction attribute defines the URL of a file that will process form data when the form is submitted. This is quite similar to the action attribute but is added to the submit button and overrides the action attribute. It is generally added to a second submit button.

<form action="process.php">
  <p>First name: <input type="text" name="fname"></p>
  <p>Last name: <input type="text" name="lname"></p>
  <p><input type="submit" value="Submit"></p>
  <p><input type="submit" formaction="process2.php" value="Submit as Admin"></p>
</form>

HTML Form - Formenctype Attribute

Similar to the formaction attribute, the formenctype attribute overrides the enctype attribute of the form and is added to the submit button. It is generally added to a second submit button.

HTML Form - Formmethod Attribute

The formmethod attribute overrides the method attribute of the form and is added to the submit button. It is generally added to a second submit button.

HTML Form - Formnovalidate Attribute

The formnovalidate attribute overrides the novalidate attribute of the form and is added to the submit button. It is generally added to a second submit button.

HTML Form - Formtarget Attribute

The formtarget attribute overrides the target attribute of the form and is added to the submit button. It is generally added to a second submit button.

HTML Form - Select Element

The <select> element defines a drop-down list in HTML. It contains multiple options from where one or multiple options can be selected.

Nepal India United States Others

The <option> element defines an option that can be selected from the dropdown list.

The first option on the list is selected by default. You can add selected attribute to any option to make it selected.

<select name="nationality">
  <option>Nepal</option>
  <option selected>India</option>
  <option>United States</option>
  <option>Others</option>
</select>

You can add the size attribute to <select> element to define the number of visible options on the dropdown.

<select size="3">  

You can add multiple attribute to <select> element to allow selection of multiple options from the dropdown.

<select multiple>  

HTML Forms - Textarea Element

The <textarea> element defines a multi-line text input field.

<textarea name="message">This is a text area.</textarea>

This is a textarea.

Textarea - Attributes

The rows attribute defines the visible number of character lines in a textarea while the cols attribute defines the width (character length) of the textarea.

<textarea name="message" row="10" cols="50"></textarea>

HTML Form - Button Element

The <button> element defines a clickable button which can be used instead of input type submit. Since, different browsers use different button types, it is always a good idea to add type attribute along with a button.

<button type="submit">Submit</button>

HTML Form - Datalist Element

The <datalist> element works quite similar to the <select> element and specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of the pre-defined options as they input data but they can enter other data too. The list attribute of the <input> element must refer to the id attribute of the <datalist> element.

<form action="process.php">
  <input list="countries">
  <datalist id="countries">
    <option value="Nepal">
    <option value="India">
    <option value="United States">
    <option value="Others">
  </datalist> 
</form>

---

Try It Yourself »

---

1 Like 0 Dislike 1 Comment Share Tweet