Html Attributes

Jump to bottom

Pascal Boucher edited this page Oct 7, 2019 · 35 revisions

Introduction

The html attributes service give you the ability to easily add a comprehensive list of html5 attributes to your forms and nodes.

Add Html Attributes

You can add html attributes on all model using the withHtmlAttributes method. It accepts an array of html attributes. However, not all models accept the same attributes. If an attribute is not supported by the model, it won't add it to the model attributes list.

$form->withHtmlAttributes(['accept-charset' => ['utf8'], 'role' => 'form', 'id' => 'test'])
    ->save();

This method is also available on nodes model.

$node->withHtmlAttributes(['id' => 'test', 'class' => 'col-12'])
    ->save();

Remove Html Attributes

You can remove html attributes on any model using the removeHtmlAttributes method. It accepts an array of html attributes to be removed.

$form->removeHtmlAttributes(['accept-charset', 'role', 'id'])
    ->save();

This method is also available on nodes model.

$node->removeHtmlAttributes(['id', 'class'])
    ->save();

Alternatively, you can remove an attribute by passing a null value to the withHtmlAttributes method.

$form->withHtmlAttributes(['accept-charset' => null, 'role' => null, 'id' => null])
    ->save();

List of available attributes

accept - accept-charset - alt - autocomplete - autofocus - capture - checked - class - cols - data - disabled - enctype - for - form - height - id - max - maxlength - min - minlength - multiple - name - novalidate - pattern - placeholder - readonly - required - role - rows - selected - size - spellcheck - src - step - target - title - value - width

Accept

A string that defines the file types the file input should accept. This string is a comma-separated list of unique file type specifiers. Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of a given format.

$form->add('file')
    ->withHtmlAttributes(['accept' => ['image/png', 'image/jpeg']])
    ->save();

Accept-charset

A space- or comma-delimited list of character encodings that the server accepts. The browser uses them in the order in which they are listed. The default value, the reserved string "UNKNOWN", indicates the same encoding as that of the document containing the form element. In previous versions of HTML, the different character encodings could be delimited by spaces or commas. In HTML5, only spaces are allowed as delimiters.

$form->fill(['name' => 'test_accept_charset'])
    ->withHtmlAttributes(['accept-charset' => ['utf8', 'latin']])
    ->save();

Alt

Defines an alternative text description of the image.

$form->add('image')
    ->withHtmlAttributes(['alt' => 'alt text'])
    ->save();

Autocomplete

autocomplete attribute is available on elements that take a text or numeric value as input, <textarea> elements, elements, and elements. autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

$form->add('text')
    ->withHtmlAttributes(['autocomplete' => 'name'])
    ->save();

Autofocus

A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the containing the element has been displayed).

$form->add('text')
    ->withHtmlAttributes(['autofocus' => 'autofocus'])
    ->save();

Capture

A string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types. A value of user indicates that the user-facing camera and/or microphone should be used. A value of environment specifies that the outward-facing camera and/or microphone should be used. If this attribute is missing, the user agent is free to decide on its own what to do. If the requested facing mode isn't available, the user agent may fall back to its preferred default mode.

$form->add('file')
    ->withHtmlAttributes(['capture' => 'environment'])
    ->save();

Checked

A Boolean attribute indicating whether or not this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change.

$form->add('checkbox')
    ->withHtmlAttributes(['checked' => 'checked'])
    ->save();

Class

class global attribute is a space-separated list of the classes of the element. Classes allow CSS and Javascript to select and access specific elements via the class selectors or functions like the DOM method document.getElementsByClassName.

$form->add('text')
    ->withHtmlAttributes(['class' => 'test'])
    ->save();

Cols

The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.

$form->add('textarea')
    ->withHtmlAttributes(['cols' => 10])
    ->save();

Data

The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.

$form->add('text')
    ->withHtmlAttributes(['data' => ['data-test', 'test']])
    ->save();

Disabled

A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.

$form->add('text')
    ->withHtmlAttributes(['disabled' => 'disabled'])
    ->save();

Enctype

Defines the content type of the form date when the method is POST.

$form->fill(['name' => 'Enctype'])
    ->withHtmlAttributes(['enctype' => 'multipart/form-data'])
    ->save();

For

The id of a labelable form-related element in the same document as the element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. If it is not labelable then the for attribute has no effect. If there are other elements which also match the id value, later in the document, they are not considered.

$form->add('label')
    ->withHtmlAttributes(['for' => 1])
    ->save();

Form

Indicates the form that is the owner of the element.

$form->add('text')
    ->withHtmlAttributes(['form' => '1'])
    ->save();

Height

