Attributes in HTML input elements serve a variety of purposes that enhance functionality, control behavior, improve user experience, and facilitate data validation. Before learning about attributes, you must know about input types in HTML.
List of HTML Input Attributes with Example
1) name: The name attribute is used by the server to identify the form fields and their corresponding values.
<input type="text" name="username">2) placeholder: The placeholder attribute in HTML is used to display a hint or a short description inside an input field that helps users understand what type of data is expected. This placeholder text appears inside the input field when it is empty and disappears once the user begins typing.
<input type="text" placeholder ="Enter Your Full Name">3) value: The value attribute allows developers to set a default value for input fields.
<input type="text" name="username" value="quizlancer">4) readonly: The readonly attribute makes an input field non-editable while allowing the user to view its content. The user can’t able to change its value.
<input type="text" name="username" value="quizlancer" readonly>5) disabled: The disabled attribute in HTML is used to make an input field or other form element completely uneditable and non-interactive.
<input type="text" name="username" value="quizlancer" disabled>
6) maxlength: The maxlength attribute in HTML is used to specify the maximum number of characters that can be entered into an input field or textarea. It ensures that the user cannot enter more characters than allowed, helping to enforce data length restrictions at the client side before the form is submitted to the server.
<input type="text" name="username" maxlength="10">
In the above example, user can enter up to 10 characters only, not more than that.
7) minlength: The minlength attribute in HTML is used to specify the minimum number of characters that must be entered into an input field or textarea. This attribute ensures that the user cannot submit a form unless the input contains at least the specified number of characters.
<input type="text" name="username" minlength="10">
In the above example, a user must enter a minimum 10 characters, not less than that.
8) min max: The min and max attributes in HTML are used to define the minimum and maximum values for input elements that accept numerical data.
<input type="number" name="standard" min="1" maz="10">
In the above example, user can enter a minimum 1 and a maximum 10 numbers only. Not allowed to enter less than 1 and not more than 10.
9) step: The step attribute in HTML is used with elements of type number and range to define the legal number intervals that the user can enter or select.
<input type="range" name="volume" step="2">10) multiple: The multiple attribute in HTML is used to allow users to select multiple options from a set, such as multiple files or multiple selections in a list.
<input type="file" name="files" multiple>
<select name="options" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>11) pattern: The pattern attribute in HTML is used to specify a regular expression that an input element’s value must match for the form to be valid.
<input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" title="Username must contain only letters and numbers">12) required: The required attribute in HTML is used to specify that an input field must be filled out before submitting a form.
<input type="text" name="fieldName" required>13) autofocus: The autofocus attribute is a boolean attribute, meaning that its presence (regardless of value) will apply the autofocus behavior.
<input type="text" name="name" autofocus>14) height width: The height and width attributes in HTML are used to specify the dimensions of various elements, particularly images and embedded content.
<img src="example.jpg" alt="Example Image" width="300" height="200">15) autocomplete: The autocomplete attribute is used to control whether and how a browser should automatically complete or suggest values for input fields in a form.
<input type="text" name="username" autocomplete="on">
<input type="text" name="email" autocomplete="off">Here is a collection of multiple-choice questions (MCQs) on HTML input attributes, categorized into Beginner, Intermediate, Advanced, and Login-specific levels. Each question includes four answer options and the correct answer.
Beginner-Level Questions on HTML Input Attributes
Which attribute specifies that an input field is required?
A) value
B) required
C) placeholder
D) readonly
Answer: B) required
Which attribute provides a hint that describes the expected value of an input field?
A) alt
B) value
C) placeholder
D) label
Answer: C) placeholder
What type of input field is created using type=”password”?
A) A field that hides the entered text
B) A field that accepts email addresses
C) A field that accepts numeric values
D) A field that submits a form
Answer: A) A field that hides the entered text
Which attribute is used to set a default value for an input field?
A) placeholder
B) value
C) type
D) size
Answer: B) value
What does the readonly attribute do in an input field?
A) Prevents the user from modifying the value
B) Automatically fills the input
C) Submits the form
D) Hides the input value
Answer: A) Prevents the user from modifying the value
Which of the following is the correct way to define an email input field?
A) <input type=”email”>
B) <input type=”mail”>
C) <input type=”e mail”>
D) <input type=”message”>
Answer: A) <input type=”email”>
Which HTML attribute is used to automatically focus on an input field when the page loads?
A) value
B) placeholder
C) autofocus
D) readonly
Answer: C) autofocus
Which attribute limits the maximum number of characters allowed in an input field?
A) maxlength
B) minlength
C) max
D) size
Answer: A) maxlength
Intermediate Level Questions on HTML Input Attributes
Which attribute allows an input field to accept multiple file uploads?
A) multiple
B) enctype
C) files
D) max
Answer: A) multiple
Which attribute should be used to specify that an input field accepts only values within a given range?
A) pattern
B) step
C) min and max
D) minlength and maxlength
Answer: C) min and max
What is the purpose of the step attribute in an tag?
A) Limits the maximum number of characters
B) Specifies the step size for numeric or date input
C) Sets the default value for the input
D) Specifies the input pattern
Answer: B) Specifies the step size for numeric or date input
What does the autocomplete=”off” attribute do?
A) Prevents the form from submitting
B) Disables automatic completion of form fields
C) Automatically fills the form
D) Encrypts the form data
Answer: B) Disables automatic completion of form fields
Which input type allows the user to select one option from a list of predefined options?
A) checkbox
B) radio
C) range
D) text
Answer: B) radio
What does the pattern attribute do in an input field?
A) Limits the number of characters
B) Specifies a regular expression for validation
C) Sets a default value
D) Defines a numerical step
Answer: B) Specifies a regular expression for validation
What is the function of the minlength attribute in an input field?
A) Specifies the minimum number of characters required
B) Sets the minimum value for numeric input
C) Prevents the form from submitting
D) Sets the input field to read-only
Answer: A) Specifies the minimum number of characters required
Which input attribute allows you to include an additional descriptive label for accessibility purposes?
A) label
B) aria-label
C) title
D) description
Answer: B) aria-label
Advanced Level Questions on HTML Input Attributes
Which attribute should you use to define an input field as read-only for users, but allow the data to be submitted with the form?
A) disabled
B) readonly
C) autocomplete
D) hidden
Answer: B) readonly
What happens when you use the disabled attribute in an input field?
A) The input field is visible but cannot be interacted with or submitted
B) The input field hides automatically
C) The input field gets auto-filled
D) The input field submits the form without validation
Answer: A) The input field is visible but cannot be interacted with or submitted
Which of the following input types allows the user to select a date and time?
A) <input type=”date>
B) <input type=”datetime-local>
C) <input type=”time>
D) <input type=”month>
Answer: B) <input type=”datetime-local>
Which HTML attribute can prevent a form from being submitted if an input field is left empty?
A) placeholder
B) required
C) autocomplete
D) disabled
Answer: B) required
What is the purpose of the inputmode attribute in HTML input elements?
A) Specifies the type of virtual keyboard to display
B) Defines the step value for a range input
C) Prevents the field from auto-completing
D) Specifies the character encoding
Answer: A) Specifies the type of virtual keyboard to display
Login-Specific Questions on HTML Input Attributes
Which input type is best suited for the password field in a login form?
A) <input type=”text”>
B) <input type=”password”>
C) <input type=”email”>
D) <input type=”hidden”>
Answer: B) <input type=”password”>
What is the purpose of using autocomplete=”new-password” in a password input field?
A) To prevent browsers from saving the password
B) To auto-fill the password
C) To prompt the user to enter a new password
D) To disable form submission
Answer: A) To prevent browsers from saving the password
Which input attribute ensures that a user cannot submit the login form with an empty username field?
A) required
B) disabled
C) maxlength
D) readonly
Answer: A) required
Which attribute would you use to hint that an input field in a login form expects an email address?
A) autocomplete=”username”
B) autocomplete=”email”
C) type=”text”
D) type=”hidden”
Answer: B) autocomplete=”email”
In a login form, which attribute would disable an input field while still displaying it?
A) readonly
B) disabled
C) hidden
D) required
Answer: B) disabled
Follow Us on Social Media
Follow Quiz Lancer Telegram Channel to solve daily interview questions on HTML Input Attributes. We share important interview questions which are asked in the interview. Most of the students get good values from this channel and get selected as a developer.
