表单控件和表单属性

forms

  输入型控件

    email:电子邮件文本框,跟普通的没什么区别

        —当输入不是邮箱的时候,验证不通过, —移动端的键盘会有变化

    tel:电话号码,它的功能主要在移动端,一个键盘的切换

    url:网页的url

    

    search:搜索引擎。

       —Chrome下输入文字后,会多出一个关闭的×

    

     range:特定范围内的数值选择器

     

     number:只能包含数字的输入框

     

    color:颜色选择器

    

    datetime:显示完整日期(Opera浏览器下起作用)

    

    datetime-local:显示完整日期  不含时区

    

    time:显示时间,不含时区

    

    date:显示日期

    

    week:显示周

    

    month:显示月

    

表单特性和函数

  placeholder:输入框提示信息

  

  autocomplete:是否保存用户输入值    默认为on,关闭提示选择off

  

  autofocus:指定表单获取输入焦点

  

  required:此项必填,不能为空

  

  pattern:正则验证

  

  formaction:在submit里定义提交地址

  

表单验证

  validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true一种验证失败返回false。

  oText.addEventListener("invalid",fn1,false);

  ev. preventDefault() ;阻止默认事件

  valueMissing:输入值为空时

  typeMismatch:控件值与预期类型不匹配

  patternMismatch:输入值不满足pattern正则

  tooLong:超过maxLength最大限制

  rangeUnderflow:验证range最小值

  rangeOverflow:验证的range最大值

  stepMismatch:验证range的当前值 是否符合min、max、及step的规则

  customError不符合自定义验证

原文地址:https://www.cnblogs.com/bokeyanghao/p/10868390.html

时间: 2024-08-02 17:18:44

表单控件和表单属性的相关文章

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

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

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

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

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

新增<input>属性type="email",自动验证,若输入不为邮箱,则不能提交. 新增<input>属性type="tel",在移动端切换到数字键盘,其他无变化. 新增<input>属性type="url",自动验证,若输入不为url,则不能提交. 新增<input>属性type="search",输入框内显示删除文本按钮,其他无变化. 新增<input>属性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

FineUI第六天---表单控件

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

Angular19 自定义表单控件

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

JavaScript与表单控件

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

vue.js基础知识篇(3):计算属性、表单控件绑定

第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="example"> <