HTML forms are used to collect information from a user. This information is collected through interactive fields, buttons, checkboxes, and many other HTML form elements.
Common Form Elements
At the heart of our journey, we find the <form> element. It's the backbone, the foundation, the root. And like a root, it sustains all that grows from it. It harbors all the input elements and the button that submits the form. Below is an example of a rudimentary HTML form.
<form action="/submit-form" method="post">
</form>
In this scenario, action attribute tells where to send the form-data when the form is submitted. The method attribute defines the HTTP method for sending form-data.
When we cover a back-end language you will learn how to specify the action to save data for later use.
Within the form, we can add an <input> element. These are the children of the <form>, each with its own charm and talent. They serve as the primary elements a users will interact with.
<form action="/submit-form" method="post">
<input type="text" id="name" name="name">
</form>
The type attribute specifies which kind of input to display to the user.
Finally, we have the <button>. The master of ceremonies. The one that, when clicked, sends the form data soaring through the ether, onto its destination.
<form action="/submit-form" method="post">
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
The type attribute of <button> tells the browser what type of button this is. The "Submit" value submits the form-data to the server.
The Many Input Elements
There are many different types of <input> elements we may need to collect data. Below are the available inputs you can add to your form.
Text Input
First, we have the humble text input, a simple box that allows users to enter any alphanumeric characters they desire.
<input type="text" id="name" name="name">
Password Input
Next, is the password input. Like its text sibling, it allows for alphanumeric input. However, its contents are obscured, turning "password123" into "***".
<input type="password" id="pwd" name="pwd">
Checkbox Input
The checkbox, a unique little creature, presents a small square that can be either ticked or left blank. You may have several of these, and multiple can be selected.
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
Radio Input
The radio input, a cousin to the checkbox, presents a small circle that can be filled or left blank. Unlike its cousin, however, only one radio input can be selected in a group.
<input type="radio" id="age1" name="age" value="30">
<label for="age1">Under 30</label><br>
<input type="radio" id="age2" name="age" value="over30">
<label for="age2">30 or older</label><br>
Submit Input
Next, we have the submit input. Much like the button, it controls the submission of the form.
<input type="submit" value="Submit">
The choice is yours whether you want use an input or button as a way to submit your form. They function the same.
The File Input
Venturing further into the jungle of HTML input types, we encounter a unique creature - the file input type. This elusive beast allows users to select and upload files from their device, a feat no other input type can perform.
Like every <input> type, it starts with a basic form:
<form action="/upload-file" method="post" enctype="multipart/form-data">
Notice the new enctype attribute? This is required when you use a form to upload a file. It specifies how the form-data should be encoded when submitting it to the server.
In the heart of our form, we place the file input, ready to accept any file the user chooses to upload.
<input type="file" id="myfile" name="myfile">
With the type="file", we've created a file upload button. When clicked, it'll open the user's file directory, where they can select a file to upload.
That is the basics of HTML forms. You are now well-equipped to capture precious nuggets of user information in the digital river.