html5表单在页面位置,表单页面

写在前面

对表单页面的样式要求，可能并不能100%的适用于所有的表单页面，毕竟表单页面“千奇百怪”，很难做到包治百病，但我们尽量做到用适用于大多数表单。

这个表单页面样式规范，也并不也是强制的，或者说绝大多数不是。平台仍然允许不太标准的表单存在，只是你需要比遵循规范的表单页面写更多的代码而已。

基本布局

遵循Boostrap的水平排列(.form-horizontal)和内敛(.form-inline)两种表单布局。推荐采用水平排列布局。

特别注意：请务必遵守BS的表单原则，如使用.form-control和输入框组等，否则可能会造成某些平台样式在套用时出现诡异的现象。

样式规范

提示文字

提示文字指对输入限制的说明性文字，非校验错误提示信息。对一般性的、内容不算太多的提示文字，建议采用的placeholder属性设置。

对内容较多或不适合placeholder的(如radio/checkbox等)的提示文字，暂无合适的处理方式，请在遇到时提出。

上传文件

通常情况下，文件上传组件的样式会是这样的

除了样式，还包括：点击文本框或浏览按钮后，弹出文件选择框

选择文件后，文件名自动更新到文本框中

这需要你稍稍规范一下组件的结构，如下

浏览

注意：div.input-group上的.file样式很重要，它是样式规范和辅助脚本的开关

:submit按钮并不是必须的，如果你的表单中只有文件选择框一个输入组件，那么我们建议你这样使用

div.input-group-btn上可以增加集中额外的样式，以使得按钮的宽度适用于不同的场景：

不添加额外样式 按钮为标准宽度

.input-group-btn-wide 按钮宽度翻倍

.input-group-btn-xw 按钮宽度是wide的2倍

.input-group-btn-xxw 按钮宽度是wide的3倍

关于HTML5支持的accept属性

HTML5标准中，支持了accept属性，用于限制打开文件对话框时，可以选择的文件类型。

但是，在一些浏览器里，如果设置了不合适的accept属性值，将会带来很严重的性能问题，会导致点击后需要等待5-6秒，甚至更长时间才会显示文件对话框。因此在这里，特对此属性进行一定的规范：不要使用*号，这是造成性能问题的罪魁祸首，一定不能使用如image/*等的属性值

书写完整的MIME类型，不知道有哪些？去看看Tomcat/conf/web.xml -> ->

如果是非标准文件，再考虑使用.ext的形式，如上传授权文件accept=".key"

就目前掌握的情况，webkit内核对某些accept属性值的支持可能有bug，仍然会造成弹出文件对话框非常慢，比如：application/x-zip等，因此，请使用时务必进行验证，如遇响应性能问题，先采取兼容性回退优先策略，去掉accept属性。

不论是否使用accept属性，都只是对文件对话框的过滤设置，并不会真正阻止非限定类型的文件被上传到服务器，因此，服务器端的文件类型校验必不可少！

组件

必填项

必填项不需添加额外的DOM元素，直接在上添加样式名称control-required，即

名称

想了解这是怎么实现的？其实很简单，我们不过是玩了个CSS的::after伪对象把戏。

校验样式

校验反馈

所谓校验反馈，是指无论校验结果与否，都会在输入组件后显示结果。不同于校验错误提示信息，校验反馈：无论校验对错，均会显示

以图标形式标示校验的结果

虽然缺省是打开的，但是是可选的

校验反馈通常以这样的形式出现

父容器

为了定位方便，缺省情况下，会自动定位到input.form-control，并找到其父对象，append为最后一个子元素，即通常看起来是这样的：

名称

如果你觉得这个插入位置不好，或者这个插入位置会影响你的样式或功能，则可以自己指定，只需要在希望插入的位置的父容器上添加.has-feedback样式即可

名称

则，显示校验反馈后会是这样的结构

名称

通常，如果你指定了父容器，那么多半会需要自己设置一下校验反馈的位置才能让它看起来更和谐，详见下一节。

位置定制

位置的定制支持手工设置校验反馈距离最近的非{position:static}父容器的距离，通常会是.input-group或.form-group。设置通过的HTML5 data-feedback-position-xxx设置，其中xxx可以为：left - 距离左边界距离，单位长度，缺省为px

right - 距离右边界距离，单位长度，缺省为px

top - 距离上边界距离，单位长度，缺省为px

right - 距离下边界距离，单位长度，缺省为px

举个例子

这里将校验反馈的右边界位置设置为20px。缺省情况下，校验反馈定位是垂直居中且距离右边界15px。

不显示

由于Bootstrap的限制，校验反馈仅支持.form-control对象才会默认显示。

有些情况下，可能你并希望显示校验反馈，这时只需要添加.no-feedback样式即可，添加的位置可以是：发生校验的对象

的父对象

一组父对象(父对象内的所有都将不显示)

对象(表单内的所有都不显示)

这个位置看起来很复杂，其实逻辑很简单，从发生校验的开始向上查找DOM树，直到

位置，这其中只要有任何一个对象含有.no-feedback，则该就不会显示校验反馈。

以下代码中的三处.no-feedback作用相同，只要任意添加一个都可以是#input-name不显示校验反馈。

名称