HTML表单和输入

HTML 表单和输入

HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
以下是一个简单的HTML表单的例子：

元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。元素用于为表单元素添加标签，提高可访问性。元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联元素，name 属性用于标识表单字段。

密码:

性别:

男

女

订阅推送信息

国家:

尝试一下 »

在线实例

实例以下实例创建了一个表单，包含两个输入框：

尝试一下 » 实例以下实例创建了一个表单，包含一个普通输入框和一个密码输入框：尝试一下 » （在本页底端可以找到更多实例。）

HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。
我们可以使用

HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签。输入类型是由 type 属性定义。接下来我们介绍几种常用的输入类型。

文本域（Text Fields）
文本域通过标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
实例

浏览器显示如下：

First name:
Last name:

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段
密码字段通过标签来定义:
实例

浏览器显示效果如下:

Password:

注意：密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。

单选按钮（Radio Buttons）
标签定义了表单的单选框选项:
实例

浏览器显示效果如下:

男
女

复选框（Checkboxes）
定义了复选框。
复选框可以选取一个或多个选项：
实例

浏览器显示效果如下:

我喜欢自行车
我喜欢小汽车

提交按钮(Submit)
定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:
实例

浏览器显示效果如下:

Username:

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。

以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。

实例

更多实例
单选按钮(Radio buttons)
本例演示如何在 HTML 中创建单选按钮。
复选框(Checkboxes)
本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
简单的下拉列表
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
预选下拉列表
本例演示如何创建一个简单的带有预选值的下拉列表。
文本域(Textarea)
本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。
创建按钮
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。

表单实例
带边框的表单
本例演示如何在数据周围绘制一个带标题的框。
带有输入框和确认按钮的表单
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
带有复选框的表单
此表单包含两个复选框和一个确认按钮。
带有单选按钮的表单
此表单包含两个单选框和一个确认按钮。
从表单发送电子邮件
此例演示如何从表单发送电子邮件。

HTML 表单标签
New : HTML5新标签

标签
描述

定义供用户输入的表单定义输入域

定义文本域 (一个多行的输入控件)

<label>
定义了 <input> 元素的标签，一般为输入标题

<fieldset>
定义了一组相关的表单元素，并使用外框包含起来

<legend>
定义了  <fieldset> 元素的标题

<select>
定义了下拉选项列表

<optgroup>
定义选项组

<option>
定义下拉列表中的选项

<button>
定义一个点击按钮

<datalist>New
指定一个预先定义的输入控件选项列表

<keygen>New
定义了表单的密钥对生成器字段

<output>New
定义一个计算结果

