In HTML, forms are the primary way to capture input from end users. Let's look at a basic example:
<form>
<label for="name">What is your name?</label>
<input type="text" id="name" name="name">
<label for="favorite-color">What is your favorite color?</label>
<input type="text" id="favorite-color" name="favoriteColor">
<button>Submit form!</button>
</form>
Here, we have a form element that wraps the entirety of the form and indicates that this part of the HTML page is meant for end-user input. Next, we have two input fields and their corresponding label elements. The label describes the input's question – we'll often see these two elements working together within the form – although there are certainly cases where form inputs do not have labels. Finally, we have a button that will submit the form when clicked. What does submit the form mean exactly? Let's find out.
If we fill out this form with the name "Brian" and the color "red" and hit the submit button, nothing much will happen on the surface. In fact, the only thing that will happen is a subtle change in the browser's address bar – if you look closely, the string ?name=Brian&favoriteColor=red is added to the end of the existing page URL. That may not seem like much, but this tells us everything we need to know about how native HTML captures data entered on our web page and potentially transfers it to another page, either on our site or externally.
The first thing to notice is how the web browser automatically structures the data entered into a collection of key-value pairs – that is, each piece of data is separated into two parts – a key and a value. For instance, a key of "color" and a value of "red", separated by the equals-sign (=). And that each key-value pair of data is separated by the ampersand (&). All of this data – known as the query string – is separated from the rest of the URL by the question mark (?).
The second thing to notice is how the page doesn't go anywhere when the submit button is clicked – it just stays on the page. This is the default behavior of the form element. Let's override that behavior, by adding a single attribute to our form element:
<form action="process-form.html">
Submitting the form will now send our browser to process-form.html?name=Brian&favoriteColor=red. In short, a form works just like a link, but with more data attached. Let's try something different, just to see a more practical use of a form and to illustrate this point further.
If we head over to https://maps.google.com/?q=paris, we'll see that Google Maps accepts a query string (remember: that's the part of the URL that starts with the question mark and is a list of key-value pairs) – a map of Paris appears. If we wanted to provide our users with direct links to maps of several cities, we could of course create links to https://maps.google.com/?q=paris, https://maps.google.com/?q=brooklyn, https://maps.google.com/?q=las+vegas, and so on. Or, we could simply provide a form, giving the ability for our users to input the city they'd like to see:
<form action="https://maps.google.com/">
<label for="q">Where to?</label>
<input type="text" id="q" name="q">
<button>Go there now!</button>
</form>
As with everything else when using Tailwind, forms and their corresponding input fields come with no styling – it's all up to us when it comes to how the forms ultimately look. Let's add some Tailwind to our "name and favorite color" form, to make it look more like a form that we're used to seeing in the wild.
<form>
<label class="block mt-4 font-bold" for="name">What is your name?</label>
<input class="p-2 w-64 border border-gray-400 rounded shadow-xl focus:outline-none focus:ring-purple-500
focus:border-purple-500" type="text" id="name" name="name">
<label class="block mt-4 font-bold" for="favorite-color">What is your favorite
color?</label>
<input class="p-2 w-64 border border-gray-400 rounded shadow-xl focus:outline-none focus:ring-purple-500
focus:border-purple-500" type="text" id="favorite-color" name="favoriteColor">
<button class="block mt-4 text-white bg-purple-500 rounded px-4 py-2">Submit form!</button>
</form>
For the purposes of this introduction, we've focused on just the text input type. For a complete list of input types that are native to HTML, see this comprehensive guide to basic native form controls from Mozilla.