HTML input Attribute

type : Specifies the type of input control to display. Examples include text, password, checkbox, radio, number, email, date, etc.

You can use our free live html editor to test tutorial codes .

Example 1: Text Input

Edit Copy Hide

<input type="text" name="username" placeholder="Enter your username" required>
      

• type="text": Specifies that the input is a text field.
• name="username": Sets the name of the input field to "username". This is used to identify the input when the form is submitted.
• placeholder="Enter your username": Displays the placeholder text "Enter your username" inside the input field as a hint to the user.
• required: Makes the input field required, so the user must fill it out before submitting the form.

Example 2: Password Input

Edit Copy Hide

<input type="password" name="password" placeholder="Enter your password" required>

• type="password": Indicates that the input is a password field. Characters entered will be masked for security.
• name="password": Sets the name of the input field to "password".
• placeholder="Enter your password": Displays the placeholder text "Enter your password" inside the input field.
• required: Makes the input field required.

Example 3: Checkbox Input

Edit Copy Hide

<input type="checkbox" name="subscribe" value="1" checked>
      

• type="checkbox": Specifies that the input is a checkbox.
• name="subscribe": Sets the name of the checkbox input to "subscribe".
• value="1": Assigns the value "1" to the checkbox when it is checked and submitted with the form.
• checked: Sets the checkbox as initially checked when the page loads.

Example 4: Number Input with Range

Edit Copy Hide

<input type="number" name="quantity" min="1" max="100" value="1">

• type="number": Defines an input field for numeric values.
• name="quantity": Sets the name of the input field to "quantity".
• min="1": Specifies the minimum value that can be entered (1 in this example).
• max="100": Specifies the maximum value that can be entered (100 in this example).
• value="1": Sets the initial value of the input field to 1.

name : Provides a name for the input control. It is used to identify the input when the form is submitted to the server and is used as the key for the corresponding value.

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<input type="text" name="fullname">

• type="text" : Specifies that the input is a text field.
• name="fullname" : Sets the name of the input field to "fullname". This is used to identify the input when the form is submitted.

value : Sets the initial value of the input control. It can be a default value or a value retrieved from a server-side script.

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<input type="text" name="username" value="Johnlie">

• type="text" : Specifies that the input is a text field.
• name="username" : Sets the name of the input field to "username".
• value="Johnlie" : Sets the initial value of the input field to "Johnlie".

placeholder : Displays a short hint or example text inside the input field. It provides a description or an example of the expected input format.

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<input type="email" name="email" placeholder="Enter your email address">

• type="email" : Specifies that the input is an email field.
• name="email" : Sets the name of the input field to "email".
• placeholder="Enter your email address" : Displays the placeholder text "Enter your email address" inside the input field as a hint to the user.

required : Indicates that the input is required to be filled out before submitting the form. If this attribute is present, the browser will enforce its validation.

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<input type="email" name="email" placeholder="Enter your email" required>

• type="email" : Specifies that the input is an email field.
• name="email" : Sets the name of the input field to "email".
• placeholder="Enter your email" : Displays the placeholder text "Enter your email" inside the input field.
• required : Makes the input field required, so the user must fill it out before submitting the form.

disabled : Disables the input control, preventing the user from interacting with it. The value of the input will not be submitted with the form.

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<input type="text" name="email" placeholder="Enter your email" disabled>

• type="text" : Specifies that the input is a text field.
• name="email" : Sets the name of the input field to "email".
• placeholder="Enter your email" : Displays the placeholder text "Enter your email" inside the input field.
• disabled : Disables the input field, preventing the user from interacting with it. The value will not be submitted with the form.

readonly : Makes the input control read-only, meaning the user can see the value but cannot modify it. The value will still be submitted with the form.

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<input type="text" name="country" value="United States" readonly>

• type="text" : Specifies that the input is a text field.
• name="country" : Sets the name of the input field to "country".
• value="United States" : Sets the initial value of the input field to "United States".
• readonly : Makes the input field read-only, so the user can see the value but cannot modify it. The value will still be submitted with the form.

size : Specifies the width of the input control, usually in characters or pixels, depending on the type of input.

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<input type="text" name="zipcode" size="6">

• type="text" : Specifies that the input is a text field.
• name="zipcode" : Sets the name of the input field to "zipcode".
• size="6" : Sets the width of the input field to accommodate six characters. The size can be specified in characters or pixels, depending on the browser's rendering.

maxlength : Sets the maximum number of characters that can be entered into the input control.

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<input type="text" name="comment" maxlength="100" placeholder="Enter your comment">

• type="text" : Specifies that the input is a text field.
• name="comment" : Sets the name of the input field to "comment".
• maxlength="100" : Sets the maximum number of characters that can be entered into the input field to 100.
• placeholder="Enter your comment" : Displays the placeholder text "Enter your comment" inside the input field.

min and max : Defines the minimum and maximum values for input types like number and date.

You can use our free live html editor to test tutorial codes .

Edit Copy Hide

<input type="number" name="age" min="18" max="99">

• type="number" : Defines an input field for numeric values.
• name="age" : Sets the name of the input field to "age".
• min="18" : Specifies the minimum value that can be entered (18 in this example).
• max="99" : Specifies the maximum value that can be entered (99 in this example).