From bb25ca845ad747b5ff261f5e1295f5e409ab2190 Mon Sep 17 00:00:00 2001
From: Hieromon Ikasamo <hieromon@gmail.com>
Date: Tue, 5 Feb 2019 09:04:46 +0900
Subject: [PATCH] Under the work of v0.9.7 documentation

---
 mkdocs.yml              |   1 +
 mkdocs/acelements.md    |  48 +++----
 mkdocs/advancedusage.md |   3 +
 mkdocs/apielements.md   | 304 ++++++++++++++++++++++++++++++++++++----
 mkdocs/css/extra.css    |   9 ++
 mkdocs/index.md         |   4 +-
 6 files changed, 314 insertions(+), 55 deletions(-)
 create mode 100644 mkdocs/css/extra.css

diff --git a/mkdocs.yml b/mkdocs.yml
index 9c08548..ac5f77a 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -56,6 +56,7 @@ theme:
 # Customization
 extra_css:
   - 'css/paragraph.css'
+  - 'css/extra.css'
 extra_javascript:
   - 'js/gifffer.min.js'
 extra:
diff --git a/mkdocs/acelements.md b/mkdocs/acelements.md
index 0138a4a..51567ff 100644
--- a/mkdocs/acelements.md
+++ b/mkdocs/acelements.md
@@ -26,7 +26,7 @@ All AutoConnectElements placed on a custom Web page are included in one form. It
 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.
 
 <i class="fa fa-eye"></i> **Sample**<br>
-<small>`AutoConnectElement element("element", "<hr>");`</small>
+<small>**`AutoConnectElement element("element", "<hr>");`**</small>
 
 <small>On the page:</small><br><img src="../images/acelement.png">
 
@@ -76,10 +76,10 @@ Furthermore, to convert an entity that is not an AutoConnectElement to its nativ
 
 ## AutoConnectButton
 
-AutoConnectButton generates an HTML `<button type="button">` tag and locates a clickable button to a custom Web page. Currently AutoConnectButton corresponds only to name, value, an onclick attribute of HTML button tag. An onclick attribute is generated from an `action` member variable of the AutoConnectButton, which is mostly used with a JavaScript to activate a script.
+AutoConnectButton generates an HTML `#!html <button type="button">` tag and locates a clickable button to a custom Web page. Currently AutoConnectButton corresponds only to name, value, an onclick attribute of HTML button tag. An onclick attribute is generated from an `action` member variable of the AutoConnectButton, which is mostly used with a JavaScript to activate a script.
 
 <i class="fa fa-eye"></i> **Sample**<br>
-<small>`AutoConnectButton button("button", "OK", "myFunction()");`</small>
+<small>**`AutoConnectButton button("button", "OK", "myFunction()");`**</small>
 
 <small>On the page:</small><br><img src="../images/acbutton.png">
 
@@ -119,10 +119,10 @@ ACElement(TextCopy, scCopyText);
 
 ## AutoConnectCheckbox
 
-AutoConnectCheckbox generates an HTML `<input type="checkbox">` tag and a `<label>` tag. It places horizontally on a custom Web page by default.
+AutoConnectCheckbox generates an HTML `#!html <input type="checkbox">` tag and a `#!html <label>` tag. It places horizontally on a custom Web page by default.
 
 <i class="fa fa-eye"></i> **Sample**<br>
-<small>`AutoConnectCheckbox checkbox("checkbox", "uniqueapid", "Use APID unique", false);`</small>
+<small>**`AutoConnectCheckbox checkbox("checkbox", "uniqueapid", "Use APID unique", false);`**</small>
 
 <small>On the page:</small><br><img src="../images/accheckbox.png">
 
@@ -138,7 +138,7 @@ It is the `name` of the AutoConnectCheckbox element and matches the name attribu
 
 ### <i class="fa fa-caret-right"></i> value
 
