A hint for the user agent about what file types are expected to be submitted. The following values are accepted:

The following input types support the "accept" attribute:

• "file"

Note: the "accept" attribute is a hint to the user agent and does not guarantee that the user will only be able to select files of the specified type.

Specifies the character encodings to be used for form submission. This allows servers to know how to interpret the form data. Multiple encodings can be specified as a space-separated list.

Defines a shortcut key to activate or focus the element. Multiple options may be provided as a set of space-separated characters that are exactly one code point each.

The way to activate the access key depends on the browser and its platform:

Specifies the URL to which the form’s data should be sent when submitted. This can be overridden by formaction attributes on submit buttons.

If for some reason you already have an Attribute type, you can use this function to add it to the element

Allow a colour’s alpha component to be manipulated, allowing the user to select a colour with transparency.

The following input types support the "alpha" attribute:

• "color"

Specifies text that should be displayed when the image cannot be rendered. This attribute is essential for accessibility, providing context about the image to users who cannot see it, including those using screen readers.

Add an aria-* attribute to an HTML element. The key will be prefixed by aria-.

The aria-activedescendant attribute identifies the currently active element when focus is on a composite widget, combobox, textbox, group, or application.

In ARIA live regions, the global aria-atomic attribute indicates whether assistive technologies such as a screen reader will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

The aria-autocomplete attribute indicates whether inputting text could trigger display of one or more predictions of the user’s intended value for a combobox, searchbox, or textbox and specifies how predictions will be presented if they are made.

The global aria-braillelabel property defines a string value that labels the current element, which is intended to be converted into Braille.

The global aria-brailleroledescription attribute defines a human-readable, author-localized abbreviated description for the role of an element intended to be converted into Braille.

Used in ARIA live regions, the global aria-busy state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.

The aria-checked attribute indicates the current “checked” state of checkboxes, radio buttons, and other widgets.

The aria-colcount attribute defines the total number of columns in a table, grid, or treegrid when not all columns are present in the DOM.

The aria-colindex attribute defines an element’s column index or position with respect to the total number of columns within a table, grid, or treegrid.

The aria-colindextext attribute defines a human-readable text alternative of the numeric aria-colindex.

The aria-colspan attribute defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

The global aria-controls property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.

A non-null aria-current state on an element indicates that this element represents the current item within a container or set of related elements.

The global aria-describedby attribute identifies the element (or elements) that describes the element on which the attribute is set.

The global aria-description attribute defines a string value that describes or annotates the current element.

The global aria-details attribute identifies the element (or elements) that provide additional information related to the object.

The aria-disabled state indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

The aria-errormessage attribute on an object identifies the element that provides an error message for that object.

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.

The global aria-flowto attribute identifies the next element (or elements) in an alternate reading order of content. This allows assistive technology to override the general default of reading in document source order at the user’s discretion.

The aria-haspopup attribute indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.

The aria-hidden state indicates whether the element is exposed to an accessibility API.

The aria-invalid state indicates the entered value does not conform to the format expected by the application.

The global aria-keyshortcuts attribute indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

The aria-label attribute defines a string value that can be used to name an element, as long as the element’s role does not prohibit naming.

The aria-labelledby attribute identifies the element (or elements) that labels the element it is applied to.

The aria-level attribute defines the hierarchical level of an element within a structure.

The global aria-live attribute indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

The aria-modal attribute indicates whether an element is modal when displayed.

The aria-multiline attribute indicates whether a textbox accepts multiple lines of input or only a single line.

The aria-multiselectable attribute indicates that the user may select more than one item from the current selectable descendants.

The aria-orientation attribute indicates whether the element’s orientation is horizontal, vertical, or unknown/ambiguous.

The aria-owns attribute identifies an element (or elements) in order to define a visual, functional, or contextual relationship between a parent and its child elements when the DOM hierarchy cannot be used to represent the relationship.

The aria-placeholder attribute defines a short hint (a word or short phrase) intended to help the user with data entry when a form control has no value. The hint can be a sample value or a brief description of the expected format.

The aria-posinset attribute defines an element’s number or position in the current set of listitems or treeitems when not all items are present in the DOM.

The aria-pressed attribute indicates the current “pressed” state of a toggle button.