</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>Author: </span><span class="post-copyright-info"><a href="https://www.hory-ai.com">hory-ai   horysk</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>Link: </span><span class="post-copyright-info"><a href="https://www.hory-ai.com/2024/12/07/html/HTML%E8%A1%A8%E5%8D%95%E5%92%8C%E8%BE%93%E5%85%A5/">https://www.hory-ai.com/2024/12/07/html/HTML表单和输入/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>Copyright Notice: </span><span class="post-copyright-info">All articles on this blog are licensed under <a href="https://www.hory-ai.com/">hory-ai.com  horysk.com</a> unless otherwise stated.</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/code/">code</a><a class="post-meta__tags" href="/tags/html/">html</a></div><div class="post-share"><div class="social-share" data-image="https://www.hory-ai.com/img/favicon.ico" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><a class="pagination-related" href="/2024/12/07/html/HTML%E8%A1%A8%E6%A0%BC/" title="HTML表格"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info"><div class="info-1"><div class="info-item-1">Previous</div><div class="info-item-2">HTML表格</div></div><div class="info-2"><div class="info-item-1">HTML 表格 HTML 表格由  标签来定义。 HTML 表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行（由  标签定义），每行被分割为若干单元格（由  标签定义），表格可以包含标题行（）用于定义列的标题。 tr：tr 是 table row 的缩写，表示表格的一行。td：td 是 table data 的缩写，表示表格的数据单元格。th：th 是 table header的缩写，表示表格的表头单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。HTML 表格生成器：https://www.jyshare.com/front-end/7688/。以下是一个简单的 HTML 表格实例:实例                 列标题1       列标题2       列标题3                       行1，列1       行1，列2       行1，列3                 行2，列1       行2，列2       行2，列3           以上的表格实例代码中，...</div></div></div></a><a class="pagination-related" href="/2024/12/07/html/HTML%E8%84%9A%E6%9C%AC/" title="HTML脚本"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-right"><div class="info-1"><div class="info-item-1">Next</div><div class="info-item-2">HTML脚本</div></div><div class="info-2"><div class="info-item-1">HTML 脚本JavaScript 使 HTML 页面具有更强的动态和交互性。 在线实例 插入一段脚本如何将脚本插入 HTML 文档。使用   标签 如何应对不支持脚本或禁用脚本的浏览器。HTML  标签  标签用于定义客户端脚本，比如 JavaScript。  元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。 JavaScript 最常用于图片操作、表单验证以及内容动态更新。 下面的脚本会向浏览器输出"Hello World!"：  实例   document.write("Hello World!");   尝试一下 » Tip: 学习更多关于Javascript教程，请查看JavaScript 教程! HTML 标签 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示   元素中的内容： 实例  document.write("Hello World!")  抱歉，你的浏览器不支持...</div></div></div></a></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>Related Articles</span></div><div class="relatedPosts-list"><a class="pagination-related" href="/2024/12/07/html/HTML(5)%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/" title="HTML(5)代码规范"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2024-12-07</div><div class="info-item-2">HTML(5)代码规范</div></div><div class="info-2"><div class="info-item-1">HTML(5) 代码规范 HTML 代码约定很多 Web 开发人员对 HTML 的代码规范知之甚少。在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。而针对于 HTML5 ，我们应该形成比较好的代码规范，以下提供了几种规范的建议。 使用正确的文档类型文档类型声明位于HTML文档的第一行：   如果你想跟其他标签一样使用小写，可以使用以下代码：    使用小写元素名HTML5 元素名可以使用大写和小写字母。推荐使用小写字母： 混合了大小写的风格是非常糟糕的。开发人员通常使用小写 (类似 XHTML)。小写风格看起来更加清爽。小写字母容易编写。 不推荐:    这是一个段落。   非常糟糕:    这是一个段落。   推荐:    这是一个段落。   关闭所有 HTML 元素在 HTML5 中, 你不一定要关闭所有元素 (例如  元素)，但我们建议每个元素都要添加关闭标签。不推荐:   这是一个段落。  这是一个段落。   推荐:   这是一个段落。  这是一个段落。    关闭空的...</div></div></div></a><a class="pagination-related" href="/2024/12/07/html/HTML-XHTML/" title="HTML-XHTML"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2024-12-07</div><div class="info-item-2">HTML-XHTML</div></div><div class="info-2"><div class="info-item-1">HTML - XHTML XHTML 是以 XML 格式编写的 HTML。 什么是 XHTML? XHTML 指的是可扩展超文本标记语言XHTML 与 HTML 4.01 几乎是相同的XHTML 是更严格更纯净的 HTML 版本XHTML 是以 XML 应用的方式定义的 HTMLXHTML 是 2001 年 1 月发布的 W3C 推荐标准XHTML 得到所有主流浏览器的支持 为什么使用 XHTML?因特网上的很多页面包含了”糟糕”的 HTML。如果在浏览器中查看，下面的 HTML 代码运行起来非常正常（即使它并未遵守 HTML 规则）：    这是一个不规范的 HTML  不规范的 HTML 这是一个段落    XML 是一种必须正确标记且格式良好的标记语言。如果希望学习 XML，请阅读我们的 XML 教程。今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释”糟糕”的标记语言的资源和能力。所以 - 通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的...</div></div></div></a><a class="pagination-related" href="/2024/12/07/html/HTML5Audio(%E9%9F%B3%E9%A2%91)/" title="HTML5Audio(音频)"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2024-12-07</div><div class="info-item-2">HTML5Audio(音频)</div></div><div class="info-2"><div class="info-item-1">HTML5 Audio(音频) HTML5 提供了播放音频文件的标准。 互联网上的音频直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了在网页上嵌入音频元素的标准，即使用  元素。 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持  元素.注意: Internet Explorer 8 及更早IE版本不支持  元素. HTML5 Audio - 如何工作如需在 HTML5 中播放音频，你需要使用以下代码： 实例    您的浏览器不支持 audio 元素。   尝试一下  » control 属性供添加播放、暂停和音量控件。在 与  之间你需要插入浏览器不支持的元素的提示文本 。  元素允许使用多个  元素.  元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件 音频格式及浏览器支持目前, 元素支持三种音频格式文件: MP3, Wav, 和...</div></div></div></a><a class="pagination-related" href="/2024/12/07/html/HTML5Geolocation%EF%BC%88%E5%9C%B0%E7%90%86%E5%AE%9A%E4%BD%8D%EF%BC%89/" title="HTML5Geolocation（地理定位）"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2024-12-07</div><div class="info-item-2">HTML5Geolocation（地理定位）</div></div><div class="info-2"><div class="info-item-1">HTML5 Geolocation（地理定位） HTML5 Geolocation（地理定位）用于定位用户的位置。 定位用户的位置HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。 浏览器支持 Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）.注意: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。 HTML5 - 使用地理定位请使用 getCurrentPosition() 方法来获得用户的位置。下例是一个简单的地理定位实例，可返回用户位置的经度和纬度: 实例 var x=document.getElementById(“demo”);function getLocation(){if...</div></div></div></a><a class="pagination-related" href="/2024/12/07/html/HTML5Canvas/" title="HTML5Canvas"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2024-12-07</div><div class="info-item-2">HTML5Canvas</div></div><div class="info-2"><div class="info-item-1">HTML5 Canvas  标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。 你的浏览器不支持 HTML5 的  元素. 什么是 canvas? HTML5  元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 浏览器支持表格中的数字表示支持   元素的第一个浏览器版本号。 元素  4.0 9.0 2.0 3.1 9.0    创建一个画布（Canvas）一个画布在网页中是一个矩形框，通过  元素来绘制.注意: 默认情况下  元素没有边框和内容。简单实例如下:  注意: 标签通常需要指定一个id属性 (脚本中经常引用),width 和 height 属性定义的画布的大小.提示:你可以在HTML页面中使用多个   元素.使用 style 属性来添加边框: 实例  尝试一下 » 使用 JavaScript 来绘制图像canvas...</div></div></div></a><a class="pagination-related" href="/2024/12/07/html/HTML5SVG/" title="HTML5SVG"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2024-12-07</div><div class="info-item-2">HTML5SVG</div></div><div class="info-2"><div class="info-item-1">HTML5 SVG SVG 定义为可缩放矢量图形。HTML5 支持内联 SVG。HTML  元素是 SVG 图形的容器。SVG 有多种绘制路径、框、圆、文本和图形图像的方法。 SVG   Sorry, your browser does not support inline SVG. 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准 SVG优势与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像可通过文本编辑器来创建和修改SVG 图像可被搜索、索引、脚本化或压缩SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印SVG 可在图像质量不下降的情况下被放大 浏览器支持表格中的数字表示支持该元素的第一个浏览器版本号。 元素  4.0 9.0 3.0 3.2 10.1    把 SVG 直接嵌入 HTML 页面在 HTML5 中，您能够将...</div></div></div></a></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="avatar-img"><img src="https://www.hory-ai.com/img/favicon.ico" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info-name">hory-ai   horysk</div><div class="author-info-description"></div><div class="site-data"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">1585</div></a><a href="/tags/"><div class="headline">Tags</div><div class="length-num">30</div></a><a href="/categories/"><div class="headline">Categories</div><div class="length-num">30</div></a></div><a id="card-info-btn" href="https://www.hory-ai.com/"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>Announcement</span></div><div class="announcement_content">量子数字论坛！</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Posts</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2025/01/15/os/2025-01-15/%E5%B9%BF%E5%B7%9E%E8%AD%A6%E6%96%B9%E6%8F%AD%E6%96%B0%E5%9E%8B%E4%BF%A1%E7%94%A8%E5%8D%A1%E8%AF%88%E9%AA%97%E7%8A%AF%E7%BD%AA%E5%86%85%E5%B9%95%E8%8A%AF%E7%89%87%E4%BF%A1%E7%94%A8%E5%8D%A12%E5%88%8605%E7%A7%92%E5%8D%B3%E8%A2%AB%E5%A4%8D%E5%88%B6/" title="广州警方揭新型信用卡诈骗犯罪内幕芯片信用卡2分05秒即被复制">广州警方揭新型信用卡诈骗犯罪内幕芯片信用卡2分05秒即被复制</a><time datetime="2025-01-15T02:13:04.542Z" title="Created 2025-01-15 10:13:04">2025-01-15</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2025/01/15/os/2025-01-15/2025%E5%B9%B4%E6%88%91%E5%9B%BD%E5%B0%86%E5%88%9D%E6%AD%A5%E5%BB%BA%E6%88%90%E7%85%A4%E7%9F%BF%E6%99%BA%E8%83%BD%E5%8C%96%E6%A0%87%E5%87%86%E4%BD%93%E7%B3%BB/" title="2025年我国将初步建成煤矿智能化标准体系">2025年我国将初步建成煤矿智能化标准体系</a><time datetime="2025-01-15T02:12:50.434Z" title="Created 2025-01-15 10:12:50">2025-01-15</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2025/01/15/os/2025-01-15/%E6%88%91%E5%9B%BD%E5%B0%86%E6%89%93%E9%80%A0%E9%9F%A7%E6%80%A7%E5%9F%8E%E5%B8%82%E5%B8%82%E6%94%BF%E5%9F%BA%E7%A1%80%E8%AE%BE%E6%96%BD%E6%99%BA%E8%83%BD%E5%8C%96%E5%8F%91%E5%B1%95%E6%99%BA%E6%85%A7%E4%BD%8F%E5%8C%BA%E6%B7%B1%E5%85%A5%E6%8E%A8%E8%BF%9B5G%E8%BD%A6%E8%81%94%E7%BD%91/" title="我国将打造韧性城市市政基础设施智能化发展智慧住区深入推进5G车联网">我国将打造韧性城市市政基础设施智能化发展智慧住区深入推进5G车联网</a><time datetime="2025-01-15T02:11:11.587Z" title="Created 2025-01-15 10:11:11">2025-01-15</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2025/01/15/os/2025-01-15/%E4%B8%9C%E9%A3%8E%E8%94%9A%E6%9D%A5%E4%B8%8A%E6%B1%BD%E6%99%BA%E5%B7%B1%E5%B0%8F%E7%B1%B3%E7%AD%89%E5%8A%A0%E5%BF%AB%E6%8E%A8%E5%8A%A8%E4%BA%BA%E5%BD%A2%E6%9C%BA%E5%99%A8%E4%BA%BA%E5%9C%A8%E6%B1%BD%E8%BD%A6%E8%A1%8C%E4%B8%9A%E5%88%9B%E6%96%B0%E5%BA%94%E7%94%A8/" title="东风蔚来上汽智己小米等加快推动人形机器人在汽车行业创新应用">东风蔚来上汽智己小米等加快推动人形机器人在汽车行业创新应用</a><time datetime="2025-01-15T02:11:05.459Z" title="Created 2025-01-15 10:11:05">2025-01-15</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2025/01/15/os/2025-01-15/%E5%9B%9B%E9%83%A8%E9%97%A8%E6%8E%A2%E7%B4%A2%E4%BB%A5%E7%A4%BE%E4%BC%9A%E4%BF%9D%E9%9A%9C%E5%8D%A1%E4%B8%BA%E8%BD%BD%E4%BD%93%E5%BB%BA%E7%AB%8B%E5%B1%85%E6%B0%91%E6%9C%8D%E5%8A%A1%E4%B8%80%E5%8D%A1%E9%80%9A%E6%8E%A8%E8%BF%9B%E9%80%82%E8%80%81%E5%8A%A9%E6%AE%8B%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BE%E6%96%BD%E4%B8%8E%E5%85%AC%E5%85%B1%E6%9C%8D%E5%8A%A1%E6%95%B0%E5%AD%97%E5%8C%96%E6%94%B9%E9%80%A0/" title="四部门探索以社会保障卡为载体建立居民服务一卡通推进适老助残无障碍设施与公共服务数字化改造">四部门探索以社会保障卡为载体建立居民服务一卡通推进适老助残无障碍设施与公共服务数字化改造</a><time datetime="2025-01-15T02:09:15.785Z" title="Created 2025-01-15 10:09:15">2025-01-15</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">©2019 - 2025 By hory-ai   horysk</div><div class="framework-info"><span>Framework </span><a href="https://www.hory-ai.com">Hory-ai</a><span class="footer-separator">|</span><span>Theme </span><a target="_blank" rel="noopener" href="https://www.horysk.com">Horysk</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="Reading Mode"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="Toggle Between Light and Dark Mode"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="Toggle Between Single-column and Double-column"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="Settings"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="Back to Top"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>