-It becomes a value of the `value` attribute of an HTML `<input type="checkbox">` tag.
+It becomes a value of the `value` attribute of an HTML `#!html <input type="checkbox">` tag.
 
 ### <i class="fa fa-caret-right"></i> label
 
@@ -151,10 +151,10 @@ A checked is a Boolean value and indicates the checked status of the checkbox. T
 
 ## AutoConnectInput
 
-AutoConnectInput generates an HTML `<input type="text">` tag and a `<label>` tag. It can also have a placeholder. The value of the input box is passed to the destination in the query string and can be retrieved programmatically. You can also update from the sketches.
+AutoConnectInput generates an HTML `#!html <input type="text">` tag and a `#!html <label>` tag. It can also have a placeholder. The value of the input box is passed to the destination in the query string and can be retrieved programmatically. You can also update from the sketches.
 
 <i class="fa fa-eye"></i> **Sample**<br>
-<small>`AutoConnectInput input("input", "", "Server", "MQTT broker server");`</small>
+<small>**`AutoConnectInput input("input", "", "Server", "MQTT broker server");`**</small>
 
 <small>On the page:</small><br><img src="../images/acinput.png">
 
@@ -170,11 +170,11 @@ It is the `name` of the AutoConnectInput element and matches the name attribute,
 
 ### <i class="fa fa-caret-right"></i> value
 
-It becomes a string value of the `value` attribute of an HTML `<input type="text">` tag. The text entered from the custom Web page will be grouped in the query string of the form submission and the string set before accessing the page will be displayed as the initial value.
+It becomes a string value of the `value` attribute of an HTML `#!html <input type="text">` tag. The text entered from the custom Web page will be grouped in the query string of the form submission and the string set before accessing the page will be displayed as the initial value.
 
 ### <i class="fa fa-caret-right"></i> label
 
-A `label` is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML `<label>` tag with an id attribute. The input box and the label are connected by the id attribute.
+A `label` is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML `#!html <label>` tag with an id attribute. The input box and the label are connected by the id attribute.
 
 ### <i class="fa fa-caret-right"></i> placeholder
 
@@ -182,10 +182,10 @@ A placeholder is an option string. Specification of a placeholder will generate
 
 ## AutoConnectRadio
 
-AutoConnectRadio generates few HTML `<input type="radio">` tags as grouped and the same number of `<label>` tags. AutoConnectRadio can keep the value of a radio button as a collection. The grouped values will be placed in the custom Web page to select only one exclusively.
+AutoConnectRadio generates few HTML `#!html <input type="radio">` tags as grouped and the same number of `#!html <label>` tags. AutoConnectRadio can keep the value of a radio button as a collection. The grouped values will be placed in the custom Web page to select only one exclusively.
 
 <i class="fa fa-eye"></i> **Sample**<br>
-<small>`AutoConnectRadio radio("radio", { "30 sec.", "60 sec.", "180 sec." }, "Update period", AC_Vertical, 1);`</small>
+<small>**`AutoConnectRadio radio("radio", { "30 sec.", "60 sec.", "180 sec." }, "Update period", AC_Vertical, 1);`**</small>
 
 <small>On the page:</small><br><img src="../images/acradio.png">
 
@@ -205,7 +205,7 @@ A `values` is an array of String type for the radio button options which as actu
 
 ### <i class="fa fa-caret-right"></i> label
 
-A label is an optional string. A label will be arranged in the left or top of the radio buttons according to the `order`. Specification of a label will generate an HTML `<label>` tag with an `id` attribute. The radio buttons and the label are connected by the id attribute.
+A label is an optional string. A label will be arranged in the left or top of the radio buttons according to the **order**. Specification of a label will generate an HTML `#!html <label>` tag with an `id` attribute. The radio buttons and the label are connected by the id attribute.
 
 ### <i class="fa fa-caret-right"></i> order
 
