# Set Element Attribute

{% hint style="info" %}
**Block Information**

Available in: Page Flow

Toolbox Category: Html/DOM

Block Type: [Regular](https://docs.zingy.ai/app-editor/block-anatomy#regular-block)
{% endhint %}

**`Set Element Attribute`** is a [regular block](https://docs.zingy.ai/app-editor/block-anatomy#regular-block) that allows you to set the value of any [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) in elements on a page or form.

{% hint style="success" %}
Refer to the [Set Element Attribute in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/set-element-attribute-in-data-design) block for dynamically generated content.
{% endhint %}

The block comes in two modes which are discussed below.

## Mode 1 <a href="#mode-1" id="mode-1"></a>

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FapslQwsipRIY4MPnPlUc%2Fimage.png?alt=media&#x26;token=d9b7f078-8944-4f76-a116-2d4c022254e3" alt="" width="383"><figcaption><p>Set Element Attribute (Mode 1)</p></figcaption></figure></div>

The Mode 1 version of the Set Element Attribute block consists of (from left to right):

* *Attribute:* [Input](https://docs.zingy.ai/app-editor/block-anatomy#input) configuration setting to specify the [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) to set or change the value of.
* *Element*: [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the element you want to set the attribute of.
* *Data*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts the value for the attribute being set (of type [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types)*)*

## Mode 2 <a href="#mode-2" id="mode-2"></a>

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F2REpZYOzddB9Cz5bYNMw%2Fimage.png?alt=media&#x26;token=7e8304db-b510-4899-83c9-2afe24951d1b" alt="" width="383"><figcaption><p>Set Element Attribute (Mode 2)</p></figcaption></figure></div>

The Mode 2 version of the Set Element Attribute block consists of (from left to right):

* *Attribute*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a *text* value representing the [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) to set or change the value of.
* *Element*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts either a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value[.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) The Element block comes pre-attached for your convenience but can be removed and customized.
* *Data*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts the value for the attribute being set (of type [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types)*)*

***

## Usage Examples

The image below shows an example of the Mode 1 version where a [Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/link) element is selected for which the *Attribute* input configuration is set to [href](https://docs.zingy.ai/page-editor/built-in-elements/link#href) and the *Data* value parameter is attached to a Text block containing the Zingy website URL.&#x20;

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F5NsD74NoGnj8PqKgNwad%2Fimage.png?alt=media&#x26;token=f968cdd8-6d1e-41ac-961d-fe7d6ab3c795" alt="" width="563"><figcaption><p>Example of Set Element Attribute Mode 1</p></figcaption></figure></div>

In the next example we see a Mode 2 version where the *Element* value parameter is attached to a Text block containing a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) that selects the same [Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/link) element and sets the same attribute: [href](https://docs.zingy.ai/page-editor/built-in-elements/link#href). This time the *Data* value parameter is attached to a Variable block for variable named a.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FU5VYMVNR4ALVrVXym2q7%2Fimage.png?alt=media&#x26;token=374ed82a-73b9-4e84-abe7-c1dba7cb56be" alt="" width="563"><figcaption><p>Example of Set Element Attribute Mode 2</p></figcaption></figure></div>

{% hint style="success" %}
NOTE: Using a CSS selector, you can operate on multiple elements that match the criteria specified by the selector. See the references below for more information:

* [Wikipedia article on CSS](https://en.wikipedia.org/wiki/CSS#Selector)
* [Mozilla Developer Network article on CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)
  {% endhint %}