Skip to main content
Practice

input Input Tag

To receive information from users on a web page, we use <input />.

For example, when registering for a membership, you use the input tag to collect the username or password.


Code Example:​

input Tag
<input type="text" />

input Basic Attributes​

The input tag can be controlled with various attributes, primarily using the type, name, placeholder, and value attributes.

input Tag Basic Attributes
<input type="text" name="city" placeholder="Enter city name" value="New York" />

input Type Attribute​

input can receive various types of information from users.

  • text: General text input

  • password: Password input. The input content is displayed as asterisks (*)

  • checkbox: Provides selection items in the form of a checkbox

The behavior and appearance of the input change depending on the type.


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

name, placeholder​

  • name: Defines the name of this input. Usually, it defines the name sent to the server when submitting the form.

  • placeholder: Displays a preview text in the input field. It can give the user a hint about what information to enter.


value and defaultValue​

In the input element, the value and defaultValue attributes are used to set and initialize values.

Both attributes specify the value of the <input> element, but their behavior differs.


value Attribute​

  • The value attribute represents the current value of the <input> element.
  • If the value attribute is set upon page load, it is set as the initial value.
  • Changing the value attribute with JavaScript also changes the current value of the input field.
  • The value attribute is updated each time the user enters or changes the value in the input field.
<input type="text" value="initial value">

defaultValue Attribute​

  • The defaultValue attribute sets the default value of the <input> element.
  • It is initialized with the default value set upon page load.
  • Even if the user changes the value in the input field, the defaultValue attribute value does not change.
  • When the form is reset, the input field's value returns to the defaultValue attribute value.
<input type="text" defaultValue="default value">

Follow the highlighted parts of the code to input them.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.