course content

Course Content

Ultimate HTML

Input AttributesInput Attributes

<input> is an HTML element used to create a variety of form controls for collecting input from users. It can be used to create text fields, checkboxes, radio buttons, submit buttons, and more. The specific type of input control is specified using the type attribute of the <input> element, and additional attributes can be used to customize the behavior and appearance of the control.

value

value specifies the value of <input/> element. It can have different values depends on the input type;

  • For button, reset, and submit - defines the text on the button
  • For text, password - defines the initial (default) value of the input field;
  • For checkbox, radio, image - defines the value associated with the input

Note

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

html

index.html

css

index.css

js

index.js

autofocus

autofocus specify that the input field should automatically have focus when the web page is loaded. This means that when the page loads, the input field will be selected automatically, allowing the user to start typing without having to click on the input field first.

html

index.html

css

index.css

js

index.js

required

required attribute is used to specify that the input field must be filled out before the user can submit the form. When 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. Let's run the next example and try to press "register" button without filled all inputs. We get a notification.

html

index.html

css

index.css

js

index.js

placeholder

The placeholder attribute is used to provide a hint or an example of the expected input value to the user. It is a short text string that is displayed inside the input field before the user enters any value. This attribute is particularly useful for fields that require specific formatting, such as phone numbers or credit card numbers.

html

index.html

css

index.css

js

index.js

Note

If we pay close attention to all the <input/> elements, we can see that we use different type each time. This topic will be covered in the next chapter. Since the type attribute totally affects the appearance and functionality of the <input/> element.

1. Which attribute is used to set the default value for an input element?
2. Which attribute is used to set a hint or an example of the expected value for an input element?
3. Which attribute is used to specify that an input field must be filled out before submitting the form?

question-icon

Which attribute is used to set the default value for an input element?

Select the correct answer

question-icon

Which attribute is used to set a hint or an example of the expected value for an input element?

Select the correct answer

question-icon

Which attribute is used to specify that an input field must be filled out before submitting the form?

Select the correct answer

Section 5.

Chapter 4