The aria-readonly attribute indicates that the element is not editable, but is otherwise operable.

Used in ARIA live regions, the global aria-relevant attribute indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

The aria-required attribute indicates that user input is required on the element before a form may be submitted.

The aria-roledescription attribute defines a human-readable, author-localised description for the role of an element.

The aria-rowcount attribute defines the total number of rows in a table, grid, or treegrid.

The aria-rowindex attribute defines an element’s position with respect to the total number of rows within a table, grid, or treegrid.

The aria-rowindextext attribute defines a human-readable text alternative of aria-rowindex.

The aria-rowspan attribute defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

The aria-selected attribute indicates the current “selected” state of various widgets.

The aria-setsize attribute defines the number of items in the current set of listitems or treeitems when not all items in the set are present in the DOM.

The aria-sort attribute indicates if items in a table or grid are sorted in ascending or descending order.

The aria-valuemax attribute defines the maximum allowed value for a range widget.

The aria-valuemin attribute defines the minimum allowed value for a range widget.

The aria-valuenow attribute defines the current value for a range widget.

The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.

Create an HTML attribute. This is like saying element.setAttribute("class", "wibble") in JavaScript. Attributes will be rendered when calling element.to_string.

Note: there is a subtle difference between attributes and properties. You can read more about the implications of this here.

Controls whether text input is automatically capitalised. The following values are accepted:

The autocapitalisation processing model is based on the following five modes:

• default: The user agent and input method should make their own determination of whether or not to enable autocapitalization.

• none: No autocapitalisation should be applied (all letters should default to lowercase).

• sentences: The first letter of each sentence should default to a capital letter; all other letters should default to lowercase.

• words: The first letter of each word should default to a capital letter; all other letters should default to lowercase.

• characters: All letters should default to uppercase.

A hint for the user agent to automatically fill the value of the input with an appropriate value. The format for the "autocomplete" attribute is a space-separated ordered list of optional tokens:

"section-* (shipping | billing) [...fields] webauthn"

• section-*: used to disambiguate between two fields with otherwise identical autocomplete values. The * is replaced with a string that identifies the section of the form.

• shipping | billing: indicates the field is related to shipping or billing address or contact information.

• [...fields]: a space-separated list of field names that are relevant to the input, for example "email", "name family-name", or "home tel".

• webauthn: indicates the field can be automatically filled with a WebAuthn passkey.

In addition, the value may instead be "off" to disable autocomplete for the input, or "on" to let the user agent decide based on context what values are appropriate.

The following input types support the "autocomplete" attribute:

• "color"
• "date"
• "datetime-local"
• "email"
• "hidden"
• "month"
• "number"
• "password"
• "range"
• "search"
• "tel"
• "text"
• "time"
• "url"
• "week"

Controls whether the user agent may automatically correct mispelled words while typing. Whether or not spelling is corrected is left up to the user agent and may also depend on the user’s settings.

When disabled the user agent is never allowed to correct spelling.

For server-rendered HTML, this attribute controls whether an element should be focused when the page first loads.

Note: Lustre’s runtime augments that native behaviour of this attribute. Whenever it is toggled true, the element will be automatically focused even if it already exists in the DOM.

Indicates that the media resource should automatically begin playing as soon as it can do so without stopping. When not present, the media will not automatically play until the user initiates playback.

Note: Lustre’s runtime augments this attribute. Whenever it is toggled to true, the media will begin playing as if the element’s play() method was called.

Declares the character encoding used in the document. When used with a meta element, this replaces the need for the http_equiv("content-type") attribute.

Whether the control is checked or not. When participating in a form, the value of the input is included in the form submission if it is checked. For checkboxes that do not have a value, the value of the input is "on" when checked.

The following input types support the "checked" attribute:

• "checkbox"
• "radio"

A class is a non-unique identifier for an element primarily used for styling purposes. You can provide multiple classes as a space-separated list and any style rules that apply to any of the classes will be applied to the element.

To conditionally toggle classes on and off, you can use the classes function instead.

Note: unlike most attributes, multiple class attributes are merged with any existing other classes on an element. Classes added later in the list will override classes added earlier.

