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.
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.
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.
The <form> tag defines an area with input fields.
<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>
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.
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.