@@ -214,18 +214,18 @@ A `order` specifies the direction to arrange the radio buttons. It is a value of
 - **`AC_Horizontal`** : Horizontal arrangement.
 - **`AC_Vertical`** : Vertical arrangement.
 
-A label is placed in the left or the top according to `order`.
+A label will place in the left or the top according to the **order**.
 
 ### <i class="fa fa-caret-right"></i> checked
 
-A `checked` specifies the index number (1-based) of `values` to be checked. If this parameter is not specified neither item is checked.
+A `checked` specifies the index number (1-based) of the **values** to be checked. If this parameter is not specified neither item is checked.
 
 ## AutoConnectSelect
 
-AutoConnectSelect generates an HTML `<select>` tag (drop-down list) and few `<option>` tags.
+AutoConnectSelect generates an HTML `#!html <select>` tag (drop-down list) and few `#!html <option>` tags.
 
 <i class="fa fa-eye"></i> **Sample**<br>
-<small>`AutoConnectSelect select("select", { String("Europe/London"), String("Europe/Berlin"), String("Europe/Helsinki"), String("Europe/Moscow"), String("Asia/Dubai") }, "Select TZ name");`</small>
+<small>**`AutoConnectSelect select("select", { String("Europe/London"), String("Europe/Berlin"), String("Europe/Helsinki"), String("Europe/Moscow"), String("Asia/Dubai") }, "Select TZ name");`**</small>
 
 <small>On the page:</small><br><img src="../images/acselect.png">
 
@@ -241,18 +241,18 @@ It is the `name` of the AutoConnectSelect element and matches the name attribute
 
 ### <i class="fa fa-caret-right"></i> options
 