A class is a non-unique identifier for an element primarily used for styling purposes. You can provide multiple classes as a space-separated list and any style rules that apply to any of the classes will be applied to the element. This function allows you to conditionally toggle classes on and off.

Note: unlike most attributes, multiple class attributes are merged with any existing other classes on an element. Classes added later in the list will override classes added earlier.

The color space of the serialised CSS color. It also hints to user agents about what kind of interface to present to the user for selecting a color. The following values are accepted:

• "limited-srgb": The CSS color is converted to the ‘srgb’ color space and limited to 8-bits per component, e.g., "#123456" or "color(srgb 0 1 0 / 0.5)".

• "display-p3": The CSS color is converted to the ‘display-p3’ color space, e.g., "color(display-p3 1.84 -0.19 0.72 / 0.6)".

The following input types support the "colorspace" attribute:

• "color"

Specifies the value of the meta element, which varies depending on the value of the name or http-equiv attribute.

Indicates whether the element’s content is editable by the user, allowing them to modify the HTML content directly. The following values are accepted:

Note: setting the value to an empty string does not disable this attribute, and is instead equivalent to setting it to "true"!

When present, this attribute shows the browser’s built-in control panel for the media player, giving users control over playback, volume, seeking, and more.

Configures the CORS (Cross-Origin Resource Sharing) settings for the element. Valid values are “anonymous” and “use-credentials”.

Add a data-* attribute to an HTML element. The key will be prefixed by "data-", and accessible from JavaScript or in Gleam decoders under the path element.dataset.key where key is the key you provide to this function.

Provides a hint about how the image should be decoded. Valid values are “sync”, “async”, and “auto”.

Specifies the text direction of the element’s content. The following values are accepted:

Note: the "auto" value should only be used as a last resort in cases where the content’s direction is truly unknown. The heuristic used by browsers is naive and only considers the first character available that indicates the direction.

The name of the field included in a form that indicates the direcionality of the user’s input.

The following input types support the "dirname" attribute:

