HTML5 Form - yexingxia/webfont GitHub Wiki

教程
兼容性

不如js的地方： 需要等到表单提交时才能进行校验，并且只显示第一个错误信息

属性

placeholder属性

没有值时显示，一旦有值就隐藏，适用于input(text, search, url, tel, email, password and number)、textarea

  • IE<10不支持
  • Safari<4 & Opera<11.5对textarea不支持
  • 可以自定义样式，写法如下：
::-webkit-input-placeholder,
:-moz-placeholder  /* Firefox 18- */,
::-moz-placeholder   /* Firefox 19+ */,
:-ms-input-placeholder {  
   font-style:italic;        
   color: red;
   background-color: yellow;
}

autofocus属性

第一个有autofocus属性的input/textarea会获得焦点（safari除外，它是最后一个）

  • IE<10 & iOS Safari不支持
  • 检测是否支持
"autofocus" in document.createElement("input")

注意:

  • 会导致页面滚动到autofocus的控件，使用时要明确控件位置
  • 如果要用到fallback，确保尽快触发（DOM ready优于window.load），否则太慢会出现用户已经在页面做交互，而又被强行带离了原本位置

maxlength属性

不允许用户输入超过指定数量的字符，粘贴超长会直接截断，适用于input(text, email, url, search, tel and password)、textarea

  • IE<9和低版本FF不支持textarea
  • 不影响placeholder的长度
  • 如果预设的值超长了，会显示全，但是提交时会提示验证失败

min/max/step属性

设置最小、最大范围以及增减步长，超出不允许输入，适用于input(number, range, date/time)

  • 彼此可以独立使用
  • min和max本身也是一种校验
  • step默认是1，也可以支持float值（step="any") 见Opera
  • 如果没有设置value，range默认取min和max的中间值，number默认取0
  • IE10, IE11, Android和iOS虽然没有GUI界面，但是仍然有校验功能

list属性 & datelist

text, url, date/time.etc IE<10、Safari、iOS、Android不支持 range IE<10、Safari、FF、iOS、Android不支持 color IE<10、Safari、FF、IE、iOS、Android不支持

  • 在input上指定list={datelist id}，达到类似select和suggest的效果，并且根据输入自动缩小范围（Chrome, Opera and IE - 以输入开头, Firefox - 包含输入）
  • 特殊：range、color、date/time
  • 不支持fallback：隐藏

autocomplete属性

自动补全，适用于date, text, search, url, tel, email, password, number, range and color（不明所以）

  • IE<11 & Android不支持
  • 取值："on"(default)/"off"
  • 一般都是设置成off，避免安全问题

accept属性

限制file input可以选择的文件类型

  • 取值：audio/* , video/* , image/* , 其它有效的MIME类型
  • IE<10 & Android & iOS<7不支持
  • Android会让用户选择上传哪里的文件，如camera, microphone, gallery, file structure或其它, 忽略accept属性值. 其它浏览器可以通过如下代码达到同样效果:
<input type="file" accept="audio/*;capture=microphone">
<input type="file" accept="image/*;capture=camera">
<input type="file" accept="video/*;capture=camcorder">

multiple属性

可以填多个值，适用于input(file, email)

  • IE<10 & iOS<7不支持
  • email类型的值要用逗号分隔

required属性

非空限制，适用于text, search, url, tel, radio, checkbox, email, password, number, file, and the date/time（range和color本身有默认值，所以有没有都一样）此处和上面number默认取0似乎矛盾了

  • IE<10 & Safari & iOS Safari & Opera Mini & Android Browser<4.4不支持
  • 必须要有name属性？
  • 支持:required自定义样式
？没生效
:required:after{
    content: "*";
    color: #f00;
}

http://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable

pattern属性

给输入值提供正则校验，适用于input(text, search, url, tel, email, password)

  • IE<10 & Safari & iOS & Android不支持
  • 取值：正则表达式，必须完全匹配整个值（multiple的情况需要注意），默认前后有^和$
  • 使用title属性来提示用户合法的格式，会出现在提示错误的气泡中
  • 有用的正则

formnovalidate属性

避免表单验证，适用于input(submit, image)和button

  • IE<10 & Safari & iOS & Android不支持
  • 主要用于当表单需要保存但不需要验证时

formaction属性

为表单指定多种action，适用于input(submit, image)和button

  • IE<10不支持
  • 会覆盖form上的action属性

formmethod属性

为表单指定多种提交方式，适用于input(submit, image)和button

  • IE<10不支持
  • 取值："get", "post"
  • 会覆盖form上的method属性

formtarget属性

为表单指定多种响应提交的context，适用于input(submit, image)和button

  • IE<10不支持
  • 取值："_blank", "_self", "_parent", "_top"
  • 会覆盖form上的target属性

formenctype属性

为表单指定多种提交数据的编码方式，适用于input(submit, image)和button

  • IE<10不支持
  • 取值： "application/x-www-form-urlencoded"(default) - special chars in the URL to ASCII HEX values and spaces to '+' "multipart/form-data" - no encoding "text/plain" - spaces to +
  • 会覆盖form上的enctype属性

###spellcheck属性 看不出效果？

标签

email/address/tel

###search 搜索

<input id="search1" type="search" list="suggest">
<datalist id="suggest" class="hide">
    <option value="afengzai1">afengzai1</option>
    <option value="fengzai2">fengzai2</option>
    <option value="fengzai3">fengzai3</option>
</datalist>
  • 输入值后右边会有个x
  • results属性，加上这个属性，左侧会出现一个放大镜图标，（不论值是多少）
  • autosave属性

number/range

  • Chrome & Opera & Safari能显示特型，但只有Opera能显示值
  • range可以垂直，如下
<input type="range" name="grade" orient="vertical"
  style="width: 20px; height: 200px;
  -webkit-appearance: slider-vertical;
  writing-mode: bt-lr;">

color

取色

  • IE & iOS不支持
  • 取值：只支持6位十六进制的格式，默认值是#000000

output

实时显示所选值

  • IE<10不支持
<form oninput="output.value = (val1.valueAsNumber || 0) * (val2.valueAsNumber || 0)" id=foo>
  <input type=number name=val1> X 
  <input type=number name=val2> =
  <output name=output for="val1 val2" form=foo>0</output>
</form>
  • for属性：要加入计算的标签的id列表，多个用空格分隔

date/month/week/datetime/datetime_local/time

  • Chrome & Opera能显示日历

meter

量表

  • IE & iOS不支持
  • value属性（必填） - 当前有多大，取值范围min ~ max，超出范围的取两侧边界中更相近的那个，没有值则0或min
  • min属性 - 最小值，默认是0
  • max属性 - 最大值，默认是1
  • low属性 - 低临界点，min ~ low 黄色
  • high属性 - 高临界点，low ~ high 绿色； high ~ max 红色
  • optimum属性 - 适宜临界点 没有样式
  • 可以调整宽高

progress

进度条

  • IE<10 & iOS<7不支持
  • max属性 - 总共多大
  • value属性 - 当前有多大，取值范围0 ~ max，没有值则显示一直在动的动画效果（IE动画与其它不同）
  • position属性 - 当前百分比，0.0 ~ 1.0之间的float数
  • 可以调整宽

validate

  • 默认：根据type校验

novalidate属性

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️