HTML5中的智能表单

关注

原创最新推荐文章于 2026-05-17 08:49:38 发布 2.7k 阅读 AI 写同款· GEO 优化 ›

表单智能填充，数据复制到文本域，智能填充到表单，html表单提交 html，表单自动填充，避免重复性工作，一个一个填写，复制粘贴到文本域，自动识别对应表单属性，复制之后自动识别，点击提交就行了。超级简单，有什么不懂的可以直接私信问我。立即下载

新增类型

在html5中给表单新添加了一些类型 ,大致可以分为以下几种：

数字类型

跟数字强相关的类型，其中number、range在移动端开发时，会弹出数字键盘，而range是一个范围滑动块。

<input type='number'> <!--用于比较精确的纯数字输入类型-->
<input type='range'> <!--用于不是很精确的数字范围-->
<input type='tel'> <!--用于电话号码-->

日期和时间类型

web表单常见的字段就是日期和时间，html5以此来收集这类信息

<input type='time'>
<input type='date'>
<input type='month'>
<input type='week'>
<input type='datetime'>
<input type='datetime-local'>

其他类型：email、url、color、search
- 其中一些类型在不同的设备上都会有不同的显示。
```
<input type='email'>
<input type='url'>
<input type='color'>
<input type='search'>
```
- 如果我们只需要其语义，而不用其样式，那么我们可以用css来给它做兼容。如下，我们用search来举例。css结构：
```
input[type=search]{
    -webkit-appearance:none;
}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button {
    display:none;
}
```
- 最后这些新的类型，比如number，url，email等类型，会在表单提交的时候校验格式，如果格式不对的话，会阻止表单的提交。

新增属性

html5中新增了一些属性，可以让表单制作更轻松

placeholder 占位符文本，以前我们用js来模拟，获得焦点的时候，文本消失，失去焦点并且内容为空时，文本重现，现在html5自带了这一项功能。
- html结构：
```
<input id='search' type='text' placeholder='search your goods'>
```
- 如果想要修改placeholder中的文本样式，那么我们只要给浏览器设置一些样式即可，css结构：
```
::-webkit-input-placeholder{
      color:red;
      font-size:14px;
}
::-moz-placeholder{
      color:red;
      font-size:14px;
}
```
- 注意上面两个样式要分开写，才会有效，不能用逗号合并写成一个。
- 我们不用placeholder，我们用js来实现上述功能：
```
<input id='myInput' type='text' value='请输入...'>
<script>
    var input = document.getElementById('myInput');
    input.onfocus = function() {
      this.value=this.value.replace(/^\s+|\s+$/g,'');
      if(this.value=='请输入...'){
        this.value = '';
      }
    }
    input.onblur = function() {
      this.value=this.value.replace(/^\s+|\s+$/g,'')
      if(!this.value){
        this.value = '请输入...'
      }
    }
</script>
```
- 上面有个小bug，如果用户输入了 ‘请输入…’这三个字符 ,那么在失去焦点时也会变成空，不过这个不影响使用,也几乎没有用户会这样做。但是我们可以提供一个解决方案：我们再给它增加一个颜色，用值和颜色一起判断，兼容谷歌的颜色得用rgb的格式，如果用户输入的颜色，就深些，这样，我们都可以区分开是用户输入的，还是自动生成的了。详情请查看：https://github.com/johnnynode/placeholder-js
autofocus 自动聚焦 ,autofocus属性可以让表单在加载完成时，会有一个表单域被默认聚焦或者选中，但是尽量不要在一个页面上在多个表单域上使用autofocus,在一些低版本浏览器上会默认聚焦最后一个含有autofocus的表单域，在大多数浏览器中会聚焦第一个含有autofocus的表单域，这会造成跨浏览器的混乱。还有我们通常用空格键来滚动页面，如果页面上有autofocus的表单域会阻止这一浏览器的默认行为。
- 我们只需要在html中，加入autofocus属性就可以了
```
<input type='text' autofocus>
```
- 在此之前，我们用js的focus方法来使表单聚焦。
```
<input id='myInput' type='text'>
<script>
  document.getElementById('myInput').focus();
</script>
```
autocomplete 自动完成，很多浏览器默认提供自动完成功能，帮助用户输入上次提交过的内容，autocomplete有两个必备的条件才能够工作，一是一定要有form元素，二个是表单域上必须要有name属性和name属性值。但是，有些时候我们为了保护隐私，需要避免自动完成这项功能，我们开启和关闭这项功能，只需给它赋值on或者off ,如果不赋值，默认就是on,表示功能开启。
- 我们来开启自动完成功能，html结构为：
```
<form>
  <input type='text' name='myInput' autocomplete>
  <input type='submit' value='submit'>
</form>
```
- 我们关闭此项功能html结构为：
```
<form>
  <input type='text' name='myInput' autocomplete=off>
  <input type='submit' value='submit'>
</form>
```
- 如果我们想给整个表单都设置，我们只需要在form元素上加这个属性就行了
```
<form autocomplete='off'>
    <input type='text' name='myInput'>
    <input type='submit' value='submit'>
</form>
```
required 必填字段，如果表单内存在表单域有这个属性，会在表单提交的时候做校验，如果没有内容，则会阻止提交，当然在低版本的浏览器中有兼容问题。
```
<input type='text' id='theInput' name='myInput' required>
```
我们可以通过下面的JavaScript代码来检测浏览器是否支持 required 属性
```
  var isRequiredSupported = document.getElementById('theInput').required;
```

pattern 通过正则表达式来定义表单域的数据格式。

下面是来验证英文名的示例 html 结构：

<input name='name' pattern="([a-zA-z]{3,30}\s*)+[a-zA-Z]{3,30}" placeholder='Dwight Schultz' required>

检测浏览器是否支持可以用下面的代码：

isPatternSupported = 'pattern' in document.createElement("input");

novalidate 告诉表单不进行验证

可以在form上设置novalidate属性，可以告诉表单不进行验证

<form novalidate>
  <input type='email' name='email'>
  <input type='submit' value='submit' >
</form>

也可以用javascript设置表单不验证

 <form>
  <input type='email' name='email'>
  <input type='submit' value='submit' >
</form>
<script>
  document.forms[0].noValidate = true;
</script>

如果有多个提交按钮，为了指定点击某个按钮提交验证，而某一个不去验证，那么可以在相应的按钮上设置 formnovalidate属性

<form>
  <input type='email' name='email'>
  <input type='submit' value='验证' >
  <input type='submit' value='不去验证' formnovalidate>
</form>

multiple 上传多文件

指定 multiple属性来设置多个文件上传

 <form>
    <input type='file' name='file' multiple>
</form>

min max 限制值的范围，但是不会再输入时限制，提交时校验，step设置的是每次加减的增量，主要使用在number range datepicker上

html结构：

<input type='number' min='10' max='100' step='5' name='num'>
<input type='range' min='10' max='1000' value='50' step='100'>
<input type='date' max='2015-12-25' min='2015-11-25' step='2'>

等等还有其他属性，这里就不一一列举了，用到的时候再去查。

新增元素

html5 中新增加了一些元素，扩展了一些功能

智能感应 list属性和 datalist元素，智能感应需要给input设置一个属性为list，list属性值是datalist元素的id，两者配合使用，并且datalist元素内的option可以套在select里面，这样为了老版本浏览器提供降级方案。智能感应出来的目的就是为了便利的给用户添加输入提示功能，增强用户体验。
- html代码结构如下：
```
<input type='text' name='myInput' list='choose'>
<datalist id='choose'>
  <select>
    <option value='Best Picture'></option>
    <option value='11111'></option>
    <option value='11222'></option>
  </select>
</datalist>
```
- 在w3c上可以亲自试试： http://www.w3school.com.cn/html5/html5_datalist.asp
秘钥生成表单字段keygen
- <keygen>字段，并非<input>类型，但是这个表单字段来生成公共和私人密钥对，并提交公共秘钥，当浏览器提交了<keygen>元素的表单时，私人秘钥被保存于本地秘钥储存中，公共秘钥被打包发送至服务器。下面是简单的测试：
```
<form>
     <keygen name='pubkey' challenge='random-characters'>
     <input type='submit' name='createcertificate' value='Generate'>
</form>
```
- 此元素被除 IE之外的所有主流浏览器支持，在移动端使用时一个很好的选择。
还有一些不是很常用的元素包括<meter>、<progress>、<output>、<menu>、<command>等等