Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn HTML Input Attributes for Enhanced Functionality | Tables and Forms
HTML Essentials

book
HTML Input Attributes for Enhanced Functionality

We already know how to build the forms with inputs and labels. Now, let's consider other useful attributes for input elements that enhance their functionality and usability.

Common Attributes for Input Elements

Placeholder

placeholder provides a hint or example text within the input field, guiding users on what type of input is expected. Useful for providing context or instructions to users before they enter data.

<input type="text" placeholder="Enter your email" />

Name

name specifies the input field's name, which is used to identify the input data when the form is submitted. Each input field within a form should have a unique name attribute.

<input type="text" name="username" />

Value

value sets the initial or default value of the input field. Pre-fills the input field with a specific value when the page loads.

<input type="tel" value="+1 (484) 298-9732" />

Required

required specifies that the input field must be filled out before the form can be submitted. Prevents form submission if the required field is left empty.

<input type="password" required />

Disabled

disabled disables the input field, preventing users from interacting with it or entering data. Useful for displaying read-only or inactive input fields.

<input type="text" value="New York" disabled />

Readonly

readonly makes the input field read-only, allowing users to see the value but not modify it. Similar to the disabled attribute, but still allows the field to be focused and selected.

<input type="text" value="USA" readonly />

Min and Max

min and max specifiy the minimum and maximum allowed values for numerical input fields. Useful for enforcing constraints on numeric input, such as age or quantity.

<input type="number" min="21" max="99" />

Example: Let's consider an example that includes all the necessary attributes and elements needed for the form.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Attributes for Input Elements</title>
<meta charset="UTF-8" />
</head>
<body>
<form onsubmit="return false">
<label for="mail">Email:</label>
<input type="email" id="mail" name="mail" placeholder="Enter your email" required><br>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="phone-number">Phone number:</label>
<input type="tel" id="phone-number" name="phone-number" value="+1 (484) 298-9732"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<label for="city">City:</label>
<input type="text" id="city" name="city" value="New York" disabled><br>
<label for="country">Country:</label>
<input type="text" id="country" name="country" value="USA" readonly><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="21" max="99"><br>
<button type="submit">Send Form</button>
</form>
</body>
</html>

Video Tutorial

1. Which attribute provides a hint or example text within an input field, guiding users on what type of input is expected?

2. What attribute specifies the input field's name, which is used to identify the input data when the form is submitted?

3. Which attribute prevents form submission if the required field is left empty?

question mark

Which attribute provides a hint or example text within an input field, guiding users on what type of input is expected?

Select the correct answer

question mark

What attribute specifies the input field's name, which is used to identify the input data when the form is submitted?

Select the correct answer

question mark

Which attribute prevents form submission if the required field is left empty?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 4. Chapter 7
some-alt