来自 Web前端 2020-05-07 05:42 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

HTML5表单新特性

input type="text" list="l"

HTML5_01之表单新特性,html5_01新特性

1、WebStorm快捷键:
 Ctrl+Alt+(向下方向键):快速复制当前行
 Alt+(向上/下方向键):移动当前行
 Ctrl+D:删除当前行
 Ctrl+/:快速(取消)注释当前行
 Ctrl+Alt+L:格式化当前文档
2、HTML5九大新特性:
 ①表单新特性、②视频音频、③Canvas绘图、④SVG绘图、⑤地理定位、⑥拖放API、⑦WebWorker、⑧WebStorage、⑨WebSocket
3、表单Input类型:
 ①已有type类型:
  text(文本框)、password(密码框)、radio(单选按钮)、checkbox(复选框)、button(普通按钮)、reset(重置)、submit(提交)、image(图片)、file(文件选择)、hidden(隐藏域);
 ②HTML5新添加type类型:
  number:数字输入框,相应属性:min(最小值)、max(最大值)、step(等差值);
  email:邮件输入框,默认验证规则——中间‘@’符号,前后各至少一个字符;
  url:URL地址输入框,默认验证规则——冒号‘:’,且前面存在任意字符;
  tel:电话号码输入框,无格式验证,手机浏览器弹出数字键盘;
  search:搜索输入框,PC下Chrome搜索框内有删除符号‘x’,手机弹出键盘右下角显示‘搜索’;
  range:范围选择滑块,相应属性:min(最小值)、max(最大值)、value(默认值)、step(等差值);
  color:颜色选择窗口,浏览器会调用操作系统提供的颜色选择窗口,提交的是颜色值;
  date:日期选择窗口,不能定制样式,相应属性:min(最小日期,取值“xxxx/xx/xx”);
  month:月份选择器;
  week:星期/周选择器;
4、表单元素:
 ①已有表单元素——可与用户交互并提交:input(各种形式交互表单)、select(option)(下拉选择)、textarea(文本输入域)、button(普通按钮);
 ②HTML5新增表单元素——不能交互/提交,仅作信息展示:
  datalist:数据列表,为输入框提供输入建议;例:
   <datalist id="xx">
    <option>xxxxx</option>
    <option>xxxxx</option>
    ...
   </datalist>
   <input list="xx">
  progress:进度条;例:
   <progress value=""></progress>
  meter:度量衡,刻度尺,使用不同颜色标识出数据所处的区间;例:
   <meter min="0" low="25" value="0" high="75" optimum="50" max="100"></meter>
  output:输出值,用于表示数据的计算结果,语义标签;例:
   <output for="xx"></output>
5、表单元素属性:
 ①已有表单标签常用属性:name、value、readonly、disabled(禁用)、checked(选中)、for;
 ②HTML5新增表单标签属性:
  placeholder:占位提示消息,与value不同,仅能提示,不能提交;例:
   <input placeholder="提示性文字">
  autofocus:自动获得焦点;
  multiple:多项,用于email和file输入框,允许输入多个值,逗号分隔;例:
  autocomplete:自动完成,取值on/off,指定输入域是否记录上次提交的输入,下次输入时给予提示;
  form:表单,指定当前输入域所属的表单ID,可以将声明了form的输入框放到表单元素外面,仍可以一同被提交;例:
   <form id="formID">...</form>
   ...
   <input form="formID">
  required:必填项,提交时验证,若没有输入则无法提交;
  min:最小值,若输入值小于该值则无法提交;
  max:最大值,若输入值大于该值则无法提交;
  minlength:最小长度,若输入的字符串长度小于该值无法提交(非HTML5标准属性,FireFox不支持,Chrome支持);
  maxlength:最大长度,若输入字符串长度大于该值无法提交;
  pattern:正则表达式样式,若输入字符串不符合指定正则表达式则无法提交;例:
   <input pattern="^1[3578]d{9}$">
6、自定义表单错误提示消息:
 HTML5新增表单输入域属性:validity(有效性) ;
 ValidityState{
  valid:true;
  badInput:false——无效输入,number;
  customError:false——自定义错误,setCustomValidity('')参数字符串有内容,customError就变为true;参数值是空字符串,customError变为false;
  patternMismatch:false——样式不匹配,pattern;
  rangeOverflow:false——范围上溢出,max;
  rangeUnderflow:false——范围下溢出,min;
  stepMismatch:false——步长不匹配,step;
  tooLong:false——字符串太长,maxlength;
  tooShort:false——字符串太短,minlength;
  typeMismatch:false——类型不匹配,email/url;
  valueMissing:false——值缺失,required;
 }

http://www.bkjia.com/HTML5/1171965.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1171965.htmlTechArticleHTML5_01之表单新特性,html5_01新特性 1、WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除...

(1)datalist:数据列表,配合option使用,本身为不可见元素,为普通的input提供输入建议列表

input type="week"

input type=" "

meter min="最小可能值" max="最大的可能值" low="合理的下限" high="合理的上限" optimum="最优值" value="实际值"/meter

text、password、radio、checkbox、file、submit、reset、button、image、hidden

3.number:数字输入域,在表单提交时提供简单的数字格式验证,并弹出一个提示窗口

HTML5新增的input type:

4.tel:电话号码输入域,在手机浏览器中弹出数字键盘

(2)placeholder:站位符,用于在输入框中显示提示性文字,与value不同,不能被提交

input type="tel"

HTML5之前表单元素新增的属性:

HTML5新特性表单新特性——表单元素新的属性——重点

(5)form:为一个元素指定form属性,值为某个表单的ID,则此输入域可以放到表单的外部

网上澳门金莎娱乐,input maxlength="9"

input type="url"

(10)max:限定输入的数字的最大值

input minlength="6"

input autofocus

(12)pattern:指定一个正则表达式,对输入进行验证

(7)maxlength:最大长度,在有输入的情况下,限定输入域中字符的个数

datalist optionXXX/option/datalist

2.HTML5新特性之表单新特性——新的表单元素

input placeholder="提示性文字"

input type="date"

input max=""

input autocomplete="off"

(8)date:日期选择控件,FF没有实现,推荐使用第三方插件代替,如jQueryUI-datepicker、laydate等

=======上述六个属性是输入验证相关属性========

2.url:URL地址输入域。在表单提交时提供简单的URL地址格式验证,并弹出一个提示窗口

form /form

(10)week:星期选择控件,FF没有实现

input type="search"

input required

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:HTML5表单新特性

关键词: