Input Attributes

The HTML <input> element allows us to create various form controls for collecting user input. We can customize the behavior and appearance of these controls using different attributes. Let's explore some commonly used attributes:

value

The value attribute is used to set the initial value of the <input> element. The specific value it takes depends on the input type:

• For buttons (type="button", type="reset", type="submit"), it defines the text displayed on the button;
• For text (type="text") and password (type="password") fields, it defines the default value of the input field;
• For checkboxes (type="checkbox") and radio buttons (type="radio"), it defines the value associated with the input.

Note

The value attribute cannot be used with <input type="file">.

autofocus

The autofocus attribute specifies that the input field should automatically have focus when the web page is loaded. When the page loads, the input field will be selected automatically, allowing the user to start typing without clicking on the input field first.

Note

Autofocus doesn't work here because the page doesn't reload when you click the "Run Code" button.

required

The required attribute is used to make an input field mandatory. It specifies that the input field must be filled out before the user can submit the form. If the user tries to submit the form without filling out the required input field, they will receive a validation error message indicating that the field is required.

placeholder

The placeholder attribute provides a hint or example of the expected input value to the user. A short text string is displayed inside the input field before the user enters any value. This is useful for fields requiring specific formatting, such as phone or credit card numbers.

Note

In the examples above, we use different type attributes for the <input> elements, significantly affecting their appearance and functionality. We'll delve deeper into various input types in the next chapter.