Elements and Attributes for HTML Forms

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):

<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:

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

<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:

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:

<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:

<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:

<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:

<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:

<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:

<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:

<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>

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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:

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

<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:

<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:

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

<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.