HTML5自学笔记[ 2 ]新增表单控件和表单属性

  1. 新增<input>属性type="email",自动验证,若输入不为邮箱,则不能提交。
  2. 新增<input>属性type="tel",在移动端切换到数字键盘,其他无变化。
  3. 新增<input>属性type="url",自动验证,若输入不为url,则不能提交。
  4. 新增<input>属性type="search",输入框内显示删除文本按钮,其他无变化。
  5. 新增<input>属性type="range",属性step代表每次改变范围,属性value代表当前值,属性max和min设置最大最小值。
  6. 新增<input>属性type="number",提供加减按钮控制数字大小。
  7. 新增<input>属性type="color",提供颜色选择面板。
  8. 新增<input>属性type="datetime",显示完整日期,显示的是UTC世界标准时间。
  9. 新增<input>属性type="datetime-local",显示完整日期,不是UTC。
  10. 新增<input>属性type="time",提供选择时分秒的按钮。
  11. 新增<input>属性type="date",提供选择年月日面板。
  12. 新增<input>属性type="week",选择一年中的周。
  13. 新增<input>属性type="month",选择一年中的月份。
  14. 新增属性maxlength,设置文本框最大输入字符数。
  15. 新增属性placeholder,占位符。
  16. 新增属性autocomplete,是否保存用户输入值,on为打开,off为关闭。
  17. 新增属性autofocus,自动获取焦点。
  18. 新增属性required,必须填写。
  19. 新增属性pattern,正则校验。
  20. 新增属性formaction,单独设置提交地址。
  21. 新增属性formnovalidate:关闭验证,常与formaction配合使用,如保存至草稿箱时就不用验证。
时间: 2024-08-12 21:28:04

HTML5自学笔记[ 2 ]新增表单控件和表单属性的相关文章

html5新增表单控件和表单属性

新的输入性表单控件: email:电子邮箱文本框,跟普通的没什么区别 - 当输入不是邮箱的时候,验证不通过 - 移动端的键盘会发生变化 tel:电话号码 url:网页的URL search:搜索引擎 - chrome下输入文字后,会多出一个关闭的X range:特定范围内的数值选择器 - min.max.step(步数) - 例子: 用js来显示当前数值 number:只能包含数字的输入框 - 输入框末尾有两个箭头 上为加 下为减 color:颜色选择器    - 点击显示颜色版   datet

HTML5自学笔记[ 1 ]新增标签

新增语义化标签 <header></header>: 用于页面或板块头部. <footer></footer>:用于页面底部. <nav></nav>:导航. <hgroup></hgroup>:标题组合. <section></section>:一个板块或区块,用来划分区域. <article></article>:一般用来呈现论坛的一篇帖子. <asid

控制表单控件-获取表单内文本框的个数

代码: ———————————————————— <script type="text/javascript">            //获取表单内文本框的个数            function getInputCount(){                var f = document.forms[0];            //获取表单DOM                var elements = f.elements;        //获取所有的控

表单控件和表单属性

forms 输入型控件 email:电子邮件文本框,跟普通的没什么区别 —当输入不是邮箱的时候,验证不通过, —移动端的键盘会有变化 tel:电话号码,它的功能主要在移动端,一个键盘的切换 url:网页的url search:搜索引擎. —Chrome下输入文字后,会多出一个关闭的× range:特定范围内的数值选择器 number:只能包含数字的输入框 color:颜色选择器 datetime:显示完整日期(Opera浏览器下起作用) datetime-local:显示完整日期  不含时区 t

控制表单控件-修改表单的提交方法

代码: —————————————————————————— <script type="text/javascript">            //修改表单的提交方法            function modifyMethod(){                var f = document.forms[0];            //获取表单DOM                var method = f.myMethod.value;    //选择的

前端笔记——如何控制表单控件中的disabled

0.前言 本文主要说明如何使能或禁止表单控件.表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料[1].下面就通过一个简单的例子说明如何设置和读取disabled属性. [示例页面--代码] <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <meta charset="utf

JavaScript与表单控件

JavaScript与表单控件 1.表单控件 a) 在HTML中表单控件是客户端与服务器进行数据传输的工具,用来收集客户端的信息,并允许客户端的用户以标准格式向服务器提交数据 b) <form name="frmName" action="frmAction" [method="post(默认)/get" [target="targetType"] [enctype=""]></form&

FineUI第六天---表单控件

表单控件 所有表单控件都有的属性有: ShowLabel:是否显示标签(默认值:true). ShowEmptyLabel:是否显示空白的标签(默认值:false). Label:标签文本(默认值:""). LabelSeparator:表单中字段与标签的分隔符,可以通过Web.config.PageManager.Form三个级别进行控制,一般不需要设置此属性(默认值:PageManager中的设置参数). ShowRedStar:在标签后面显示红色的星号(用来标识必填项),一般与R

Angular19 自定义表单控件

1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前往 Angular为开发者提供了ControlValueAccessor接口来辅助开发者构建自定义的表单控件,开发者只需要在自定义表单控件类中实现ControlValueAccessor接口中的方法就可以实现模型和视图之间的数据交互 interface ControlValueAccessor { wri