Mastering HTML Input Controls

Introduction

In HTML, the <input> tag is used to create various types of input fields. This lab will demonstrate how to create different types of input fields in an HTML form using the <input> tag with the appropriate type attribute.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Create a Text Input Field

Create a new HTML file named index.html. This file will contain the HTML code for the input form.

To create a text input field, use the following HTML code:

<label for="username">Username:</label><br />
<input type="text" id="username" name="username" /><br />

In the code, we have created a label for the input field, set the type attribute to "text", and assigned an id and name attribute. This code will create a text input field for the user to enter their username.

Create a Password Input Field

To create a password input field, use the following code:

<label for="password">Password:</label><br />
<input type="password" id="password" name="password" /><br />

In the code, we have set the type attribute to "password", which will obscure the password characters that the user enters.

Create a Checkbox Input Field

To create a checkbox input field, use the following code:

<label for="vehicle1">I have a car</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="car" />
<br />
<label for="vehicle2">I have a bike</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="bike" />
<br />
<label for="vehicle3">I have a boat</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="boat" />

In the code, we have created three checkboxes for the user to choose from. Note that each checkbox has a different id, name, and value attribute.

Create a Radio Input Field

To create a radio input field, use the following code:

<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" />
<br />
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female" />
<br />
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="other" />

In the code, we have created three radio buttons for the user to choose their gender. Note that each radio button has a different id, name, and value attribute.

Create a Submit Button

To create a submit button, use the following code:

<input type="submit" value="Submit" />

In the code, we have created a button that the user will click to submit the form.

Summary

In this lab, we have learned how to create different types of input fields in an HTML form using the <input> tag with the appropriate type attribute. We created text input, password input, checkbox input, radio input, and a submit button. You can use these examples as a starting point for creating more complex HTML forms that collect user input.