zoralabFORM科技规范 - ZORALab赫斯提亚
当用着这份代码包时所需的科技规范。 随和、支持离线（通过PWA安装）和非常注重细节的。
创史来历
主要目的
这个软件包的出生主要是支持渲染表格界面元件。在网络界面世界里，这元件的成果如
下：
历史遗录
这个软件包在ZORALab赫斯提亚v1.2.0版本之前曾经被名为
form_hestiaUI。改名的目的是有人要横行强盗设计的版权和为了编程文件
编写能力而整理过。
软件包的设计
设计师
这个元件的设计是由以下的创造者所建设的：
(Holloway) 周健豪依赖其他元件
这个元件是需要以下的其他元件才能好好的运行 (排序从‘左上到右下’）：
zoralabCOREHTML
至于HTML，为了简单化和最大的兼容性整个用法，ZORALab赫斯提亚运用W3C的语法。我们 推荐您用以下的HTML代码来运用这个界面元件。
最小的HTML
在最小的HTML代码运用方法如下：
<form method='...' action='...'> <fieldset> <legend>类型标题</legend> <fieldset> <label>数据格1</label> <input ...> </fieldset> <fieldset> <label>数据格2</label> <input ...> </fieldset> ... </fieldset> ... </form>
响应性网格布局的HTML
响应性网格布局的HTML代码运用方法如下：
<form method='...' action='...'><div class='row'> <div class='column'><fieldset> <legend>类型标题</legend> <div class='row'> <div class='column'><fieldset> <label>数据格1</label> <input ...> </fieldset></div> <div class='column'><fieldset> <label>数据格2</label> <input ...> </fieldset></div> ... </div> </fieldset></div> ... </div></form>
禁用化数据格的HTML
禁用化数据格的HTML代码运用方法如下：
<input ... disabled /> <textarea ... disabled />...</textarea> <select ... disabled />...</select>
自动关注数据格的HTML
自动关注数据格的HTML代码运用方法如下：
<input ... autofocus /> <textarea ... autofocus />...</textarea> <select ... autofocus />...</select>
自动完整数据格的HTML
自动完整数据格的HTML代码运用方法如下：
<input ... autocomplete /> <textarea ... autocomplete />...</textarea>
范围限制数据格的HTML
范围限制数据格的HTML代码运用方法如下：
<input ... min='0' max='100' />
步进数据格的HTML
步进数据格的HTML代码运用方法如下：
<input ... step='0.05' />
占位符数据格的HTML
占位符数据格的HTML代码运用方法如下：
<input ... placeholder='...' /> <textarea ... placeholder='...'>...</textarea>
数据推荐数据格的HTML
数据推荐数据格的HTML代码运用方法如下：
<input ... list='...list-ID1...' /> <datalist id='...list-ID1...'> <option value='...' label='...' /> ... </datalist>
投格框数据格的HTML
投格框数据格的HTML代码运用方法如下：
<!-- 最少 --> <label> <input type='checkbox' name='...' /> <span>...</span> </label> <!-- 最少 （默认：已经投入） --> <label> <input type='checkbox' name='...' checked /> <span>...</span> </label> <!-- 全部性能 --> <label> <input type='checkbox' name='...' checked required disabled autofocus /> <span>...</span> </label>
颜色选择数据格的HTML
颜色选择数据格的HTML代码运用方法如下：
<!-- 最少 --> <input type='color' id='...INPUT_ID1...' name='...' /> <!-- 最少 （默认：数据） --> <input type='color' id='...INPUT_ID1...' name='...' value='#fefefe' /> <!-- 全部性能 --> <label for='...INPUT_ID1...'>...</label> <input type='color' id='...INPUT_ID1...' name='...' value='#fefefe' required disabled autofocus autocomplete list='...DATALIST_ID1...' /> <datalist id='...DATALIST_ID1...'> <option value='...'> ... </datalist>
成交数据格按钮的HTML
成交数据格按钮的HTML代码运用方法如下：
<!-- 最少 --> <input type="submit" name="..." value="Submit" /> <!-- 全部性能 --> <input type="submit" name="submit[type]" value="...一个可以查询的数据价值..." formaction="...覆盖表格原本的行动URL链接..." formtype="...覆盖表格原本的成交类型..." formmethod="...覆盖表格原本的方式 (e.g. GET|POST|dialog|...)" formnovalidate="true" formtarget="...一个IFRAME的ID..." disabled />
日期数据格的HTML
日期数据格的HTML代码运用方法如下：
<!-- 最少 --> <input type='date' id='...INPUT_ID1...' name='...' pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))$)' placeholder='YYYY-MM-DD' /> <!-- 最少 （默认：数据） --> <input type='date' id='...INPUT_ID1...' name='...' pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))$)' placeholder='YYYY-MM-DD' value='1985-06-11' /> <!-- 全部性能 --> <input type="date" id="..." name="..." value="2016-06-01" pattern="(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))$)" placeholder='YYYY-MM-DD' required disabled autofocus autocomplete readonly list="...DATALIST_ID1..." /> <datalist id='...DATALIST_ID1...'> <option value='...'> ... </datalist>
本地日期时间数据格的HTML
本地日期时间数据格的HTML代码运用方法如下：
<!-- 最少 --> <input type='datetime-local' id='...' name='...' pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))(T(?:([0-1][0-9]|2[0-3]))\:[0-5][0-9](\:[0-5][0-9])?(\+|\-)(?:([0-1][0-9]|2[0-3]))\:[0-5][0-9])?$)' placeholder='YYYY-MM-DDThh:mm:ss±hh:mm' /> <!-- 最少 （默认：数据） --> <input type='datetime-local' id='...' name='...' pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))(T(?:([0-1][0-9]|2[0-3]))\:[0-5][0-9](\:[0-5][0-9])?(\+|\-)(?:([0-1][0-9]|2[0-3]))\:[0-5][0-9])?$)' placeholder='YYYY-MM-DDThh:mm:ss±hh:mm' value='2016-06-01' /> <!-- 全部性能 --> <input type='datetime-local' id='...' name='...' value='2016-06-01' pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))(T(?:([0-1][0-9]|2[0-3]))\:[0-5][0-9](\:[0-5][0-9])?(\+|\-)(?:([0-1][0-9]|2[0-3]))\:[0-5][0-9])?$)' placeholder='YYYY-MM-DDThh:mm:ss±hh:mm' required disabled autofocus autocomplete readonly list='...DATALIST_ID1...' /> <datalist id='...DATALIST_ID1...'> <option value='...' label='...'> ... </datalist>
电邮数据格的HTML
电邮数据格的HTML代码运用方法如下：
<!-- 最少（接受：'[email protected]' 格式） --> <input type='email' id='...INPUT-ID1...' name='...' pattern='(?![_.-])((?![_.-][_.-])[a-z\d_.-]){0,63}[a-z\d]@((?!-)((?!--)[a-z\d-]){0,63}[a-z\d]\.){1,2}([a-z]{2,14}\.)?[a-z]{2,14}' placeholder='...' /> <!-- 最少（接受：'last.first+nickname@local' 格式） --> <input type='email' id='...INPUT-ID1...' name='...' pattern='^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$' placeholder='...' /> <!-- 最少（接受：域名锁定如[email protected]格式） --> <input type='email' id='...INPUT-ID1...' name='...' pattern='(?![_.-])((?![_.-][_.-])[a-z\d_.-]){0,63}[a-z\d]@zoralab.com' placeholder='...' /> <!-- 全部性能 --> <label for='...INPUT-ID1...'>...</label> <input type="email" id='...INPUT-ID1...' name='...' value='...' pattern='...' required disabled autofocus autocomplete readonly list='...DATALIST_ID1...' /> <datalist id='...DATALIST_ID1...'> <option value='...' label='...'> ... </datalist>
文件选择数据格的HTML
文件选择数据格的HTML代码运用方法如下：
<!-- 最少 --> <label> <input type='file' id='...INPUT-ID1...' name='...' accept='...' /> <span>...按钮标题...</span> </label> <!-- 最少（文件类型过滤格式如：所有图像、.m4a音像、.avi影像、.mkv影像和.mp4影像） --> <label> <input type='file' id='...INPUT-ID1...' name='...' accept='image/*,audio/mp4,.avi,.mkv,.mp4' /> <span>...按钮标题...</span> </label> <!-- 全部性能 --> <label> <input type='file' id='...INPUT-ID1...' name='...' accept='...' capture multiple required disabled autofocus autocomplete /> <span>...按钮标题...</span> </label>
月份数据格的HTML
月份数据格的HTML代码运用方法如下：
<!-- 最少 --> <input type='month' id='...' name='...' pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))$)' placeholder='YYYY-MM' /> <!-- 推荐 --> <!-- 别用。用日期数据格（date）代替。Firefox还没开源这个数据格。 <!-- 全部性能 --> <input type='month' id='...' name='...' value='...' pattern='(?:^\d*\-(?:(01|03|05|07|08|10|12)\-(?:(0[1-9]|[1-2][0-9]|3[0-1]))|(04|06|09|11)\-(?:(0[1-9]|[1-2][0-9]|30))|(02\-(?:(0[1-9]|[1-2][0-9]))))$)' placeholder='YYYY-MM-DD' required disabled autofocus autocomplete readonly list="...DATALIST-ID1..." /> <datalist id='...DATALIST_ID1...'> <option value='...' label='...'> ... </datalist>
号码数据格的HTML
号码数据格的HTML代码运用方法如下：
<!-- 最少 --> <input type='number' id='...INPUT-ID1...' name='...' /> <!-- 推荐（设置号码范围和步进数值） --> <input type='number' id='...INPUT-ID1...' name='...' min='0' max='100' step='0.01' /> <!-- 全部性能 --> <input type='number' id='...INPUT-ID1...' name='...' value='...' min='0' max='100' step='0.01' required disabled autofocus autocomplete readonly list="...DATALIST-ID1..." /> <datalist id='...DATALIST_ID1...'> <option value='...' label='...'> ... </datalist>
密码数据格的HTML
密码数据格的HTML代码运用方法如下：
<!-- 最少 (1个a-z、1个A-Z、1个0-9、1个象征符号和8-16字) -->
<input type='password'
id='...INPUT-ID1...'
name='...'
pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[\(!@#\$%\^&\*\)]).{8,16}'
/>
<!-- 推荐 (1个a-z、1个A-Z、1个0-9、1个象征符号和最少33字) -->
<!-- 原因: 要求用户运用密码银行如Bitwarden来建设安全的社区 -->
<input type='password'
id='...INPUT-ID1...'
name='...'
pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[\(!@#\$%\^&\*\)]).{33,}'
minlength='33'
placeholder='请在这儿填入密码'
/>
<!-- 全部性能 -->
<label for='...INPUT-ID1...'>...</label>
<input type='password'
id='...INPUT-ID1...'
name='...'
pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[\(!@#\$%\^&\*\)]).{33,}'
minlength='33'
maxlength='...'
placeholder='...'
required
disabled
autofocus
readonly
/>
多选择数据格的HTML
多选择数据格的HTML代码运用方法如下：
<!-- 最少 --> <label> <input type='radio' name='...DECISION_A...' value='...CHOICE_1...' /> <span>...字条内容...</span> </label> <!-- 最少（默认值：已选择了） --> <label> <input type='radio' name='...DECISION_A...' value='...CHOICE_2...' checked /> <span>...字条内容...</span> </label> <!-- 全部性能 --> <label> <input type='radio' id='...' name='...SAME NAME MEANS SAME GROUP OF CHOICES...' value='...CHOICE...' checked required disabled autofocus /> <span>...字条内容...</span> </label>
号码数据格的HTML
号码数据格的HTML代码运用方法如下：
<!-- 最少 --> <input type='number' id='...INPUT-ID1...' name='...' /> <!-- 推荐（设置号码范围和步进数值） --> <input type='number' id='...INPUT-ID1...' name='...' min='0' max='100' step='0.01' /> <!-- 全部性能 --> <input type='number' id='...INPUT-ID1...' name='...' value='...' min='0' max='100' step='0.01' required disabled autofocus autocomplete readonly list="...DATALIST-ID1..." /> <datalist id='...DATALIST_ID1...'> <option value='...' label='...'> ... </datalist>
字体数据格的HTML
字体数据格的HTML代码运用方法如下：
<!-- 最少 --> <input type='text' id='...' name='...' spellcheck /> <!-- 全部性能 --> <input type='text' id='...' name='...' value='...' pattern='...' minlength='...' maxlength='...' spellcheck placeholder='...' required autofocus autocomplete readonly list='...datalist-ID1...' /> <datalist id='...datalist-ID1...'> <option value='...' label='...' /> </datalist>
大量字体数据格的HTML
大量字体数据格的HTML代码运用方法如下：
<!-- 最少 --> <textarea id='...INPUT-ID1...' name='...' placeholder='...' rows='10' wrap='hard' spellcheck></textarea> <!-- 全部性能 --> <textarea id='...INPUT-ID1...' name='...' placeholder='...' cols='...' rows='...' wrap='hard' minlength='...' maxlength='...' spellcheck required disabled autofocus autocomplete readonly > ... </textarea>
时间数据格的HTML
时间数据格的HTML代码运用方法如下：
<!-- 最少 --> <input type='time' id='...INPUT-ID1...' name='...' /> <!-- 最少（设下范围） --> <input type='time' id='...INPUT-ID1...' name='...' min='05:00' max='23:00' /> <!-- 全部性能 --> <input type='time' id='...INPUT-ID1...' name='...' value='...' min='...' max='...' required disabled autofocus autocomplete readonly />
URL链接地址数据格的HTML
URL链接地址数据格的HTML代码运用方法如下：
<!-- 最少 --> <input type='url' id='...INPUT-ID1...' name='...' placeholder='...' pattern='...' /> <!-- 最少（HTTPS而已） --> <input type='url' id='...INPUT-ID1...' name='...' placeholder='...' pattern='(https)(:\/\/)([a-zA-Z]?)(([^.]+)\.)?([a-zA-z0-9\-_]+)(.*)?(\/[^\s]*)?' /> <!-- 最少（HTTP或HTTPS而已） --> <input type='url' id='...INPUT-ID1...' name='...' placeholder='...' pattern='(http(s?))(:\/\/)([a-zA-Z]?)(([^.]+)\.)?([a-zA-z0-9\-_]+)(.*)?(\/[^\s]*)?' /> <!-- 最少（TEL而已 - 'tel:+XXXX...'或'tel:00XXXX...'） --> <input type='url' id='...INPUT-ID1...' name='...' placeholder='...' pattern='(tel)(:\/\/)(\+?)([0-9\-_]+)' /> <!-- 最少（电邮而已 - 'mailto://[email protected]'或'mailto://xxx@local'） --> <input type='url' id='...INPUT-ID1...' name='...' placeholder='...' pattern='(mailto)(:\/\/)([a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+)@([a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*)' /> <!-- 全部性能 --> <input type='url' id='...INPUT-ID1...' name='...' pattern='...' placeholder='...' value='...' minlength='...' maxlength='...' spellcheck required disabled autofocus autocomplete readonly list='...datalist-ID1...' /> <datalist id='...datalist-ID1...'> <option value='...' label='...' /> </datalist>
周时数据格的HTML
周时数据格的HTML代码运用方法如下：
<!-- 最少 --> <input type='week' id='...' name='...' pattern='(?:^\d*\-W(?:([0-4][0-9])|5[0-2]))' placeholder='YYYY-Wnn' /> <!-- 推荐 --> <!-- 别用。用日期数据格（date）代替。Firefox还没开源这个数据格。 <!-- 全部性能 --> <input type='week' id='...' name='...' pattern='(?:^\d*\-W(?:([0-4][0-9])|5[0-2]))' placeholder='YYYY-Wnn' value='...' min='...' max='...' required disabled autofocus autocomplete readonly list='...datalist-ID1...' /> <datalist id='...datalist-ID1...'> <option value='...' label='...' /> ... </datalist>
CSS界面自选性
ZORALab赫斯提亚非常重用CSS变化值来装置这个界面元件并且还推出界面自选性功能。 以下是所有界面自选性CSS变化值任您发挥。
Margin
影响元件的外向边距空间。
变化值 : --form-margin CSS属性 : margin 默认数码 : 2rem auto (>= v1.2.0)
Padding
影响元件的内向边距空间。
变化值 : --form-padding CSS属性 : padding 默认数码 : .5rem (>= v1.2.0)
Toggle Spacing
影响元件切换之间的空间。
变化值 : --form-toggle-spacing CSS属性 : column-gap 默认数码 : 1rem (>= v1.2.0)
Min-Width
影响元件的最少宽度。
变化值 : --form-min-width CSS属性 : min-width 默认数码 : initial (>= v1.2.0)
Width
影响元件的宽度。
变化值 : --form-width CSS属性 : width 默认数码 : auto (>= v1.2.0)
Max-Width
影响元件的宽度。
变化值 : --form-max-width CSS属性 : max-width 默认数码 : 100% (>= v1.2.0)
Min-Height
影响元件的最少高度。
变化值 : --form-min-height CSS属性 : min-hieght 默认数码 : initial (>= v1.2.0)
Height
影响元件的高度。
变化值 : --form-height CSS属性 : height 默认数码 : auto (>= v1.2.0)
Max-Height
影响元件的最大高度。
变化值 : --form-max-height CSS属性 : max-height 默认数码 : initial (>= v1.2.0)
Color
影响元件的颜色。
变化值 : --form-color CSS属性 : color 默认数码 : var(--body-color) (>= v1.2.0)
Color（反转环境）
影响元件在反转环境里的颜色。
变化值 : --form-color-inverted CSS属性 : color 默认数码 : var(--body-color-inverted) (>= v1.2.0)
Color（主要）
影响元件的主要颜色。
变化值 : --form-color-primary CSS属性 : color 默认数码 : var(--color-primary-400) (>= v1.2.0)
Color（主要+反转环境）
影响元件在反转环境里的主要颜色。
变化值 : --form-color-primary-inverted CSS属性 : color 默认数码 : var(--color-primary-300) (>= v1.2.0)
Color（对的数据）
影响元件确对的数据情况里的颜色。
变化值 : --form-color-valid CSS属性 : color 默认数码 : var(--body-color-indicator-green) (>= v1.2.0)
Color（错误数据）
影响元件错误数据的颜色。
变化值 : --form-color-invalid CSS属性 : color 默认数码 : var(--body-color-indicator-red) (>= v1.2.0)
Color（被关注）
影响元件在被关注时的颜色。
变化值 : --form-color-focus CSS属性 : color 默认数码 : var(--color-primary-400) (>= v1.2.0)
Color（印刷）
影响元件在印刷中的颜色。
变化值 : --form-color-print CSS属性 : color 默认数码 : var(--body-color-print) (>= v1.2.0)
Background
影响元件的背景。
变化值 : --form-background CSS属性 : background 默认数码 : transparent (>= v1.2.0)
Background（反转环境）
影响元件在反转环境里的背景。
变化值 : --form-background-inverted CSS属性 : background 默认数码 : transparent (>= v1.2.0)
Background（对的数据）
影响元件确对的数据情况里的背景。
变化值 : --form-background-valid CSS属性 : background 默认数码 : var(--body-background-indicator-green) (>= v1.2.0)
Background（错误数据）
影响元件错误数据的背景。
变化值 : --form-background-invalid CSS属性 : background 默认数码 : var(--body-background-indicator-red) (>= v1.2.0)
Background（被关注）
影响元件在被关注时的背景。
变化值 : --form-background-focus CSS属性 : background 默认数码 : var(--body-background-indicator-yellow) (>= v1.2.0)
Background（印刷）
影响元件在印刷中的背景。
变化值 : --form-background-print CSS属性 : background 默认数码 : transparent (>= v1.2.0)
Box Shadow
影响元件的影子。
变化值 : --form-box-shadow CSS属性 : box-shadow 默认数码 : 0 .5rem 1rem var(--form-color) (>= v1.2.0)
Box Shadow（反转环境）
影响元件在反转环境里的影子。
变化值 : --form-box-shadow-inverted CSS属性 : box-shadow 默认数码 : 0 .5rem 1rem var(--form-color-inverted) (>= v1.2.0)
Timing
影响元件的动画定时。
变化值 : --form-timing CSS属性 : transition 默认数码 : var(--timing-normal) (>= v1.2.0)
Margin（数码格套装）
影响元件数码格套装的外向边距空间。
变化值 : --form-fieldset-margin CSS属性 : margin 默认数码 : 1rem (>= v1.2.0)
Padding（数码格套装）
影响元件数码格套装的内向边距空间。
变化值 : --form-fieldset-padding CSS属性 : padding 默认数码 : 0 (>= v1.2.0)
Min-Width（数码格套装）
影响元件数码格套装的最少宽度。
变化值 : --form-fieldset-min-width CSS属性 : min-width 默认数码 : initial (>= v1.2.0)
Width（数码格套装）
影响元件数码格套装的宽度。
变化值 : --form-fieldset-width CSS属性 : width 默认数码 : auto (>= v1.2.0)
Max-Width（数码格套装）
影响元件数码格套装的宽度。
变化值 : --form-fieldset-max-width CSS属性 : max-width 默认数码 : 100% (>= v1.2.0)
Min-Height（数码格套装）
影响元件数码格套装的最少高度。
变化值 : --form-fieldset-min-height CSS属性 : min-hieght 默认数码 : initial (>= v1.2.0)
Height（数码格套装）
影响元件数码格套装的高度。
变化值 : --form-fieldset-height CSS属性 : height 默认数码 : auto (>= v1.2.0)
Max-Height（数码格套装）
影响元件数码格套装的最大高度。
变化值 : --form-fieldset-max-height CSS属性 : max-height 默认数码 : initial (>= v1.2.0)
Border（数码格套装）
影响元件数码格套装的边界线。
变化值 : --form-fieldset-border CSS属性 : border 默认数码 : none (>= v1.2.0)
Border Radius（数码格套装）
影响元件数码格套装边界线的角落圆形度。
变化值 : --form-fieldset-border-radius CSS属性 : border-radius 默认数码 : .5rem (>= v1.2.0)
Margin（数码格套装标题）
影响元件数码格套装标题的外向边距空间。
变化值 : --form-fieldset-legend-margin CSS属性 : margin 默认数码 : 2rem (>= v1.2.0)
Font Size（数码格套装标题）
影响元件数码格套装标题的字体大小。
变化值 : --form-fieldset-legend-font-size CSS属性 : font-size 默认数码 : 2rem (>= v1.2.0)
Font Weight（数码格套装标题）
影响元件数码格套装标题的字体厚度。
变化值 : ---font-fieldset-legend-font-weight CSS属性 : font-family 默认数码 : 700 (>= v1.2.0)
Text Transformation（数码格套装标题）
影响元件数码格套装标题的字体装饰。
变化值 : --form-fieldset-legend-text-transform CSS属性 : text-transform 默认数码 : uppercase (>= v1.2.0)
Text Align（数码格套装标题）
影响元件数码格套装标题的字体对齐方式。
变化值 : --form-fieldset-legend-text-align CSS属性 : text-align 默认数码 : left (>= v1.2.0)
Display（纸条）
影响元件字条的显示模式。
变化值 : --form-label-display CSS属性 : display 默认数码 : block (>= v1.2.0)
Min-Width（字条）
影响元件字条的最少宽度。
变化值 : --form-label-min-width CSS属性 : min-width 默认数码 : 5rem (>= v1.2.0)
Width（字条）
影响元件字条的宽度。
变化值 : --form-label-width CSS属性 : width 默认数码 : 100% (>= v1.2.0)
Max-Width（字条）
影响元件字条的宽度。
变化值 : --form-label-max-width CSS属性 : max-width 默认数码 : 100% (>= v1.2.0)
Min-Height（字条）
影响元件字条的最少高度。
变化值 : --form-label-min-height CSS属性 : min-hieght 默认数码 : initial (>= v1.2.0)
Height（字条）
影响元件字条的高度。
变化值 : --form-label-height CSS属性 : height 默认数码 : max-content (>= v1.2.0)
Max-Height（字条）
影响元件字条的最大高度。
变化值 : --form-label-max-height CSS属性 : max-height 默认数码 : initial (>= v1.2.0)
Margin （字条）
影响元件字条的外向边距空间。
变化值 : --form-label-margin CSS属性 : margin 默认数码 : 0 auto (>= v1.2.0)
Padding （字条）
影响元件字条的内向边距空间。
变化值 : --form-label-padding CSS属性 : padding 默认数码 : 0 (>= v1.2.0)
Font Size（字条）
影响元件字条的字体大小。
变化值 : --form-label-font-size CSS属性 : font-size 默认数码 : 1.6rem (>= v1.2.0)
Font Style（字条）
影响元件字条的字体风格。
变化值 : --form-label-font-style CSS属性 : font-style 默认数码 : normal (>= v1.2.0)
Font Weight（字条）
影响元件字条的字体厚度。
变化值 : ---form-label-font-weight CSS属性 : font-weight 默认数码 : 700 (>= v1.2.0)
Text Transformation（字条）
影响元件字条的字体装饰。
变化值 : --form-label-text-transform CSS属性 : text-transform 默认数码 : titlecase (>= v1.2.0)
Text Align（字条）
影响元件字条的字体对齐方式。
变化值 : --form-label-text-align CSS属性 : text-align 默认数码 : left (>= v1.2.0)
Display（数据格）
影响元件数据格的显示模式。
变化值 : --form-field-display CSS属性 : display 默认数码 : block (>= v1.2.0)
Opacity（数据格）
影响元件数据格的透明度。
变化值 : --form-field-opacity CSS属性 : opacity 默认数码 : 1 (>= v1.2.0)
Opacity（数据格+被禁用）
影响元件数据格在被禁用时的透明度。
变化值 : --form-field-opacity-disabled CSS属性 : opacity 默认数码 : .3 (>= v1.2.0)
Margin（数据格）
影响元件数据格的外向边距空间。
变化值 : --form-field-margin CSS属性 : margin 默认数码 : 0 auto (>= v1.2.0)
Padding（数据格）
影响元件的内向边距空间。
变化值 : --form-field-padding CSS属性 : padding 默认数码 : 1rem (>= v1.2.0)
Min-Width（数据格）
影响元件数据格的最少宽度。
变化值 : --form-field-min-width CSS属性 : min-width 默认数码 : 5rem (>= v1.2.0)
Width（数据格）
影响元件数据格的宽度。
变化值 : --form-field-width CSS属性 : width 默认数码 : 100% (>= v1.2.0)
Max-Width（数据格）
影响元件数据格的宽度。
变化值 : --form-field-max-width CSS属性 : max-width 默认数码 : 100% (>= v1.2.0)
Min-Height（数据格）
影响元件数据格的最少高度。
变化值 : --form-field-min-height CSS属性 : min-hieght 默认数码 : initial (>= v1.2.0)
Height（数据格）
影响元件数据格的高度。
变化值 : --form-field-height CSS属性 : height 默认数码 : initial (>= v1.2.0)
Max-Height（数据格）
影响元件数据格的最大高度。
变化值 : --form-field-max-height CSS属性 : max-height 默认数码 : initial (>= v1.2.0)
Border（数码格）
影响元件数码格的边界线。
变化值 : --form-field-border CSS属性 : border 默认数码 : 2px solid currentColor (>= v1.2.0)
Border Radius（数码格）
影响元件数码格边界线的角落圆形度。
变化值 : --form-field-border-radius CSS属性 : border-radius 默认数码 : .2rem (>= v1.2.0)
Font Family（数据格）
影响元件数据格的字体系列。
变化值 : --form-field-font-family CSS属性 : font-family 默认数码 : var(--body-font-family) (>= v1.2.0)
Font Size（数据格）
影响元件数据格的字体大小。
变化值 : --form-field-font-size CSS属性 : font-size 默认数码 : var(--body-font-size) (>= v1.2.0)
Font Style（数据格）
影响元件数据格的字体风格。
变化值 : --form-field-font-style CSS属性 : font-style 默认数码 : normal (>= v1.2.0)
Font Style（数据格+占位符）
影响元件数据格占位符的字体风格。
变化值 : --form-field-placeholder-font-style CSS属性 : font-style 默认数码 : italic (>= v1.2.0)
Font Weight（数据格)
影响元件数据格的字体厚度。
变化值 : ---form-field-font-weight CSS属性 : font-family 默认数码 : initial (>= v1.2.0)
Text Transformation（数据格）
影响元件数据格的字体装饰。
变化值 : --form-field-text-transform CSS属性 : text-transform 默认数码 : initial (>= v1.2.0)
Text Align（数据格）
影响元件数据格的字体对齐方式。
变化值 : --form-field-text-align CSS属性 : text-align 默认数码 : left (>= v1.2.0)
Margin（选择组合）
影响元件选择组合的外向边距空间。
变化值 : --form-optgroup-margin CSS属性 : margin 默认数码 : 2rem 1rem 0 (>= v1.2.0)
Padding（选择组合）
影响元件选择组合的内向边距空间。
变化值 : --form-optgroup-padding CSS属性 : padding 默认数码 : 0 (>= v1.2.0)
Font Style（选择组合）
影响元件选择组合的字体风格。
变化值 : --form-optgroup-font-style CSS属性 : font-style 默认数码 : italic (>= v1.2.0)
Text Align（选择组合）
影响元件选择组合的字体对齐方式。
变化值 : --form-optgroup-text-align CSS属性 : text-align 默认数码 : left (>= v1.2.0)
Padding（选择格）
影响元件选择格的内向边距空间。
变化值 : --form-option-padding CSS属性 : padding 默认数码 : 0 0 0 1.5rem (>= v1.2.0)
Font Style（选择格）
影响元件选择格的字体风格。
变化值 : --form-option-font-style CSS属性 : font-style 默认数码 : normal (>= v1.2.0)
Text Align（选择格）
影响元件选择格的字体对齐方式。
变化值 : --form-option-text-align CSS属性 : text-align 默认数码 : left (>= v1.2.0)
Padding（颜色选择格）
影响元件颜色选择格的内向边距空间。
变化值 : --form-color-picker-padding CSS属性 : padding 默认数码 : 0 (>= v1.2.0)
Width（颜色选择格）
影响元件颜色选择格的宽度。
变化值 : --form-color-picker-width CSS属性 : width 默认数码 : 100% (>= v1.2.0)
Height（颜色选择格）
影响元件颜色选择格的高度。
变化值 : --form-color-picker-height CSS属性 : height 默认数码 : 5rem (>= v1.2.0)
Margin（开关格）
影响元件开关格的外向边距空间。
变化值 : --form-switchbox-margin CSS属性 : margin 默认数码 : 1rem 0 (>= v1.2.0)
Width（开关格切换扭）
影响元件开关格切换扭的宽度。
变化值 : --form-switchbox-toggle-width CSS属性 : width 默认数码 : 70px (>= v1.2.0)
Background（开关格关闭模式）
影响元件开关格关闭模式的背景。
变化值 : --form-switchbox-background-off CSS属性 : background 默认数码 : #a8a8a8 (>= v1.2.0)
Background（开关格开着模式）
影响元件开关格开着模式的背景。
变化值 : --form-switchbox-background-on CSS属性 : background 默认数码 : var(--form-color-valid) (>= v1.2.0)
Timing（开关格）
影响元件开关格的动画定时。
变化值 : --form-switchbox-timing CSS属性 : transition 默认数码 : var(--timing-normal) (>= v1.2.0)
Width（多选择格切换扭）
影响元件多选择格切换扭的宽度。
变化值 : --form-radio-toggle-width CSS属性 : width 默认数码 : 30px (>= v1.2.0)
Timing（多选择格）
影响元件多选择格的动画定时。
变化值 : --form-radio-timing CSS属性 : transition 默认数码 : var(--timing-normal) (>= v1.2.0)
Display（按钮）
影响元件按钮的显示模式。
变化值 : --form-button-display CSS属性 : display 默认数码 : inline-block (>= v1.2.0)
Margin（按钮）
影响元件按钮的外向边距空间。
变化值 : --form-button-margin CSS属性 : margin 默认数码 : .5rem 1.2rem (>= v1.2.0)
Padding（按钮）
影响元件按钮的内向边距空间。
变化值 : --form-button-padding CSS属性 : padding 默认数码 : 1.3rem (>= v1.2.0)
Width（按钮）
影响元件按钮的宽度。
变化值 : --form-button-width CSS属性 : width 默认数码 : 100% (>= v1.2.0)
Border（按钮）
影响元件按钮的边界线。
变化值 : --form-button-border CSS属性 : border 默认数码 : 2px solid currentColor (>= v1.2.0)
Border Radius（按钮）
影响元件按钮边界线的角落圆形度。
变化值 : --form-button-border-radius CSS属性 : border-radius 默认数码 : .5rem (>= v1.2.0)
Font Weight（按钮）
影响元件按钮的字体厚度。
变化值 : ---font-button-font-weight CSS属性 : font-family 默认数码 : 700 (>= v1.2.0)
Text Transformation（按钮）
影响元件按钮的字体装饰。
变化值 : --form-button-text-transform CSS属性 : text-transform 默认数码 : uppercase (>= v1.2.0)
Text Align（按钮）
影响元件按钮的字体对齐方式。
变化值 : --form-button-text-align CSS属性 : text-align 默认数码 : center (>= v1.2.0)
Timing（按钮）
影响元件按钮的动画定时。
变化值 : --form-button-timing CSS属性 : transition 默认数码 : var(--timing-rapid) (>= v1.2.0)
JavaScript
庆幸的是这个元件没有运用到任何JavaScript。放心吧！
固定值
这个代码包没有提供任何固定值。
变化值
这个代码包没有提供任何变化值。
提供的功能
ToCSS
渲染呈现CSS的输出数据。
Hugo
用法：
{{- $ret := partial "hestiaGUI/zoralabFORM/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>
数码构架
这个代码包没有提供任何数码构架。
终结
我们已经抵达终结段落了。如有询问，您是可以通过以下管道来联系我们吧：
GitHub论坛