input Input Tag

To receive information from users on a webpage, the <input /> is used.

For example, on a registration page where users are asked to input their username or password, this input tag is utilized.

Copy
<input type="text" />

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

Copy
<input type="text" name="city" placeholder="Enter city name" value="New York" />

input can receive various types of user input.

• text : General text input

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

• checkbox : Provides selectable options in checkbox form

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

Copy
<input type="text" placeholder="Enter text here" />

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

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

• name : Defines the name of the input. Typically defines the name sent to the server when the form is submitted.

• placeholder : Displays a preview text in the input field. Can give users a hint about what information they need to enter.

In input elements, 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.

• When the page loads and the value attribute is set, it is set as the initial value.

• Each time the user enters or changes a value in the input field, the value attribute is updated.

Copy
<input type="text" value="Initial value">

defaultValue Attribute

• The defaultValue attribute sets the default value of the <input> element.

• Initialized with the set default value when the page loads.

• The defaultValue attribute does not change even if the user modifies the value in the input field.

• If the form is reset, the input field's value reverts to the defaultValue.

Copy
<input type="text" defaultValue="Default value">

Follow the highlighted areas in the code and input them accordingly.