본문으로 건너뛰기

<input> Element

The <input> Element

When a web page needs to get information from a user, it uses the <input /> element. For instance, this input tag is used on a sign-up page to gather a username or password. It's like filling in the blanks on a test paper.


Code Example:

input tag
<input type="text" />

Basic Attributes of input

The input element can have various attributes that determine what kind of information is received and how it is displayed.

  • name: Defines the name of this input. Usually, it's the name sent to the server when a form is submitted.

  • placeholder: Shows preview text in the input field. It can give users a hint about what information should be entered.


Code Example:

Attributes of name and placeholder
<input type="text" name="username" placeholder="Enter your username" />

The type Attribute and Various Input Types

The input can take various forms to receive information from users. These different forms are determined by the type attribute. Just like different pens provide a different writing experience, the type changes the behavior and appearance of input.

  • text: Receives plain text.

  • password: For passwords. The input is displayed as asterisks (*).

  • checkbox: Provides a checkbox for selection options.


Code Example:

input tag type attribute
<input type="text" placeholder="Enter text" />

<input type="password" placeholder="Enter password" />

<input type="checkbox" name="subscribe" value="yes" /> Subscribe to newsletter

Setting a Default Value with value

To set a default value for an input, use the value attribute. It's like having the answer already filled in on a test paper.

This can suggest a default to the user or provide predefined values.


Code Example:

input tag value attribute
<input type="text" name="city" value="Seoul" />

This input starts with the default value "Seoul".


Follow the example with the asterisked code to try it out.