-An `options` is an array of String type for the options which as actually [std::vector](https://en.cppreference.com/w/cpp/container/vector) for an HTML `<option>` tag. It is an initialization list can be used. The option tags will be generated from each entry in the options, the amount of which is the same as the number of items in an `options`.
+An `options` is an array of String type for the options which as actually [std::vector](https://en.cppreference.com/w/cpp/container/vector) for an HTML `#!html <option>` tag. It is an initialization list can be used. The option tags will be generated from each entry in the options, the amount of which is the same as the number of items in an `options`.
 
 ### <i class="fa fa-caret-right"></i> label
 
-A `label` is an optional string. A label is always arranged on the left side of the drop-down list. Specification of a label will generate an HTML `<label>` tag with an id attribute. The select tag and the label are connected by the id attribute.
+A `label` is an optional string. A label is always arranged on the left side of the drop-down list. Specification of a label will generate an HTML `#!html <label>` tag with an id attribute. The select tag and the label are connected by the id attribute.
 
 ## AutoConnectSubmit
 
-AutoConnectSubmit generates an HTML `<input type="button">` tag attached `onclick` attribute. The native code of the `onclick` attribute is the submission of the form with the **POST** method.
+AutoConnectSubmit generates an HTML `#!html <input type="button">` tag attached `#!html onclick` attribute. The native code of the `#!html onclick` attribute is the submission of the form with the **POST** method.
 
 <i class="fa fa-eye"></i> **Sample**<br>
-<small>`AutoConnectSubmit submit("submit", "Save", "/mqtt_save");`</small>
+<small>**`AutoConnectSubmit submit("submit", "Save", "/mqtt_save");`**</small>
 
 <small>On the page:</small><br><img src="../images/acsubmit.png">
 
@@ -268,7 +268,7 @@ It is the `name` of the AutoConnectSubmit element and matches the name attribute
 
 ### <i class="fa fa-caret-right"></i> value
 
-It becomes a string of the `value` attribute of an HTML `<input type="button">` tag. The `value` will be displayed as a label of the button.
+It becomes a string of the `value` attribute of an HTML `#!html <input type="button">` tag. The `value` will be displayed as a label of the button.
 
 ### <i class="fa fa-caret-right"></i> uri
 
@@ -280,10 +280,10 @@ The query string of the form data sent with AutoConnectSubmit contains the URI o
 
 ## AutoConnectText
 
-AutoConnectText generates an HTML `<div>` tag. A `style` attribute will be attached if a [style](#style) parameter is passed.
+AutoConnectText generates an HTML `#!html <div>` tag. A `#!html style` attribute will be attached if a [style](#style) parameter is passed.
 
 <i class="fa fa-eye"></i> **Sample**<br>
-<small>`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;");`</small>
+<small>**`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;");`**</small>
 
 <small>On the page:</small><br><img src="../images/actext.png">
 
diff --git a/mkdocs/advancedusage.md b/mkdocs/advancedusage.md
index f6742ad..34e88e8 100644
--- a/mkdocs/advancedusage.md
+++ b/mkdocs/advancedusage.md
@@ -22,6 +22,9 @@ Portal.begin();
 
 An autoReconnect option is available to *AutoConnect::begin* without SSID and pass passphrase.
 
+!!! caution "An autoReconnect will work if SSID detection succeeded"
+    An autoReconnect will not effect if the SSID which stored credential to be connected is a hidden access point.
+
 ### <i class="fa fa-caret-right"></i> Auto save Credential
 
 By default, AutoConnect saves the credentials of the established connection in EEPROM. You can disable it with the [**autoSave**](api.md#autosave) parameter specified by [**AutoConnectConfig**](api.md#autoconnectconfig).
diff --git a/mkdocs/apielements.md b/mkdocs/apielements.md
index 51b35f5..137c5e0 100644
--- a/mkdocs/apielements.md
+++ b/mkdocs/apielements.md
@@ -1,18 +1,9 @@
 ## AutoConnectButton
 
-## <i class="fa fa-code"></i> Constructor
+### <i class="fa fa-code"></i> Constructor
 
 ```cpp
-AutoConnectButton()
-```
-```cpp
-AutoConnectButton(const char* name)
-```
-```cpp
-AutoConnectButton(const char* name, const char* value)
-```
-```cpp
-AutoConnectButton(const char* name, const char* value, const String& action)
+AutoConnectButton(const char* name = "", const char* value = "", const String& action = String())
 ```
 <dl class="apidl">
     <dt>**Parameters**</dt>
@@ -21,9 +12,9 @@ AutoConnectButton(const char* name, const char* value, const String& action)
     <dd><span class="apidef">action</span>Native code of the action script executed when the button is clicked.</dd>
 </dl>
 
-## <i class="fa fa-code"></i> Public member variables
+### <i class="fa fa-code"></i> Public member variables
 
-### <i class="fa fa-caret-right"></i> name
+#### <i class="fa fa-caret-right"></i> name
 
 The element name.
 <dl class="apidl">
@@ -31,7 +22,7 @@ The element name.
     <dd><span class="apidef" style="width:230px;">String</span></dd>
 </dl>
 
-### <i class="fa fa-caret-right"></i> value
+#### <i class="fa fa-caret-right"></i> value
 
 Value of the element.
 <dl class="apidl">
@@ -39,17 +30,19 @@ Value of the element.
     <dd><span class="apidef" style="width:230px;">String</span></dd>
 </dl>
 
-### <i class="fa fa-caret-right"></i> action
+#### <i class="fa fa-caret-right"></i> action
 
-Native code of the action script executed when the button is clicked.
+HTML native code of the action script to be executed when the button is clicked. It is mostly used with a JavaScript to activate a script.[^1]
 <dl class="apidl">
     <dt>**Type**</dt>
     <dd><span class="apidef" style="width:230px;">String</span></dd>
 </dl>
 
-## <small><i class="fa fa-code"></i> Public member functions</small>
+[^1]:JavaScript can be inserted into a custom Web page using AutoConnectElement.
 
-### <i class="fa fa-caret-right"></i> typeOf
+### <i class="fa fa-code"></i> Public member functions
+
+#### <i class="fa fa-caret-right"></i> typeOf
 
 ```cpp
 ACElement_t typeOf(void)
@@ -60,18 +53,74 @@ Returns type of AutoConnectElement.
     <dd>AC_Button</dd>
 </dl>
 
-## AutoConnectElement
+## AutoConnectCheckbox
 
-## <i class="fa fa-code"></i> Constructor
+### <i class="fa fa-code"></i> Constructor
 
 ```cpp
-AutoConnectElement()
+  explicit AutoConnectCheckboxBasis(const char* name = "", const char* value = "", const char* label = "", const bool checked = false)
 ```
+<dl class="apidl">
+    <dt>**Parameters**</dt>
+    <dd><span class="apidef">name</span>The element name.</dd>
+    <dd><span class="apidef">value</span>Value of the element.</dd>
+    <dd><span class="apidef">label</span>A label string prefixed to the checkbox.</dd>
+    <dd><span class="apidef">check</span>Checked state of the checkbox.</dd>
+</dl>
+
+### <i class="fa fa-code"></i> Public member variables
+
+#### <i class="fa fa-caret-right"></i> name
+
+The element name. 
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">String</span></dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> value
+
+Value of the element. It becomes a value attribute of an HTML `#!html <input type="checkbox">` tag.
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">String</span></dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> label
+
+A label is an optional string. A label is always arranged on the right side of the checkbox. Specification of a label will generate an HTML `#!html <label>` tag with an `id` attribute. The checkbox and the label are connected by the id attribute.
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">String</span></dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> checked
+
+It indicates the checked status of the checkbox. The value of the checked checkbox element is packed in the query string and sent by submit.
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">Boolean</span></dd>
+</dl>
+
+### <i class="fa fa-code"></i> Public member functions
+
+#### <i class="fa fa-caret-right"></i> typeOf
+
 ```cpp
-AutoConnectElement(conSst char* name)
+ACElement_t typeOf(void)
 ```
+Returns type of AutoConnectElement.
+<dl class="apidl">
+    <dt>**Return value**</dt>
+    <dd>AC_Checkbox</dd>
+</dl>
+
+## AutoConnectElement
+
+### <i class="fa fa-code"></i> Constructor
+
 ```cpp
-AutoConnectElement(const char* name, const char* value)
+AutoConnectElement(const char* name = "", const char* value = "")
 ```
 <dl class="apidl">
     <dt>**Parameters**</dt>
@@ -79,9 +128,9 @@ AutoConnectElement(const char* name, const char* value)
     <dd><span class="apidef">value</span>Value of the element.</dd>
 </dl>
 
-## <small><i class="fa fa-code"></i> Public member variables</small>
+### <i class="fa fa-code"></i> Public member variables
 
-### <i class="fa fa-caret-right"></i> name
+#### <i class="fa fa-caret-right"></i> name
 
 The element name.
 <dl class="apidl">
@@ -89,17 +138,17 @@ The element name.
     <dd><span class="apidef" style="width:230px;">String</span></dd>
 </dl>
 
-### <i class="fa fa-caret-right"></i> value
+#### <i class="fa fa-caret-right"></i> value
 
-Value of the element.
+Value of the element. It is output as HTML as it is as a source for generating HTML code.
 <dl class="apidl">
     <dt>**Type**</dt>
     <dd><span class="apidef" style="width:230px;">String</span></dd>
 </dl>
 
-## <small><i class="fa fa-code"></i> Public member functions</small>
+### <i class="fa fa-code"></i> Public member functions
 
-### <i class="fa fa-caret-right"></i> typeOf
+#### <i class="fa fa-caret-right"></i> typeOf
 
 ```cpp
 ACElement_t typeOf(void)
@@ -109,3 +158,200 @@ Returns type of AutoConnectElement.
     <dt>**Return value**</dt>
     <dd>AC_Element</dd>
 </dl>
+
+## AutoConnectInput
+
+### <i class="fa fa-code"></i> Constructor
+
+```cpp
+AutoConnectInput(const char* name = "", const char* value = "", const char* label = "", const char* placeholder = "")
+```
+<dl class="apidl">
+    <dt>**Parameters**</dt>
+    <dd><span class="apidef">name</span>The element name.</dd>
+    <dd><span class="apidef">value</span>Value of the element.</dd>
+    <dd><span class="apidef">label</span>Label string.</dd>
+    <dd><span class="apidef">placeholder</span>A placeholder string.</dd>
+</dl>
+
+### <i class="fa fa-code"></i> Public member variables
+
+#### <i class="fa fa-caret-right"></i> name
+
+The element name.
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">String</span></dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> value
+
+Value of the element. It becomes a value attribute of an HTML `#!html <input type="text">` tag. An entered text in the custom Web page will be sent with a query string of the form. The value set before accessing the page is displayed as the initial value.
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">String</span></dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> label
+
+A label is an optional string. A label is always arranged on the left side of the input box. Specification of a label will generate an HTML `#!html <label>` tag with an id attribute. The input box and the label are connected by the id attribute.
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">String</span></dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> placeholder
+
+A placeholder is an option string. Specification of a placeholder will generate a `placeholder` attribute for the input tag.
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">String</span></dd>
+</dl>
+
+### <i class="fa fa-code"></i> Public member functions
+
+#### <i class="fa fa-caret-right"></i> typeOf
+
+```cpp
+ACElement_t typeOf(void)
+```
+Returns type of AutoConnectElement.
+<dl class="apidl">
+    <dt>**Return value**</dt>
+    <dd>AC_Input</dd>
+</dl>
+
+## AutoConnectRadio
+
+### <i class="fa fa-code"></i> Constructor
+
+```cpp
+AutoConnectRadio(const char* name = "", std::vector<String> const& values = {}, const char* label = "", const ACArrange_t order = AC_Vertical, const uint8_t checked = 0)
+```
+<dl class="apidl">
+    <dt>**Parameters**</dt>
+    <dd><span class="apidef">name</span>The element name.</dd>
+    <dd><span class="apidef">values</span>An array of values of the radio buttons. Specifies an [std::vector](https://en.cppreference.com/w/cpp/container/vector) object.</dd>
+    <dd><span class="apidef">label</span>Label string.</dd>
+    <dd><span class="apidef">order</span>The direction to arrange the radio buttons.</dd>
+    <dd><span class="apidef">checked</span>An index to be checked in the radio buttons.</dd>
+</dl>
+
+### <i class="fa fa-code"></i> Public member variables
+
+#### <i class="fa fa-caret-right"></i> name
+
+The element name.
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">String</span></dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> values
+
+An array of String type for the radio button options. It is an initialization list can be used. The `#!html <input type="radio">` tags will be generated from each entry in the values.
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">std::vector&lt;String&gt;</span></dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> label
+
+A label is an optional string. A label will be arranged in the left or top of the radio buttons according to the [order](#order).
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">String</span></dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> order
+
+Specifies the direction to arrange the radio buttons. A label will place in the left or the top according to the **_order_**. It is a value of **ACArrange_t** type and accepts one of the following:
+
+- **`AC_Horizontal`** : Horizontal arrangement.
+- **`AC_Vertical`** : Vertical arrangement.  
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">ACArrange_t</span></dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> checked
+
+Specifies the index number (1-based) of the **values** to be checked. If this parameter is not specified neither item is checked.
+<dl class="apidl">
+    <dt>**Type**</dt>
+    <dd><span class="apidef" style="width:230px;">uint8_t</span></dd>
+</dl>
+
+### <i class="fa fa-code"></i> Public member functions
+
+#### <i class="fa fa-caret-right"></i> typeOf
+
+```cpp
+ACElement_t typeOf(void)
+```
+Returns type of AutoConnectElement.
+<dl class="apidl">
+    <dt>**Return value**</dt>
+    <dd>AC_Radio</dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> add
+
+```cpp
+void add(const String& value)
+```
+Adds an option for the radio button.
+<dl class="apidl">
+    <dt>**Parameters**</dt>
+    <dd><span class="apidef">value</span>An option string to add to the radio button.</dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> check
+
+```cpp
+void check(const String& value)
+```
+Indicates the check of the specified option for the radio buttons. You can use the **check** function for checking dynamically with arbitrary of the radio button.
+<dl class="apidl">
+    <dt>**Parameters**</dt>
+    <dd><span class="apidef">value</span>An option string to be checked.</dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> empty
+
+```cpp
+void empty(const size_t reserve = 0)
+```
+Clear the array of option strings that AutoConnectRadio has in values. When a **_reserve_** parameter is specified, a vector container of that size is reserved.
+<dl class="apidl">
+    <dt>**Parameters**</dt>
+    <dd><span class="apidef">reserve</span>Reserved size of a container for option strings.</dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> operator &#91;&nbsp;&#93;
+
+```cpp
+const String& operator[] (const std::size_t n)
+```
+Returns the option string of the index specified by **_n_**.
+<dl class="apidl">
+    <dt>**Parameters**</dt>
+    <dd><span class="apidef">n</span>Index of values array to return.</dd>
+</dl>
+
+#### <i class="fa fa-caret-right"></i> value
+
+```cpp
+  const String& value(void) const
+```
+Returns current checked option of the radio buttons.
+<dl class="apidl">
+    <dt>**Return value**</dt>
+    <dd>A String of an option current checked. If there is no checked option, a null string returned.</dd>
+</dl>
+
+## AutoConnectSelect
+
+## AutoConnectSubmit
+
+## AutoConnectText
diff --git a/mkdocs/css/extra.css b/mkdocs/css/extra.css
new file mode 100644
index 0000000..1a9c3d6
--- /dev/null
+++ b/mkdocs/css/extra.css
@@ -0,0 +1,9 @@
+pre { color: white !important; }
+
+.md-clipboard:before {
+    color: rgb(100, 100, 100);
+}
+
+.codehilite:hover .md-clipboard:before,.md-typeset .highlight:hover .md-clipboard:before,pre:hover .md-clipboard:before {
+    color: rgba(255, 255, 255, 0.54) !important
+}
diff --git a/mkdocs/index.md b/mkdocs/index.md
index 1e4ba49..8e75879 100644
--- a/mkdocs/index.md
+++ b/mkdocs/index.md
@@ -83,11 +83,11 @@ Install third-party platform using the *Boards Manager* of Arduino IDE. You can
 <i class="fa fa-download"></i> <strong>Additional necessary library</strong>
 
 The [PageBuilder](https://github.com/Hieromon/PageBuilder) library to build HTML for ESP8266WebServer is needed.  
-To install the PageBuilder library into your Arduino IDE, you can use the *Library Manager*. Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword '**PageBuilder**' with the topic '**Communication**', then you can see the *PageBuilder*. The latest version is required 1.3.0 later.[^1]
+To install the PageBuilder library into your Arduino IDE, you can use the *Library Manager*. Select the board of ESP8266 series in the Arduino IDE, open the library manager and search keyword '**PageBuilder**' with the topic '**Communication**', then you can see the *PageBuilder*. The latest version is required 1.3.1 later.[^1]
 
 <img src="./images/lm.png" width="640"/>
 
-[^1]:Since AutoConnect v0.9.7, PageBuilder v1.3.0 later is required.
+[^1]:Since AutoConnect v0.9.7, PageBuilder v1.3.1 later is required.
 
 <i class="fa fa-download"></i> <strong>Another library (optional)</strong>