It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Elements and Attributes for HTML Forms

Reading time 5 min
Published Jun 23, 2017
Updated Oct 17, 2019

TL;DR – HTML forms are useful in gathering information from website users.

Understanding HTML Forms

HTML forms help you interact with your users by allowing them to send data to your website. To initialize an HTML form, you must use a pair of <form> tags to wrap the form elements (e.g., text input areas and buttons):

Example
<form action="/action_page.php">
  First name:<br><input type="text" name="name" value="John"><br>
  Last name:<br><input type="text" name="surname" value="Snow"><br>
  <input type="submit" value="Submit">
</form> 

Using different form elements, you can let your user choose from a predefined set of options or type in their own text:

Text input elements Multiple choice elements
Text field Radio buttons
Text area Checkboxes
Password field Dropdown lists

To specify an input area, you have to use the <input> tags:

Example
<form> 
  <br>First name:<br>
  <input type="text" name="first name" placeholder="firstname"> 
  <br>Last name:<br>
  <input type="text" name="lastname" placeholder="lastname"> 
</form>

You will also need to include a type attribute to specify what kind of data your HTML form can receive from the user. These are all the values it can take in HTML5:

button checkbox color date datetime-local email
file hidden image month number password
radio range reset search submit tel
text time url week

HTML forms usually also have buttons that allow users to submit the data to the server. To create a clickable button, you can use the <input> element with the type attribute and its value defined as submit. You can also use <button> tags:

Example
<button name="submit">
  <strong>Please contact</strong> us today.
</button>

Common Elements for HTML Forms

To collect textual multi-line data, you should use the <textarea> element for your form in HTML. Since the element only requires one type of value, you won't need the type attribute:

Example
<textarea name="comment" cols="30" rows="3" id="comment">Write your comments here</textarea> 

The <label> element defines a label of the input element, allowing the user to have a better understanding of the form:

Example
<label>My Name Field</label>
<input type="text" name="myName" class="myNameInput" required/>

The <fieldset> element defines a group of a few similar elements. They will be shown together as one part of an HTML form but represent separate input elements:

Example
<form action="login" method="POST">
  <fieldset>
    <legend>Login Form:</legend>
    Username: <input type="text" name="user_name">
    Password: <input type="password" name="user_password">
    <input type="submit" value="Login">
  </fieldset>
</form>

To describe the elements inside the <fieldset> element, use <legend>. It helps the user understand what information the <fieldset> requires:

Example
<form>
  <fieldset>
    <legend>This is the title</legend>
    First input: <input type="text" size="30"><br>
    Second input: <input type="text" size="30"><br>
  </fieldset>
</form>

Multi-choice Forms in HTML

By using the <select> element, you can allow users to choose data from a predefined set of multiple options.

Here are the most common types of such elements:

  • Radio buttons
  • Checkboxes
  • Dropdown lists

To specify these elements, you need to use the type attribute with your <input> elements. In the example below, we create three radio buttons:

Example
<form>
  <input type="radio" name="day" value="monday" checked>Monday<br>
  <input type="radio" name="day" value="tuesday">Tuesday<br>
  <input type="radio" name="day" value="wednesday">Wednesday
</form>

The <option> element defines a single option in a multiple choice checklist. You can add as many options as you need:

Example
<select name="housepets">
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="llama">Llama</option>
  <option value="rabbit">Rabbit</option>
  <option value="animal">Animal</option>
</select>

Attributes for HTML5 Forms

Like most HTML elements, forms can have various attributes applied. These are the ones you will see and use most often:

Attribute Description
accept‑charset Outlines the character set in the submitted form
action Sets the destination of the data to be processed
autocomplete Stipulates whether the form should be autocompleted (on by default)
enctype Outlines the encoding type for the submitted information
method Stipulates the HTTP method for submitting the form (get or post)
name Names a form in HTML
novalidate Informs the browser to avoid authenticating the form
placeholder Specifies a placeholder text in a textual input field
target Indicates the target webpage where the processed data will be displayed

Here is a simple example of an HTML5 form with multiple attributes:

Example
<form action="index.php" method="post" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
  <p>Form elements</p>
</form>

The action Attribute

As the name implies, the action attribute outlines the action to be carried out when a user submits the data for processing:

Example
<form action="index.php">

In the example above, when a user clicks the submit button, the data will be relayed to a webpage on the server called index.php.

Writing an action page might be a bit too complicated for a beginner. However, a lot of web hosts actually offer prewritten scripts for these functionalities.

The method Attribute

The method attribute outlines the type of HTTP method to be applied for transmitting the input data on your forms in HTML. The method can either be get or post:

Example
<form action="index.php" method="get">
Example
<form action="index.php" method="post">

For HTML forms, post method is the default value. The difference between the two methods is simple: the submitted form data will be included in the URL if you use get, but not if you use post. Therefore, get allows you to bookmark a certain webpage and create links to it. However, that makes it a poor option for sending sensitive information (e.g., passwords).

HTML Forms: Useful Tips

  • Keep in mind that pressing ENTER in a text field that only allows one line of text will act as pressing the Submit button. Therefore, choose text areas whenever more text might be needed.
  • Using the label attribute increases the clickable area: the user might select an option by clicking on the label as well, not only, e.g., checkbox.
  • Do not use a single radio button in your HTML5 form: this element only has a meaning when it is in a group.