본문으로 건너뛰기

Advanced `<input>` Element Usage

Advanced <input> Element Techniques

Using <input /> with <form>

The <input /> tag is commonly used in conjunction with the <form> tag.

Web services use the <input /> tag to receive data from users and the <form> tag to submit that data to a server.

Example of a form tag
<form action="/submit" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<input type="submit" value="Submit" />
</form>

We'll explore more about input forms in the upcoming form lesson.


The Relationship with the label Tag

The label tag represents the description or title of an input. By using this tag, you can more clearly indicate to users what information they should enter.

Example of a label tag
<label for="username">Username:</label>
<input type="text" id="username" name="username" />

Validation of input

Validation is the process of checking whether the information entered into an input is correct. HTML5 provides a variety of validation features out of the box.

The following input uses the required attribute to check if the input has a value.

Validation with required
<input type="email" name="useremail" required />

Enhancing User Experience with input Design

You can style input elements with CSS according to their type (text, password), like so:

Navigate to the CSS tab next to the HTML tab on the right, click to the right of the closing brace on the third line.

When the cursor blinks on the third line, press Enter to move the cursor to the fifth line.

If you paste the content below on the fifth line of the CSS tab, you can see how CSS is applied to each input type.

CSS for input elements
/* Select text type inputs with input[type='text'] */
input[type='text'] {
width: 150px;
border: 2px solid blue;
}

/* Select password type inputs, which hide their contents, with input[type='password'] */
input[type='password'] {
width: 150px;
border: 2px solid red;
}

This example gives you an idea of how you can customize the design of input fields to improve the user interface on your web pages.