accept
The atribute is used in HTML forms with the <input type="file"> element. It specifies the types of files that the server can accept. It helps in restricting the types of files that users can select when choosing a file to upload.
Example
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="fileInput">Select a file:</label>
<input type="file" id="fileInput" name="file" accept=".pdf, .doc, .docx">
<input type="submit" value="Upload">
</form>
autocomplete
The attribute is used in HTML forms to control whether the browser should automatically complete a form field or not. It can be applied to various form elements, such as <input> and <form>. When set to "on," the browser can automatically fill in the values for a user based on their previous input or choices. When set to "off," the browser should not automatically complete the field.
Example
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" autocomplete="on">
<label for="password">Password:</label>
<input type="password" id="password" name="password" autocomplete="off">
<input type="submit" value="Submit">
</form>
capture
The attribute is used in HTML forms with the <input type="file"> element. It is specifically used for mobile devices with cameras. When set to "camera," it indicates that the user should capture a photo or video directly from the device's camera. This is commonly used in combination with the accept attribute to specify the media types allowed.
Example
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="photoInput">Capture a photo:</label>
<input type="file" id="photoInput" name="photo" capture="camera" accept="image/*">
<input type="submit" value="Upload">
</form>
crossorigin
The attribute is used in HTML with elements that load external resources, such as <img>, <script>, and <link>. It is used to control how the browser handles cross-origin requests for the specified resource. Cross-origin requests occur when a web page requests a resource (like an image or a script) from a different domain than the one that served the web page.
Example
<img src="https://example.com/image.jpg" alt="An image" crossorigin="anonymous">
dirname
The attribute is used in HTML with the <input type="text"> element to specify the direction in which the text should be submitted when the form is submitted. It is particularly useful for text input fields in languages that are written from right to left (RTL), such as Arabic or Hebrew. The dirname attribute helps in ensuring that the entered text is submitted in the correct direction.
Example
<form action="/submit" method="post">
<label for="username">Username:</label>
<!-- Setting dirname for an RTL language -->
<input type="text" id="username" name="username" dirname="rtl">
<input type="submit" value="Submit">
</form>
disabled
The attribute is a common HTML attribute used to disable user interaction with an element. It can be applied to various HTML elements, such as form controls (<input>, <button>, etc.), links (<a>), and more. When an element is disabled, it is typically displayed in a way that indicates it cannot be interacted with, and user actions (such as clicks or keyboard input) are ignored.
Example
<button disabled>Click me (disabled)</button>
In this example, the disabled attribute is applied to a <button> element, making it unclickable.
<input type="text" value="Cannot edit" disabled>
In this example, the disabled attribute is applied to an <input> element of type text, making it read-only and preventing users from editing the content.
elementtiming
The attribute is used to indicate that an element is flagged for tracking by PerformanceObserver objects using the "element" type. This attribute may be applied to <img>, <image> elements inside an <svg>, poster images of <video> elements, elements which have a background-image, and elements containing text nodes, such as a <p>.
Example
<img alt="Alt for a main blog post image" src="my-massive-image.jpg" elementtiming="Main image">
<p elementtiming="important-text">Some very important information.</p">
for
The attribute specifies which form element a label is bound to. It takes the value of the id attribute of the associated form element. When a user clicks on the label, it focuses or activates the associated form control.
Example
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Submit">
</form>
max
The attribute is commonly used with form controls in HTML, such as <input type="number">, <input type="date">, and others. It specifies the maximum value that a user can input or select in the associated form control. For example, with <input type="number" max="10">, a user cannot enter a number greater than 10.
Example
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" max="100">
In this example, the max attribute is set to 100, indicating that the user can input a quantity up to a maximum value of 100.
<label for="birthdate">Select your birthdate:</label>
<input type="date" id="birthdate" name="birthdate" max="2005-01-01">
Here, the max attribute is used with a date input, specifying that the user cannot select a date later than January 1, 2005.
maxlength
The attribute is used with form controls in HTML, such as <input type="text"> and <textarea>. It specifies the maximum number of characters that a user can input into the associated field. This attribute is particularly useful for limiting the length of text input, for example, in a comment field or a username input.
Example
<label for="username">Username:</label>
<input type="text" id="username" name="username" maxlength="20">
In this example, the maxlength attribute is set to 20, indicating that the user can input up to a maximum of 20 characters for the username.
<label for="message">Your Message:</label>
<textarea id="message" name="message" maxlength="200"></textarea>
Here, the maxlength attribute is used with a <textarea>, limiting the user to entering a message with a maximum of 200 characters.
min
The attribute is commonly used with form controls in HTML, such as <input type="number">, <input type="date">, and others. It specifies the minimum value that a user can input or select in the associated form control. For example, with <input type="number" min="0">, a user cannot enter a number less than 0.
Example
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1">
In this example, the min attribute is set to 1, indicating that the user can input a quantity of at least 1.
<label for="birthdate">Select your birthdate:</label>
<input type="date" id="birthdate" name="birthdate" min="1900-01-01">
Here, the min attribute is used with a date input, specifying that the user cannot select a date earlier than January 1, 1900.
minlength
The attribute is used with form controls in HTML, such as <input type="text"> and <textarea>. It specifies the minimum number of characters that a user must input into the associated field. This attribute is useful for enforcing a minimum length for text input, ensuring that users provide a certain amount of information.
Example
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8">
In this example, the minlength attribute is set to 8, indicating that the user must input a password with a minimum length of 8 characters.
<label for="comment">Your Comment:</label>
<textarea id="comment" name="comment" minlength="10"></textarea>
Here, the minlength attribute is used with a <textarea>, specifying that the user must provide a comment with a minimum length of 10 characters.
multiple
The attribute is used with certain form elements in HTML, such as <input type="file"> and <select>. Its behavior depends on the element it is used with.
Example
<input type="file" id="fileInput" name="files" multiple>
With <input type="file">: When the multiple attribute is present, it allows users to select multiple files for upload in a single file input field.
<select id="fruitSelect" name="fruits" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
With <select>: When the multiple attribute is present, it allows users to select multiple options in a dropdown list.
pattern
The attribute is used with form controls in HTML, such as <input type="text">. It specifies a regular expression pattern that the user-entered value must match for the form to be submitted successfully. This attribute is often used for validating and enforcing specific formats for user input, such as phone numbers, email addresses, or custom patterns.
Example
<label for="phoneNumber">Phone Number:</label>
<input type="text" id="phoneNumber" name="phoneNumber" pattern="\d{3}-\d{3}-\d{4}" placeholder="123-456-7890">
In this example, the pattern attribute is set to a regular expression \d{3}-\d{3}-\d{4}, enforcing a pattern for a phone number in the format of 123-456-7890.
<label for="email">Email:</label>
<input type="email" id="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" placeholder="example@example.com">
Here, the pattern attribute is used with an <input> of type email, ensuring that the entered value follows a typical email address format.
placeholder
The attribute is used with form controls in HTML, such as <input>, <textarea>, and <select>. It provides a hint or a short description to the user about the expected format or type of data to be entered into the form field. This is particularly useful for improving user experience by giving users guidance on what information is expected.
Example
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username">
In this example, the placeholder attribute is used with a text input, providing a hint to the user about what information should be entered.
<label for="message">Your Message:</label>
<textarea id="message" name="message" placeholder="Type your message here"></textarea>
Here, the placeholder attribute is used with a <textarea>, suggesting to the user what kind of content is expected in the message.
readonly
The attribute is used with form controls in HTML, such as <input> and <textarea>. When applied, it makes the associated form control read-only, meaning that the user can see the content but cannot modify or interact with it. This attribute is often used when you want to display information that should not be edited by the user.
Example
<label for="readOnlyInput">Read-Only Input:</label>
<input type="text" id="readOnlyInput" name="readOnlyInput" value="This is read-only" readonly>
In this example, the readonly attribute is applied to a text input, preventing the user from modifying the content.
<label for="readOnlyTextarea">Read-Only Textarea:</label>
<textarea id="readOnlyTextarea" name="readOnlyTextarea" readonly>This is a read-only textarea.</textarea>
Here, the readonly attribute is used with a <textarea>, making it read-only.
rel
The attribute is commonly used with the <a> (anchor) and <link> elements in HTML. It specifies the relationship between the current document and the linked resource. The rel attribute is part of the HTML standard, and its values indicate the type or nature of the relationship.
Example
<a href="https://www.example.com" rel="nofollow">Visit Example.com</a>
In this example, the rel attribute is set to "nofollow," indicating to search engines that they should not follow the link.
<link rel="stylesheet" type="text/css" href="styles.css">
Here, the rel attribute is used to specify that the linked resource is a stylesheet.
required
The attribute is used with form controls in HTML, such as <input>, <select>, and <textarea>. When applied, it specifies that the associated form control must be filled out by the user before submitting the form. If a required field is left empty, the form won't be submitted, and the user will typically receive a validation error.
Example
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
In this example, the required attribute is applied to a text input, indicating that the user must enter a value for the "Username" field before submitting the form.
<label for="country">Select your country:</label>
<select id="country" name="country" required>
<option value="">Select...</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<!-- Additional country options -->
</select>
Here, the required attribute is used with a <select> element, ensuring that the user selects a country before submitting the form.
size
The attribute, when used with a <select> element, determines the number of rows that should be visible in the dropdown list. This is useful when you want to control the height of the dropdown and make more options visible at once.
Example
<label for="fruitSelect">Choose a Fruit:</label>
<select id="fruitSelect" name="fruit" size="4">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="strawberry">Strawberry</option>
</select>
step
The step attribute is used to define the granularity or interval of values that are valid for the input field. It affects both the arrow buttons for incrementing and decrementing (applicable to number inputs) and the visual markers for slider positions (applicable to range inputs).
Example
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" step="5" min="0" max="100">
In this example, the step attribute is set to 5, meaning that users can only input values in increments of 5 (e.g., 0, 5, 10, 15, ...).
<label for="slider">Select a Value:</label>
<input type="range" id="slider" name="slider" min="0" max="100" step="10">
Here, the step attribute is used with a range input, specifying that the slider should move in increments of 10.