start learning
Image 1

HTML input Attribute

In HTML, the input element is used to create various types of form controls that allow users to enter data. The input element can have several attributes that define its behavior and appearance. Here are some commonly used attributes:


type

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


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

Example 2: Password Input


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

Example 3: Checkbox Input


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

Example 4: Number Input with Range


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


Name Attribute

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 .


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


Value Attribute

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 .


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


Placeholder Attribute

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 .


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


required attribute

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 .


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


disabled Attribute

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 .


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


Readonly Attribute

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 .


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


Size Attribute

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 .


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


Maxlength Attribute

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 .


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


Min and Max Attributes

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 .


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


Resources for Further Learning

Explore the possibilities and create unique effects on your web pages by using the interactive code editor

HTML

Write and customize HTML code

CSS

Add style and design to your web pages with CSS

JavaScript

Enhance interactivity with JavaScript code

Go to Code Editor