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.
|<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.