## The elements for the custom Web pages Representative HTML elements for making the custom Web page are provided as AutoConnectElements. - [AutoConnectButton](#autoconnectbutton): Labeled action button - [AutoConnectCheckbox](#autoconnectcheckbox): Labeled checkbox - [AutoConnectElement](#autoconnectelement-a-basic-class-of-elements): General tag - [AutoConnectFile](#autoconnectfile): File uploader - [AutoConnectInput](#autoconnectinput): Labeled text input box - [AutoConnectRadio](#autoconnectradio): Labeled radio button - [AutoConnectSelect](#autoconnectselect): Selection list - [AutoConnectStyle](#autoconnectstyle): Custom CSS code - [AutoConnectSubmit](#autoconnectsubmit): Submit button - [AutoConnectText](#autoconnecttext): Style attributed text ## Layout on a custom Web page AutoConnect will not actively be involved in the layout of custom Web pages generated from AutoConnectElements. However, each element has [an attribute to arrange placement](#post) on a custom web page by horizontally or vertically. ## Custom CSS for a custom Web page All custom Web page styles are limited to the built-in unique CSS embedded in the library code. Direct modification of the CSS affects AutoConnect behavior. You can use dedicated elements to relatively safely modify the style of your custom Web page. The [AutoConnectStyle](#autoconnectstyle) will insert the raw CSS code into the style block in HTML of the custom Web page. ## Form and AutoConnectElements All AutoConnectElements placed on custom web pages will be contained into one form. Its form is fixed and created by AutoConnect. The form value (usually the text or checkbox you entered) is sent by [AutoConnectSubmit](#autoconnectsubmit) using the **POST** method with HTTP. The post method sends the actual form data which is a query string whose contents are the **name** and **value** of AutoConnectElements. You can retrieve the value for the parameter with the sketch from the query string with [ESP8266WebServer::arg](https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer#getting-information-about-request-arguments) function or [PageArgument](https://github.com/Hieromon/PageBuilder#arguments-of-invoked-user-function) class of the [AutoConnect::on](api.md#on) handler when the form is submitted. ## AutoConnectElement - A basic class of elements AutoConnectElement is a base class for other element classes and has common attributes for all elements. It can also be used as a [variant](#variant-for-autoconnectelements) of each element. The following items are attributes that AutoConnectElement has and are common to other elements. **Sample**
**`AutoConnectElement element("element", "
");`** On the page:
### Constructor ```cpp AutoConnectElement(const char* name, const char* value, const ACPosterior_t post) ``` ### name Each element has a name. The **name** is the String data type. You can identify each element by the name to access it with sketches. ### value The **value** is the string which is a source to generate an HTML code. Characteristics of Value vary depending on the element. The value of AutoConnectElement is native HTML code. A string of value is output as HTML as it is. ### post The **post** specifies a tag to add behind the HTML code generated from the element. Its purpose is to place elements on the custom Web page as intended by the user sketch. AutoConnect will not actively be involved in the layout of custom Web pages generated from AutoConnectElements. Each element follows behind the previous one, with the exception of some elements. You can use the **post** value to arrange vertically or horizontal when the elements do not have the intended position on the custom Web Page specifying the following enumeration value as **ACPosterior_t** type for the **post**. - **`AC_Tag_None`** : No generate additional tags. - **`AC_Tag_BR`** : Add a `
` tag to the end of the element. - **`AC_Tag_P`** : Include the element in the `

~

` tag. The default interpretation of the post value is specific to each element. AutoConnectElements | Default interpretation of the post value ----|---- AutoConnectElement | AC_Tag_None AutoConnectButton | AC_Tag_None AutoConnectCheckBox | AC_Tag_BR AutoConnectFile | AC_Tag_BR AutoConnectInput | AC_Tag_BR AutoConnectRadio | AC_Tag_BR AutoConnectSelect | AC_Tag_BR AutoConnectSubmit | AC_Tag_None AutoConnectText | AC_Tag_None ### type The **type** indicates the type of the element and represented as the *ACElement_t* enumeration type in the sketch. Since AutoConnectElement also acts as a variant of other elements, it can be applied to handle elements collectively. At that time, the type can be referred to by the [**typeOf()**](apielements.md#typeof) function. The following example changes the font color of all [AutoConnectText](#autoconnecttext) elements of a custom Web page to gray. ```cpp hl_lines="5" AutoConnectAux customPage; AutoConnectElementVT& elements = customPage.getElements(); for (AutoConnectElement& elm : elements) { if (elm.typeOf() == AC_Text) { AutoConnectText& text = reinterpret_cast(elm); text.style = "color:gray;"; } } ``` The enumerators for *ACElement_t* are as follows: - AutoConnectButton: **AC_Button** - AutoConnectCheckbox: **AC_Checkbox** - AutoConnectElement: **AC_Element** - AutoConnectFile: **AC_File** - AutoConnectInput: **AC_Input** - AutoConnectRadio: **AC_Radio** - AutoConnectSelect: **AC_Select** - AutoConnectStyle: **AC_Style** - AutoConnectSubmit: **AC_Submit** - AutoConnectText: **AC_Text** - Uninitialized element: **AC_Unknown** Furthermore, to convert an entity that is not an AutoConnectElement to its native type, you must [re-interpret](https://en.cppreference.com/w/cpp/language/reinterpret_cast) that type with c++. Or, you can be coding the sketch more easily with using the [**as**](apielements.md#ast62) function. ```cpp hl_lines="6" AutoConnectAux customPage; AutoConnectElementVT& elements = customPage.getElements(); for (AutoConnectElement& elm : elements) { if (elm.type() == AC_Text) { AutoConnectText& text = customPage[elm.name].as(); text.style = "color:gray;"; // Or, it is also possible to write the code further reduced as follows. // customPage[elm.name].as().style = "color:gray;"; } } ``` ## AutoConnectButton AutoConnectButton generates an HTML `#!html