Menu
Coddy logo textTech

Input & Label

Lesson 2 of 7 in Coddy's Login Form - HTML/CSS Project course.

The <input> tag is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

Set the type using the type attribute,

<input type="text">
<input type="radio">
<input type="checkbox">
<input type="password">
<input type="submit">

It's a good practice to add <label> tag to input,

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

Notice that the for attribute should match the id attribute of the input to bind them together.

challenge icon

Challenge

Easy

Add two input elements with labels, with the ids "username" and "password", set the types of the inputs to "text" and "password" - don't forget to link each label to it's input.

It's suggest to add <br/> tags to space between everything!

Try it yourself

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Write HTML code here -->
</body>
</html>

All lessons in Login Form - HTML/CSS Project