` tag. A `style` attribute will be attached if a [style](#style) parameter is passed.
**Sample**
`AutoConnectText text("text", "Publishing the WiFi signal strength to MQTT channel. RSSI value of ESP8266 to the channel created on ThingSpeak", "font-family:serif;color:#4682b4;");`
On the page:
###
Constructor
```cpp
AutoConnectText(const char* name, const char* value, const char* style)
```
###
name
A `name` does not exist in the generated HTML. It provides only a means of accessing elements with the sketches.
###
value
It becomes content and also can contain the native HTML code, but remember that your written code is enclosed by the div tag.
###
style
A `style` specifies the qualification style to give to the content and can use the style attribute format as it is.
## How to coding for the elements
###
Declaration for the elements in Sketches
Variables of each element can be declared with macros. By using the macros, you can treat element name that is String type as variable in sketches.[^2]
[^2]: The square brackets in the syntax are optional parameters, the stroke is a selection parameter, the bold fonts are literal.
ACElement ( *name*
\[ , *value*
\] )
ACButton ( *name*
\[ , *value*
\] \[ , *action*
\] )
ACCheckbox ( *name*
\[ , *value*
\] \[ , *label*
\] \[ , **true** | **false**
\] )
ACInput ( *name*
\[ , *value*
\] \[ , *label*
\] \[ , *placeholder*
\] )
ACRadio ( *name*
\[ , *values*
\] \[ , *label*
\] \[ , **AC\_Horizontal** | **AC\_Vertical**
\] \[ , *checked*
\] )
ACSelect ( *name*
\[ , *options*
\] \[ , *label*
\] )
ACSubmit ( *name*
\[ , *value*
\] \[ , *uri*
\] )
ACText ( *name*
\[ , *value*
\] \[ , *style*
\] )
!!! memo "Declaration macro usage"
For example, *AutoConnectText* can be declared using macros.
```cpp
AutoConnectText caption("caption", "hello, world", "color:blue;")
```
equals by using *ACText* macro.
```cpp
ACText(caption, "hello, world", "color:blue;")
```
###
Variant for AutoConnectElements
Some AutoConnectAux APIs specify AutoConnectElement as an argument. There are also functions that returns a pointer to AutoConnectElement. In order to make these interfaces single, AutoConnectElement behaves as a variant type of other elements. Use [reinterpret_cast](https://en.cppreference.com/w/cpp/language/reinterpret_cast) to cast from a variant pointer to an Actual type pointer of AutoConnectElements.
```cpp
AutoConnectAux aux;
ACText(Text1, "hello, world");
aux.add(Text1);
AutoConnectText* text_p = reinterpret_cast
(aux.getElement("Text1"));
AutoConnectText& text = aux.getElement("Text1");
```
### Constructor
```cpp
AutoConnectElement(const char* name, const char* value)
```
### name
Each element has a name. **Name** is the String data type. To access its element in the sketches you can identify by the name. Its method is useful for loading elements in JSON. In the load function of AutoConnectElement(s) described [**later**](acjson.md), these objects are not created in advance by sketches. Therefore, access to the attribute of that element by the **name** as follows:
```cpp hl_lines="4 10"
AutoConnectAux customPage("/custom_page", "Custom page");
const char ELEMENT_TEXT[] PROGMEM = R"(
{
"name": "text1",
"type": "ACText",
"value": "Hello, world"
}
)";
customPage.loadElement(ELEMENT_TEXT);
AutoConnectText& text1 = customPage.getElement