• "email"
• "hidden"
• "password"
• "search"
• `“submit”
• "tel"
• "text"
• "url"

Controls whether or not the input is disabled. Disabled inputs are not validated during form submission and are not interactive.

Indicates that the linked resource should be downloaded rather than displayed. When provided with a value, it suggests a filename for the downloaded file.

Indicates whether the element can be dragged as part of the HTML drag-and-drop API.

Specifies how form data should be encoded before sending it to the server. Valid values include:

Specifies what action label (or potentially icon) to present for the “enter” key on virtual keyboards such as mobile devices. The following values are accepted:

The examples listed are demonstrative and may not be the actual labels used by user agents. When unspecified or invalid, the user agent may use contextual information such as the type of an input to determine the label.

Sets the priority for fetches initiated by the element. Valid values are “high”, “low”, and “auto”.

Associates the input with a form element located elsewhere in the document.

The URL to use for form submission. This URL will override the "action" attribute on the form element itself, if present.

The following input types support the "formaction" attribute:

• "image"
• "submit"

Entry list encoding type to use for form submission

• "image"
• "submit"

Variant to use for form submission

• "image"
• "submit"

Bypass form control validation for form submission

• "image"
• "submit"

Navigable for form submission

• "image"
• "submit"

Specifies the height of the element in pixels.

Indicates whether the element is relevant to the page’s current state. A hidden element is not visible to the user and is inaccessible to assistive technologies such as screen readers. This makes it unsuitable for simple presentation purposes, but it can be useful for example to render something that may be made visible later.

Specifies the URL of a linked resource. This attribute can be used on various elements to create hyperlinks or to load resources.

Specifies the language of the linked resource. The value must be a valid BCP 47 language tag.

Sets a pragma directive for a document. This is used in meta tags to define behaviors the user agent should follow.

The "id" attribute is used to uniquely identify a single element within a document. It can be used to reference the element in CSS with the selector #id, in JavaScript with document.getElementById("id"), or by anchors on the same page with the URL "#id".

Marks the element as inert, meaning it is not currently interactive and does not receive user input. For sighted users, it’s common to style inert elements in a way that makes them visually distinct from active elements, such as by greying them out: this can help avoid confusion for users who may not otherwise know the content they are looking at is inactive.

Hints to the user agent about what type of virtual keyboard to display when the user interacts with the element. The following values are accepted:

The "none" value should only be used in cases where you are rendering a custom input method, otherwise the user will not be able to enter any text!

Specifies the customised built-in element to be used in place of the native element this attribute is applied to.

Indicates that the image is a server-side image map. When a user clicks on the image, the coordinates of the click are sent to the server.

Used as part of the Microdata format to specify the global unique identifier of an item, for example books that are identifiable by their ISBN.

Used as part of the Microdata format to specify that the content of the element is to be treated as a value of the given property name.

Used as part of the Microdata format to indicate that the element and its descendants form a single item of key-value data.

Used as part of the Microdata format to specify the type of item being described. This is a URL that points to a schema containing the vocabulary used for an item’s key-value pairs, such as a schema.org type.

Specifies the language of the element’s content and the language of any of this element’s attributes that contain text. The "lang" attribute applies to the element itself and all of its descendants, unless overridden by another "lang" attribute on a descendant element.

The value must be a valid BCP 47 language tag.

List of autocomplete options

The following input types support the "list" attribute:

• "color"
• "date"
• "datetime-local"
• "email"
• "month"
• "number"
• "range"
• "search"
• "tel"
• "text"
• "time"
• "url"
• "week"

Indicates how the browser should load the image. Valid values are “eager” (load immediately) and “lazy” (defer loading until needed).

When present, this attribute indicates that the media should start over again from the beginning when it reaches the end.

Constrain the maximum value of a form control. The exact syntax of this value changes depending on the type of input, for example "1", "1979-12-31", and "06:00" are all potentially valid values for the "max" attribute.

The following input types support the "max" attribute:

• "date"
• "datetime-local"
• "month"
• "number"
• "range"
• "time"
• "week"

Maximum length of value

The following input types support the "maxlength" attribute:

• "email"
• "password"
• "search"
• "tel"
• "text"
• "url"

Specifies the media types the resource applies to. This is commonly used with link elements for stylesheets to determine when they should be loaded.

Specifies the HTTP method to use when submitting the form. Common values are:

Minimum value

The following input types support the "max" attribute:

• "date"
• "datetime-local"
• "month"
• "number"
• "range"
• "time"
• "week"

Minimum length of value

• "email"
• "password"
• "search"
• "tel"
• "text"
• "url"

Whether an input or select may allow multiple values to be selected at once.

The following input types support the "multiple" attribute:

• "email"
• "file"

When present, this attribute indicates that the audio output of the media element should be initially silenced.

Name of the element to use for form submission and in the form.elements API

A cryptographic nonce used by CSP (Content Security Policy) to allow or deny the fetch of a given resource.

Create an empty attribute. This is not added to the DOM and not rendered when calling element.to_string, but it is useful for conditionally adding attributes to an element.

When present, indicates that the form should not be validated when submitted. This allows submission of forms with invalid or incomplete data.

Pattern to be matched by the form control’s value

• "email"
• "password"
• "search"
• "tel"
• "text"
• "url"

Provides a space-separated list of URLs that will be notified if the user follows the hyperlink. These URLs will receive POST requests with bodies of type ping/1.0.

User-visible label to be placed within the form control

• "email"
• "number"
• "password"
• "search"
• "tel"
• "text"
• "url"

Encourages the user agent to display video content within the element’s playback area rather than in a separate window or fullscreen, especially on mobile devices.

This attribute only acts as a hint to the user agent, and setting this to false does not imply that the video will be played in fullscreen.

Specifies that the element should be treated as a popover, rendering it in the top-layer above all other content when the popover is active. The following values are accepted:

All modes except "manual" support “light dismiss” letting the user close the popover by clicking outside of it, as well as respond to close requests letting the user dismiss a popover by pressing the “escape” key or by using the dismiss gesture on any assistive technology.

Popovers can be triggered either programmatically through the showPopover() method, or by assigning an id to the element and including the popovertarget attribute on the element that should trigger the popover.

Targets a popover element to toggle, show, or hide

The following input types support the "popovertarget" attribute:

• "button"
• "image"
• "reset"
• "submit"

Indicates whether a targeted popover element is to be toggled, shown, or hidden

The following input types support the "popovertarget" attribute:

• "button"
• "image"
• "reset"
• "submit"

Specifies an image to be shown while the video is downloading, or until the user hits the play button.

Provides a hint to the browser about what the author thinks will lead to the best user experience. The following values are accepted:

Create a DOM property. This is like saying element.className = "wibble" in JavaScript. Properties will be not be rendered when calling element.to_string.

Note: there is a subtle difference between attributes and properties. You can read more about the implications of this here.

Whether to allow the value to be edited by the user

• "date"
• "datetime-local"
• "email"
• "month"
• "number"
• "password"
• "range"
• "search"
• "tel"
• "text"
• "time"
• "url"
• "week"

Specifies the referrer policy for fetches initiated by the element. The following values are accepted:

Specifies the relationship between the current document and the linked resource. Multiple relationship values can be provided as a space-separated list.

Whether the control is required for form submission

• "checkbox"
• "date"
• "datetime-local"
• "email"
• "month"
• "number"
• "password"
• "radio"
• "range"
• "search"
• "tel"
• "text"
• "time"
• "url"
• "week"

Controls whether or not a select’s <option> is selected or not. Only one option can be selected at a time, unless the "multiple" attribute is set on the select element.

Determines whether the shadow root can be cloned when the host element is cloned.

Indicates whether focus should be delegated to the shadow root when an element in the shadow tree gains focus.

Specifies the mode for creating a shadow root on a template. Valid values include:

Note: if you are pre-rendering a Lustre component you must make sure this attribute matches the open_shadow_root configuration - or "closed" if not explicitly set - to ensure the shadow root is created correctly.

Controls whether the shadow root should be preserved during serialization operations like copying to the clipboard or saving a page.

Size of the control

The following input types support the size attribute:

• "email"
• "password"
• "search"
• "tel"
• "text"
• "url"

Used with srcset to define the size of images in different layout scenarios. Helps the browser select the most appropriate image source.

Indicates whether the element’s content should be checked for spelling errors. This typically only applies to inputs and textareas, or elements that are contenteditable.

Specifies the URL of an image or resource to be used.

Specifies a set of image sources for different display scenarios. This allows browsers to choose the most appropriate image based on factors like screen resolution and viewport size.

Granularity to be matched by the form control’s value

The following input types support the "step" attribute:

• "date"
• "datetime-local"
• "month"
• "number"
• "range"
• "time"
• "week"

Provide a single property name and value to be used as inline styles for the element. If either the property name or value is empty, this attribute will be ignored.

Note: unlike most attributes, multiple style attributes are merged with any existing other styles on an element. Styles added later in the list will override styles added earlier.

Provide a list of property-value pairs to be used as inline styles for the element. Empty properties or values are omitted from the final style string.

Note: unlike most attributes, multiple styles attributes are merged with any existing other styles on an element. Styles added later in the list will override styles added earlier.

Specifies the tabbing order of the element. If an element is not typically focusable, such as a <div>, it will be made focusable when this attribute is set.

Any integer value is accepted, but the following values are recommended:

• -1: indicates the element may receive focus, but should not be sequentially focusable. The user agent may choose to ignore this preference if, for example, the user agent is a screen reader.

• 0: indicates the element may receive focus and should be placed in the sequential focus order in the order it appears in the DOM.

• any positive integer: indicates the element should be placed in the sequential focus order relative to other elements with a positive tabindex.

Values other than 0 and -1 are generally not recommended as managing the relative order of focusable elements can be difficult and error-prone.

Specifies where to display the linked resource or where to open the link. The following values are accepted:

Note: consider against using "_blank" for links to external sites as it removes user control over their browsing experience.

Annotate an element with additional information that may be suitable as a tooltip, such as a description of a link or image.

It is not recommended to use the title attribute as a way of providing accessibility information to assistive technologies. User agents often do not expose the title attribute to keyboard-only users or touch devices, for example.

Controls whether an element’s content may be translated by the user agent when the page is localised. This includes both the element’s text content and some of its attributes:

Type of form control

Specifies the name of an image map to be used with the image.

Value of the form control

Specifies the width of the element in pixels.

Indicates if writing suggestions should be enabled for this element.