HTML Web Forms

Web forms are essential for any website to obtain various types of information from visitors, which can be used for future purposes. It works in the same way that we use a paper form to gather or submit information. This lesson guides you on creating web forms and their various useful components, which allow you to collect and manage data easily and efficiently.

What Are Web Forms?

A Web Forms is a part of an HTML document containing HTML form elements such as input, select, checkboxes, radio, buttons, etc. Users typically complete a form by entering texts, selecting options, and modifying form elements before submitting the form for processing.

What Is the Need for Web Form on Any Website?

Some web forms are commonly used, such as contact forms, user subscription forms, registration forms, etc. However, web forms may vary for every business, as their needs are different.

Common types of web forms are as follows:

  • Contact form
  • Registration form
  • Sign-in Form
  • Lead generation form
  • Order form
  • Survey form
  • Search form
  • Email form

How to Create Forms in HTML?

The <form> tag in HTML is used to define the form in an HTML document. This tag is a container for all other input elements used within this form tag to obtain user input.

Syntax:
<form>
<!-- HTML Form Element -->
</form>

Attributes of the HTML <form> Element

Syntax:
<form action="signin.php" method="post">
<!-- HTML Form Element -->
</form>

The <form> element has two important attributes, the action attribute, and the method attribute. Here, the form action specifies the location where the form data will be submitted, and the form method specifies the HTTP method that is usually GET / POST.

The various HTTP methods are:

  • GET
  • POST
  • PUT
  • PATCH
  • DELETE

If you do not specify the action and method attribute in the form element, the default action will be the current page, and the method will be GET.

What Are HTML Form Elements?

Different input types, such as text fields, checkboxes, radio buttons, submit buttons, etc., are used inside the <form> tag to obtain user inputs such as usernames, emails, passwords, etc. These inputs are either manually typed or selected by the user according to the input field type.

Example:
<form name="SignIn" method="post" action="signin.php" >

    <label for="Email">Email:</label><br />
    <p><input type="email" name="email" id="Email" /></p>

    <label for="Password">Password:</label>
    <p><input type="password" name="password" id="Password" /></p>

    <input type="submit" value="Sign in" />

</form>
Output:

HTML Form <input> Element

The HTML form <input> element is the most commonly used form element; It is represented in HTML documents based on its type.

HTML Form Input Types

Different types of input are used with HTML input tag. Here is the table of input types for reference:

Input TypeDescriptionHTML Markup
textIt defines a single-line text field.<input type="text">
emailIt defines a single-line text field for an e-mail address. The input value is automatically verified to ensure correctly formatted email addresses.<input type="email">
passwordIt defines a single-line text field for password.<input type="password">
radioIt defines a radio button. Radio buttons are usually presented in a radio group and allow the user to select only one option.<input type="radio">
checkboxIt defines a checkbox button. Checkbox buttons are usually presented in a group and allow the user to select multiple options.<input type="checkbox">
fileFile input provides a browse button to select files to upload. On clicking the button, it opens a file picker dialog from which the user can select files.<input type="file">
imageImage input provides a browse button to select images for upload. On clicking the button, it opens a file picker dialog from which the user can select only images.<input type="image">
hiddenHidden inputs are invisible from users. They allow developers to get some textual data that the user cannot see.<input type="hidden">
submitThe submit input creates a submit button. On clicking the button, It submits all the form elements to the form handler.<input type="submit">
resetThe reset input creates a reset button. On clicking the button, It reset all the form elements value to the default state.<input type="file">
buttonThe button input creates a simple button that can be programmed to perform some action.<input type="button">

HTML5 Form Input Types

HTML5 introduced more types of input elements. They are:

Input TypeDescriptionHTML Markup
numberIt defines a single-line text field for only numbers.<input type="number">
telIt defines a single-line text field for telephone numbers.<input type="tel">
rangeIt displays a slider to set the value of an input element.<input type="range">
urlIt defines a single-line text field for a URL address. The input value is automatically verified to ensure a correctly formatted URL.<input type="url">
searchIt defines a single-line text field that is styled differently by web browsers.<input type="search">
colorIt provides an interface to select colors using a visual color picker.<input type="color">
dateIt displays a calendar to select a date that is styled differently by different web browsers.<input type="date">
timeIt is used to specify single-line text fields for the time input (hours, minutes, and seconds optionally) format.<input type="time">
datetime-localIt displays a calendar to select both date and time.<input type="datetime-local">
monthIt displays a calendar to select a month.<input type="month">
weekIt displays a calendar to select a week.<input type="week">

HTML Form <lable> Element

The HTML <label> element is the form element; It defines a label of a form element by holding the element's ID in the "for" attribute.

Example:
<form name="Search" method="post" action="search.php" >

    <label for="q">Search:</label><br />
    <p><input type="search" name="q" id="q" /></p>

    <input type="submit" value="Go" />

</form>

In the example above, the <label> element holds the ID of the search type input element. Here you can focus or activate the form element by clicking on this label text.


Scroll Back to Top