Course Content
Ultimate HTML
<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
, andsubmit
- 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">
.
index.html
index.css
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.
index.html
index.css
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.
index.html
index.css
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.
index.html
index.css
index.js
Note
If we pay close attention to all the
<input/>
elements, we can see that we use differenttype
each time. This topic will be covered in the next chapter. Since thetype
attribute totally affects the appearance and functionality of the<input/>
element.
Which attribute is used to set the default value for an input element?
Select the correct answer
Which attribute is used to set a hint or an example of the expected value for an input element?
Select the correct answer
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