Other Important Attributes

Other Important Attributes

Some attributes are shared by many elements but aren't global. Let's meet the important ones.

accept

For file inputs: which file types are allowed.

<input type="file" accept=".pdf,image/*">

capture

For file inputs on phones: which camera to open (user = front, environment = back).

<input type="file" accept="image/*" capture="environment">

size

Sets how many characters wide a text input shows.

<input type="text" size="20">

form

Lets an input belong to a form even if it's NOT inside that form! You point it at the form's id.

<form id="myform">
  <button type="submit">Save</button>
</form>
<input type="text" name="note" form="myform">

dirname

Sends the text direction (ltr or rtl) of a text field along with its value.

<input type="text" name="message" dirname="message.dir">

crossorigin

Controls cross-origin requests for things like images, videos, and scripts. Helps with security and some advanced canvas features.

<img src="photo.png" crossorigin="anonymous">

integrity

A security hash (SRI) that makes sure a linked file hasn't been changed.

<script src="lib.js" integrity="sha384-..."></script>

fetchpriority

Tells the browser how important a resource is to load (high, low, auto).

<img src="hero.jpg" fetchpriority="high">

rel

Describes the relationship to a linked resource (see the Links lesson!).

<link rel="stylesheet" href="styles.css">

elementtiming

Lets you measure when an element is rendered (for performance tracking).

<img src="big.jpg" elementtiming="hero-image">

TL;DR

• accept = allowed file types, capture = which camera.
• size = width of a text input, form = join a form from outside it.
• dirname = send the text direction with the value.
• crossorigin = cross-origin request settings.
• integrity = security hash (SRI).
• fetchpriority = load priority hint.
• rel = relationship between files.
• elementtiming = performance measurement.