HTML <form> Definition, Usage and Examples

The <form> HTML Tag is used to define an HTML form that will accept user input. The <form> HTML Tag contains any of the form elements including <input>, <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>, and <output> HTML Tag. The <form> HTML Tag is part of the Forms and Input HTML category in HTML Element Reference. The attributes of the <form> HTML Tag are accept-charset, action, autocomplete, enctype, method, name, novalidate, rel, target, global, and event attributes. 

<form> code block example to learn how it works is given below. 

<form action="process_form.cfm" method="get">
...Form-associated elements...
</form>

The second example usage of the “<form>” code block example is given below. 

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Full Name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Email Address: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Submit!">
  </div>
</form>

What is <form> HTML Tag?

The <form> HTML Tag is used in connection with elements that are associated with forms. Typically, to create a form, it nests form-related elements within the opening and closing form tags. Additionally, the form attribute can be used within those elements to reference the form’s ID.

How to Use <form> HTML Tag?

To use <form> HTML Tag, the web developer should create a <form></form> HTML Tag that contains any number of form-related elements nestled between the start and end tags. Typically, the <form> HTML Tag includes an action attribute that specifies the page that will process the form. Additionally, it may possess additional characteristics.

Example Usage of <form> HTML Tag?

The following example of usage of <form> HTML Tag is given below.

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="email">Email Address: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <label for="password"> Password: </label>
    <input type="password" name="password" id="password" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Get Started!">
  </div>
</form>

What are the Attributes of <form> HTML Tag?

There are multiple attributes for the <form> HTML Tag. The following attributes are listed below.

  • Accept-charset Attribute: The <form> HTML Tag supports accept-charset attribute. The accept-charset attribute specifies the character encodings to be used when submitting the form.
  • Action Attribute: The <form> HTML Tag supports action attribute. The action attribute is used to specify where form-data should be sent when a form is submitted.
  • Autocomplete Attribute: The <form> HTML Tag supports autocomplete attribute. The autocomplete attribute specifies whether autocomplete should be enabled or disabled for a form.
  • Enctype Attribute: The <form> HTML Tag supports enctype attribute. The enctype attribute specifies the encoding method to use when submitting form data to the server.
  • Method Attribute: The <form> HTML Tag supports method attribute. The method attribute specifies the HTTP method to use for form-data submission.
  • Name Attribute: The <form> HTML Tag supports name attribute. The name attribute specifies a form’s name.
  • Novalidate Attribute: The <form> HTML Tag supports novalidate attribute. The novalidate attribute specifies that when the form is submitted, it should not be validated.
  • Rel Attribute: The <form> HTML Tag supports rel attribute. The rel attribute establishes a connection between a linked resource and the current document.
  • Target Attribute: The <form> HTML Tag supports target attribute. The target attribute specifies the location of the response received after the form is submitted.
  • Global Attributes: The <form> HTML Tag supports global attributes. All HTML elements, even those not specified in the standard, can have global attributes. This means that any non-standard elements must nevertheless allow certain characteristics, even if using such elements makes the content non-HTML5 compliant.
  • Event Attributes: The <form> HTML Tag supports event attributes. The Event Attributes always have a name that begins with “on” and is followed by the name of the event for which it is intended. They specify a script to run when an event of the defined type is dispatched to the element with the specified attributes.

What are the Default CSS Settings for <form> HTML Tag?

The following are the Default CSS Settings for the <form> HTML Tag.

form.form-example {
    display: table;
}

div.form-example {
    display: table-row;
}

label, input {
    display: table-cell;
    margin-bottom: 10px;
}

label {
    padding-right: 10px;
}

What are the Related other HTML Tags to <form>?

The other related HTML Tags to <form> HTML Tag are listed below.

  • <input> HTML Tag: The <input> HTML Tag is related to <form> HTML Tag because they are both forms and input tags. The <input> HTML Tag is used to specify the Input Element.
  • <textarea> HTML Tag: The <textarea> HTML Tag is related to <form> HTML Tag because they are both forms and input tags. The HTML Tag <textarea> is used to specify a text input element.
  • <button> HTML Tag: The <button> HTML Tag is related to <form> HTML Tag because they are both forms and input tags. The HTML button is created using the <button> HTML Tag.
  • <select> HTML Tag: The <select> HTML Tag is related to <form> HTML Tag because they are both forms and input tags. The <select> HTML Tag is used to define a drop down list.
  • <optgroup> HTML Tag: The <optgroup> HTML Tag is related to <form> HTML Tag because they are both forms and input tags. The <optgroup> HTML Tag denotes a group of options in a drop-down list.

Holistic SEO
Follow SEO

Leave a Comment

HTML <form> Definition, Usage and Examples

by Holistic SEO time to read: 4 min
0