HTML forms allow you to collect information from users for activities such as surveys, e-commerce applications, or web-apps requiring data from the user. Forms can be made of a variety of different input types for different purposes.
Basic Form Tags
In order to create a form of any kind, we need to use the <form> tags to create a form element that will act as the container for all of the input fields we want to add.
<form action="process.php" method="post">
To actually create a field to allow the user to input some data, we need to use the <input> tag. The <input> tag is the most basic tag to include in forms but also incredibly versatile.
The two important attributes the input tag needs are "type" and "name". The "type" attribute allows us to specify the type of input that is expected. Valid input types include button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, and week.
<input type="button" value="Click me!">
<input type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1">I have a bike</label><br>
<input type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2">I have a car</label><br>
<input type="checkbox" name="vehicle3" value="Boat">
<label for="vehicle3">I have a boat</label><br>
<label for="favcolor">Select your favorite color:</label>
<input type="color" name="favcolor">
A required property will ensure that an input field is actually filled out before it can be submitted. The contemporary application of the required attribute is to simply add the word "required" as an attribute to the tag with no corresponding value.
<input type="text" name="email" required>
The title property is typically displayed as a "tool tip" when a user hovers over an object.
<input type="text" name="email" title="Enter a valid email address.">
The pattern property uses regular expressions to determine an alphanumeric pattern that the content needs to match in order to be submitted.
Autofocus is a useful property for automatically highlighting an input field upon a page loading. This alleviates the step requiring a user to click into an input field before they can start typing. Consider the interaction when you visit Google and the search field already has a cursor in it.