Lesson 8 – HTML5 Forms

Forms in HTML5 serve different purposes. Users often have to provide different types of information such as zip codes, names, email address, and search queries while browsing websites. You can use HTML5 forms to collect all types of data from users.

We actually create the form element with opening <form> and closing </form> tags. Subsequently, we use different types of input tags for different types of information such as name, password, and email and so on.

The following code snippet explains how to create a simple form to send the data to the web browser for processing.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <h1>Please Fill Out The Following Form</h1>

   <form action="">
       <input type="text" name="recepient" placeholder="Your Name">
       <input type="email" name="email" placeholder="Your Email">
       <input type="password" name="password" placeholder="Password"><br><br>
       <textarea name="" id="" cols="30" rows="10" placeholder="Your        Message"></textarea>
       <input type="submit" value="Submit">
       <input type="reset" value="clear">

Here is how your form will look like.

Input types

Following are the input types used in the above form and their explanation.

Text: Input type “text” is used to insert the text field in the form. Users can type different types of data in this field.

Email: Input type “email” inserts an email field in the form. Users can type their emails in this field.

Password: Input type “password” inserts a password field in the form. Users can type their passwords in this field.

Submit: Input type “submit” actually submits the form to the browser for processing. The Value attribute actually gives a name to the input which browser actually displays.

Reset: Input type “reset” resets the form.

You can also see a “textarea” in the form. Visitors can use textarea to write their messages.

There are many other types of input fields such as:

  • <input type=”color”>
  • <input type=”button”>
  • <input type=”date”>
  • <input type=”month”>
  • <input type=”date”>
  • <input type=”number”>
  • <input type=”file”>
  • <input type=”datetime-local”>
  • <input type=”hidden”>
  • <input type=”checkbox”>
  • <input type=”radio”>
  • <input type=”range”>
  • <input type=”tel”>
  • <input type=”url”>
  • <input type=”week”>

In the next chapter, we will learn how to create tables in HTML5.