HTML Form Tag Group

The Form Tag Group is a group of tags that are used to create data input forms. Form group tags include <form>, <input>, <select>, <textarea>, <button>, and others.

HTML Reference

Creating a Form

A form is an area on a page with input controls where users enter data.

A form can have many different input fields all wrapped inside a <form> element.

When data entry is complete, the form data is submitted to the server.


Form Tags

Here is a list of form tags that are available to design data entry pages.

Element Description
<form> Defines a data entry area that contains input elements
<input> Creates an input field in which data can be entered
<label> Creates a label or brief description before input elements
<textarea> Creates a multi-line text input control
<select> Creates a dropdown control
<button> Creates a clickable button that can contain text or an image
<datalist> Specifies a list of options for a textfield (<input>) element
<fieldset> Groups related form elements and displays a box with a legend around these
<legend> Defines a caption for a fieldset

Note: When a form is submitted, all input elements inside the form are included, as well as input controls outside the form that are linked (bound) to the form.


Example

#

The <form> tag defines an area with input fields.

Registration Form





<form action="/tutorial/action.html">
  <fieldset style="background: #f6f8ff; border: 2px solid #4238ca;">
    <legend>Registration Form</legend>

    <input type="text" placeholder="First name" name="firstname"><br /><br />
    <input type="text" placeholder="Last name" name="lastname"><br /><br />
    <input type="text" placeholder="Email" name="email"><br />

    <select name="gender">
      <option value="">-- Select Gender --</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
      <option value="other">Other</option>
    </select><br />

    <input type="submit" value="Submit" />
  </fieldset>
</form>

Code explanation

  • The <section> tag contains the form and gives it a blue background.
  • The <form> tag contains all input elements and submit button.
  • The <input> tags create text fields.
  • The <select> tag creates a dropdown control.
  • The <button> tag submits the form data when clicked.
  • The action attribute on the <form> specifies where the form data is sent.

Tip: The <form> could have been styled with a blue background. However, it is better to leave this to other tags and let the form do what it does best: manage data collection.


Did you know?

Did you know?

Flexbox and Grid are CSS tools to create layouts

Flexbox and Grid layout modules allow you to create complex page layouts.

CSS Flexbox is a bit older than CSS Grid and has good browser support.

CSS Grid is not supported by IE and Edge 15, but newer Edge versions do support it.


You may also like

 Back to Tag Groups


Guides