The HTML Label tag can be associated to a form-control either by nesting the control within it or by matching the value of the label’s for attribute to the value of a control’s id attribute. The Label tag is necessary to showcase what the field represents on the form you are creating and ultimately displaying.
For this tutorial, you will learn some straightforward form building techniques that you can customize and use for multiple applications including text fields, checkboxes, radio buttons, and submit buttons. This tutorial will take advantage of CSS (Cascading Style Sheets) functions while creating the effect within the HTML (Hypertext Markup Language) page. Along the way, you will also be provided with some fun and creative design elements. All you need to start with is a simple code editor such as Notepad ++.
The Essentials
The label tag is always going to be associated with forms. HTML forms will need to have the following tags in order to function properly:
- <form>
- <input>
- <label>
The HTML <form> element is a container for a variety of different types of input elements. The most used input elements types are:
- text fields
- checkboxes
- radio buttons
- submit buttons
The <input> Element
Why is the <input> element important? This tag defines the different types of form elements shown above. Your browser needs to know what type of form is being defined and ultimately displayed.
Taking the list from above, each would be displayed as follows:
- <input type=”text”> – Displays a single-line text input field.
- <input type=”radio”> – Displays a radio button (for selecting from a multiple choice list).
- <input type=”checkbox”> – Displays a checkbox (for selecting zero or more of many choices).
- <input type=”submit”> – Displays a submit button (for submitting the form when completed).
- <input type=”button”> – Displays an observable clickable button.
Creating the Form Using <input type=”text”>
In this example, you will set up your HTML page for basic input using a first and last name entry.
The input type=”text” defines a text box.
A note about the form action line of code: <form action=”/action_page.php”>.
This is found in the code for all web forms. PHP is an acronym for “PHP: Hypertext Preprocessor” and is a widely-used, open source scripting language. Additionally, the PHP scripts are executed on the server.
How does the label tag fit in? Without the label tag, there would be no text to see what each entry is for. The label tag defines the input area for the user.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" value="James"><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname" value="Bond"><br><br>
</form>
</body>
</html>
This small set of code gives the browser result shown below. Notice the “First Name” and “Last Name” titles that let you know what the entry box is for.
Now for added function, add a Submit button as this is always necessary when submitting forms.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" value="James"><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname" value="Bond"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Clicking the “Submit” button will send the form-data to the page that you designate.
Notice the <form action=”/action_page.php”>. This tells the form what action to take once the Submit button is clicked.
This example code gives the following result in your browser.
You now have a Submit button.
Creating the Form Using <input type=”radio”>
Now it is time to set up the HTML page for radio buttons.
The input type=”radio” defines a radio button.
Again, notice the label tag.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form action="/action_page.php">
<input type="radio" id="redwood" name="wood" value="redwood">
<label for="redwood">Redwood</label><br>
<input type="radio" id="maple" name="wood" value="maple">
<label for="maple">Maple</label><br>
<input type="radio" id="pine" name="wood" value="pine">
<label for="pine">Pine</label>
</form>
</body>
</html>
This option yields the following in your browser:
Now you have three radio buttons.
Notice that this line of code produced the actual name next to the radio button
<label for=”redwood”>Redwood</label><br>.
Clicking on a radio button looks like the following:
Creating the Form Using <input type=”checkbox”>
The final form for you to setup is the checkbox.
The input type=”checkbox” defines a checkbox.
Notice the input type as well as the label for each checkbox.
<!DOCTYPE html>
<html>
<body>
<h2>Checkbox List Form</h2>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">I drive a car to work</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">I ride a bike to work</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3">I walk to work</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
This code will yield the following in your browser:
Checking a box looks as follows:
Final Note
Now it should be apparent why the HTML Label Tag is so extremely important as part of the integration of HTML tags when designing HTML web forms. As you can see, the ability to control and design your own forms serve a variety of situations and applications. Play with the code and see what works for you. In the end, always ask yourself the question, what is it that I want to do in order to best serve my website customer? Be creative in your layouts and don’t be afraid to explore.
Where to Next?
This Utilizing the HTML Label Tag tutorial should provide a starting point for further inquiry into website design, layout, and practical applications with HTML and CSS.
Continue to explore other areas of design. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