A number specifying the height, in CSS pixels, at which to draw the image specified by the src attribute.

$form->add('image')
    ->withHtmlAttributes(['height' => 100])
    ->save();

Id

id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

$form->add('text')
    ->withHtmlAttributes(['id' => 'id_of_input'])
    ->save();

Max

The maximum value to accept for this input. If the value entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a number, then the element has no maximum value.

$form->add('number')
    ->withHtmlAttributes(['max' => 100])
    ->save();

Maxlength

The maximum number of characters (as UTF-16 code units) the user can enter into the text input. This must be an integer value 0 or higher. If no maxlength is specified, or an invalid value is specified, the text input has no maximum length. This value must also be greater than or equal to the value of minlength.

$form->add('text')
    ->withHtmlAttributes(['maxlength' => 100])
    ->save();

Min

The minimum value to accept for this input. If the value of the element is less than this, the element fails constraint validation. If a value is specified for min that isn't a valid number, the input has no minimum value.

$form->add('number')
    ->withHtmlAttributes(['min' => 5])
    ->save();

Minlength

The minimum number of characters (as UTF-16 code units) the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the text input has no minimum length.

$form->add('text')
    ->withHtmlAttributes(['minlength' => 5])
    ->save();

Multiple

When the multiple Boolean attribute is specified, the file input allows the user to select more than one file.

$form->add('file')
    ->withHtmlAttributes(['multiple' => 'multiple'])
    ->save();

Name

A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted, as well as with the owning
element's elements object.

$form->add('text')
    ->withHtmlAttributes(['name' => 'new_text_name'])
    ->save();

Novalidate

This Boolean attribute indicates that the form is not to be validated when submitted. If this attribute is not specified (and therefore the form is validated), this default setting can be overridden by a formnovalidate attribute on a , or element belonging to the form.

$form->fill(['name' => 'Test'])
    ->withHtmlAttributes(['novalidate' => 'novalidate'])
    ->save();

Pattern

The pattern attribute, when specified, is a regular expression that the input's value must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

$form->add('text')
    ->withHtmlAttributes(['pattern' => '[A-Za-z]+'])
    ->save();

Placeholder

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

$form->add('text')
    ->withHtmlAttributes(['placeholder' => 'Placeholder message'])
    ->save();

Readonly

A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input.

$form->add('text')
    ->withHtmlAttributes(['readonly' => 'readonly'])
    ->save();

Required

A Boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted.

$form->add('text')
    ->withHtmlAttributes(['required' => 'required'])
    ->save();

Role

Multiple definitions.

$form->add('text')
    ->withHtmlAttributes(['role' => 'input'])
    ->save();

Rows

The number of visible text lines for the control.

$form->add('textarea')
    ->withHtmlAttributes(['rows' => 25])
    ->save();

Selected

If present, this Boolean attribute indicates that the option is initially selected. If the element is the descendant of a element whose multiple attribute is not set, only one single of this element may have the selected attribute.

$form->add('select')
    ->addOption()
    ->withHtmlAttributes(['selected' => 'selected'])
    ->withText(['Option'])
    ->save();

Size

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).

$form->add('text')
    ->withHtmlAttributes(['size' => 100])
    ->save();

Spellcheck

spellcheck is a global attribute which is used to indicate whether or not to enable spell checking for an element. It can be used on any editable content.

$form->add('text')
    ->withHtmlAttributes(['spellcheck' => true])
    ->save();

Src

A string specifying the URL of the image file to display to represent the graphical submit button. When the user interacts with the image, the input is handled like any other button input.

$form->add('image')
    ->withHtmlAttributes(['src' => '/media/examples/grapefruit-slice-332-332.jpg'])
    ->save();

Step

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

$form->add('number')
    ->withHtmlAttributes(['step' => 10])
    ->save();

Target

A name or keyword indicating where to display the response that is received after submitting the form. In HTML 4, this is the name/keyword for a frame. In HTML5, it is a name/keyword for a browsing context (for example, tab, window, or inline frame).

$form->fill(['name' => 'test'])
    ->withHtmlAttributes(['target' => '_blank'])
    ->save();

Title

The title global attribute contains text representing advisory information related to the element it belongs to.

$form->add('text')
    ->withHtmlAttributes(['title' => 'text title'])
    ->save();

Value

The content of this attribute represents the value to be submitted with the form, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element.

$form->add('option')
    ->withHtmlAttributes(['value' => 'test'])
    ->save();

Width

A number indicating the width at which to draw the image, in CSS pixels.

$form->add('image')
    ->withHtmlAttributes(['width' => 500])
    ->save();