精华内容
下载资源
问答
  • html实例-重置按钮简单介绍属性

    千次阅读 2019-12-07 20:28:04
    表单注册或者登陆代码重置按钮出现的频率很高,在通常的印象,点击重置按钮可以讲表单元素的值设置为空,我想这是很多初学者对此按钮的最初印象,但是实际的本质是否如此很难说。 先看一段代码实例: <!...

    在表单注册或者登陆代码中,重置按钮出现的频率很高,在通常的印象中,点击重置按钮可以讲表单元素的值设置为空,我想这是很多初学者对此按钮的最初印象,但是实际的本质是否如此很难说。

    先看一段代码实例:

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=" utf-8"> 
    <meta name="author" content="http://www.softwhy.com/" /> 
    <title>web前端学习扣qun:731771211  每日分享技术,学术交流</title> 
    </head> 
    <body>
    <form>
    <ul>
      <li>姓名:<input type="text"/></li>
      <li>密码:<input type="password"/></li>
      <li>爱好:<input type="checkbox"/>男<input type="checkbox" checked/>女</li>
      <li><input type="reset" value="重置"/><input type="submit" value="提交"></li>
    </ul>
    </form>
    </body> 
    </html>
    
    
    展开全文
  • 提交表单使用 和 标签都可以定义提交按钮,只要将 type 属性值设置为“submit”即可,而图像按钮则是通过将 type 属性值设置为“image”。当单击提交按钮或图像按钮时,就会提交表单。示例1在下面示例,当在...

    本节示例讲解 JavaScript 的提交 form 表单和重置 form 表单。

    提交表单

    使用 和 标签都可以定义提交按钮,只要将 type 属性值设置为“submit”即可,而图像按钮则是通过将 的 type 属性值设置为“image”。当单击提交按钮或图像按钮时,就会提交表单。

    示例1

    在下面示例中,当在表单内的文本框中输入文本之后,单击“提交”按钮会触发 submit 事件,该函数将禁止表单提交数据,而是弹出提示对话框显示输入的文本信息。

    var t = document.getElementsByTagName("input")[0];

    // 获取文本框的引用指针

    var f = document.getElementsByTagName("form")[0];

    // 获取表单的引用指针

    f.onsubmit = function(e){ // 在表单元素上注册submit事件处理函数

    alert(t.value);

    return false; // 禁止提交数据到服务器

    }

    示例2

    在下面示例中,当表单内没有包含“提交”按钮时,在文本框中输入文本之后按 Enter 键也一样能够触发 submit 事件。

    var t = document.getElementsByTagName("input")[0];

    // 获取文本框的引用指针

    var f = document.getElementsByTagName("form")[0];

    // 获取表单的引用指针

    f.onsubmit = function(e){

    alert(t.value);

    }

    在 文本区中按 Enter 键只会换行,不会提交表单。

    以这种方式提交表单时浏览器会在将请求发送给服务器之前触发 submit 事件,用户有机会验证表单数据,并决定是否允许表单提交。

    示例3

    阻止事件的默认行为可以取消表单提交。下面示例先验证文本框中是否输入字符,如果为空,则调用 preventDefault() 方法阻止表单提交。

    var t = document.getElementsByTagName("input")[0]; // 获取文本框的引用指针

    var f = document.getElementsByTagName("form")[0]; // 获取表单的引用指针

    f.onsubmit = function(e){

    if(t.value.length < 1){

    var event = e || window.event;

    if (event.preventDefault){

    event.preventDefault();

    } else {

    event.returnValue = false;

    }

    }

    }

    示例4

    如果要禁止按 Enter 键提交响应,可以监测键盘响应,当按下 Enter 键时设置其返回值为 false,从而取消键盘的默认动作,禁止按 Enter 键提交响应行为。

    var t = document.getElementsByTagName("input")[0];

    // 获取文本框引用指针

    t.onkeypress = function(e){ // 为文本框绑定键盘keypress事件处理函数

    var e = e || window.event; // 标准化事件对象

    return e.keyCode != 13;

    // 当按下回车键时,设置返回值为false,禁止默认键盘行为

    }

    示例5

    调用 submit() 方法也可以提交表单,这样就不需要表单包含“提交”按钮,任何时候都可以正常提交表单。

    var t = document.getElementsByTagName("input")[0]; // 获取文本框的引用指针

    var f = document.getElementsByTagName("form")[0]; // 获取表单的引用指针

    t.onchange = function(){

    f.submit();

    }

    调用 submit() 方法不会触发 submit 事件,因此在调用此方法之前要先验证表单数据。

    在实际应用中,会出现用户重复提交表单现象。例如,在第 1 次提交表单后,如果长时间没有反应,用户可能会反复单击提交按钮,这样容易带来严重后果,服务器反复处理请求组,或者错误保存用户多次提交的订单。解决方法:在第一次提交表单后禁用提交按钮,或者在 onsubmit 事件处理函数中取消表单提交操作。

    重置表单

    为 或 标签设置 type="reset" 属性可以定义重置按钮。

    重置按钮

    当单击重置按钮时,表单将被重置,所有表单字段恢复为初始值。这时会触发 reset 事件。

    示例1

    下面示例设计当单击【重置】按钮时,弹出提示框,显示文本框中的输入值,同时恢复文本框的默认值,如果没有默认值,则显示为空。

    var t = document.getElementsByTagName("input")[0];

    // 获取文本框的引用指针

    var f = document.getElementsByTagName("form")[0];

    // 获取表单的引用指针

    f.onreset = function(e){ // 在表单元素上注册reset事件处理函数

    alert(t.value);

    }

    示例2

    也可以利用这个机会,在必要时取消重置操作。下面示例检测文本框中的值,如果输入 10 个字符以上,就不允许重置了,避免丢失输入的文本。

    var t = document.getElementsByTagName("input")[0]; // 获取文本框的引用指针

    var f = document.getElementsByTagName("form")[0]; // 获取表单的引用指针

    f.onreset = function(e){

    if(t.value.length > 10){

    var event = e || window.event;

    if (event.preventDefault){

    event.preventDefault();

    } else {

    event.returnValue = false;

    }

    }

    }

    用户也可以使用 form.reset() 方法重置表单,这样就不需要包含重置按钮。

    展开全文
  • button按钮规定 type 属性。Internet Explorer 默认类型是 "button",而其他浏览器(包括 W3C 规范)默认值是 "submit"。

    最近几天,测试系统,遇到一个兼容性问题,form中有一个button按钮,没有指定type类型,点击按钮弹出框选择值之后回填给form上的一个单行文本框,在IE6、IE7、IE8、IE9、IE10中测试都没有问题,唯独IE11中,弹出框关闭之后,单行文本框接收到弹出框的返回值之后,form所在的父页面自动刷新了一次,导致form中的值全部被重置了


    刚开始,还以为是系统所用的Web框架不兼容IE11,经过反复测试发现,系统中有一些弹出框关闭之后,父页面是不会自动刷新的,于是开始慢慢对比源代码,最后还是找到了差异,<button></button>标签和<intput type="button"/>标签还是有很大区别的,尤其在IE11的测试环境


    关于<button></button>标签和<intput type="button"/>标签的区别,这里有篇帖子已经说得很清楚了

    网址:http://www.cnblogs.com/purediy/archive/2012/06/10/2544184.html


    看来以后还是要深入了解一些关于HTML标准的问题~

    展开全文
  • form表单HTML5、CSS3标签及属性属性值 form表单HTML标签、属性属性值: ... (重置按钮) 或者按钮(空按钮) (下拉框选) (多行文本框) (1) 是表单的标签,所有需要写在f...

    form表单HTML5、CSS3标签及属性、属性值

    form表单HTML标签、属性、属性值:

    (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) (下拉框选) (多行文本框)

    (1) 是表单的标签,所有的需要写在form里面才能今
    进行提交;
    1:name=”” form中的name属性主要是对这个form进行标记;
    2:methood=”get/post” 其中 get/post 之间的区别:
    1. get是从服务器上获取数据,post是向服务器传送数据。
    2. get是把参数数据队列加到提交表单的ACTION属性所指的URL
    中,值和表单内各个字段一一对应,在URL中可以看到。post是通
    过HTTP post机制,将表单内各个字段与其内容放置在HTML
    HEADER内一起传送到ACTION属性所指的URL地址。用户看不到
    这个过程。
    3. 对于get方式,服务器端用Request.QueryString获取变量的值,
    对于post方式,服务器端用Request.Form获取提交的数据。
    4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,
    一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中
    为100KB。
    5. get安全性非常低,post安全性较高。但是执行效率却比Post方法
    好。
    3: action=”” action=url用来指定处理提交表单的格式.它可以是一个
    URL地址(提交给程式)或一个电子邮件地址.
    4:enctype=cdata指明用来把表单提交给服务器时(当method值为”post”)
    的互联网媒体形式.这个特性的缺省值是”application/x-www-form-
    urlencoded”
    5:target=”“指定提交的结果文档显示的位置: _blank :在一个新的、
    无名浏览器窗口调入指定的文档; _self :在指向这个目标的元素的相同
    的框架中调入文档; _parent :把文档调入当前框的直接的 frameset
    框中;这个值在当前框没有父框时等价于_self; _top :把文档调入原来
    的最顶部的浏览器窗口中(因此取消所有其它框架);这个值等价于当前框
    没有你框时的_self.
    (2)type=”text”是定义表单里面的单行文本框;value=”“文本框里默认的文字;size=”“单行文本框的宽度;maxlength=”“单行文本框所能输入的字节;
    (3)type=”password” 定义密码框;
    (4)type=”radio” 单选勾选框;
    (5)type=”checkbox” 多选勾选框;
    (6)type=”submit” 提交按钮;
    (7)type=”reset” 重置按钮;
    (8)type=”button”或者 两种方式都可以实现空按钮;
    (9) 多行文本框,是一个双标签;
    (10)


    下拉菜单属性;

    form表单css3属性、属性值:

    1、表单字段集:

    功能:相当于一方框,在字段集中可以包含文本框包含其他元素,该元素
    用于对表单中元素进行分组,并在文档中区别出文本。fieldset元素可以嵌
    套,在其他内部可以再设置多个fieldset对象。
    2、字段集标题

    功能:legend元素可以再fieldset对象绘制的方框内插入一个标题。legend
    元素必须是fieldset内第一个元素。
    3、表单元素:
    (1)上传文件框
    文本域
    (2)图像域(图片按钮)

    form表单HTML5新增标签、属性、属性值:

    这里写图片描述
    1.email:专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的,则不允许提交。但它不检查email地址是否存在。提交时可以为空,除非加上了required属性。
    具有multiple属性,它允许在该文本框中输入一串以逗号分隔的email地址。
    这里写图片描述
    2.url:专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的,则不允许提交。
    例:http://www.baidu.com”>

    1. number 和 range
      number 类型是专门用来输入数字的,并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的最大值,min 是允许的最小值,step 是间隔。设置了这些属性后,如果手动填入的数字不符合这些属性条件,将不能提交。 range 类型是一个数字滑动条。它与 number 类型功能类似,也有 max、min 和 step 属性,在 Opera 中,可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值,但可以使用 output 输出当前值。
      这里写图片描述
    2. datetime 和 datetime-local
      datetime 类型是用来输入 UTC 日期和时间的文本框,而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。
      这里写图片描述
    3. month 和 weekmonth 类型是月份选择器,它的值为:年-月,如:2012-01;week 类型是周选择器,它的值为:年-W周数,如:2011-W02。
      这里写图片描述
    4. search
      search 类型的是用来输入搜索关键词的文本框,它与 text 类型在功能都没有太大区别,只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中,当用户输入内容时,输入框右侧会有一个“×”按钮,单击该按钮,将清空输入框内的内容,使用非常方便。
      这里写图片描述
      7.color
      color 类型用来选取颜色,它提供了一个颜色选取器,值为 16 进制符号,如:#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。
      这里写图片描述
      8.output元素: 定义不同类型的输出,如计算结果的输出,或脚本的输出。
      注:必须从属于某个表单。即,必须将它书写在表单内部,或对它添加form属性。
      0
      100+
      =


      这里写图片描述

    ML 5 不但新增加了表单元素、表单类型,还增加了一些表单属性,同时使用的话,能更好的提高率开发者的工作效率,同时也提高了用户的操作体验。
    1、自动验证
    1)、required
    可以应用在大多数输入元素上,在提交时如果元素内容为空白,则不允许提交,同时显示提示文字。
    2)、pattern
    将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。
    例:

    (3)placeholder属性:文本框处于未输入状态时文本框中显示的输入提示。

    (4)autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得国标焦点,一个页面只能有一个。

    (5) autocomplete 属性规定输入字段是否应该启用自动完成功能。属性值=on/off
    自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
    注释:autocomplete 属性适用于 ,以及下面的 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。
    提示:在某些浏览器中,您可能需要手动启用自动完成功能。

    HTML5增加了大量在提交时对表单及表单元素内容有效性验证的功能

    1、自动验证
    3)、 min、max、step:为包含数字或日期的 input 类型规定限定(约束)
    max: 最大值
    min: 最小值
    step: 数字间隔
    例:
    2、取消验证
    可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证

    附:适用form表单的UI状态伪类选择器
    这里写图片描述

    展开全文
  • 提交表单 使用< input > 或 < button >标签都可以定义提交按钮,只要将type属性值...submit事件类型仅在表单内提交按钮,或者在文本框输入文本时按回车键触发。 示例1:单击【提交】按钮后,触发sub...
  • form表单的属性

    2019-11-21 17:37:00
    重置按钮) 或者按钮(空按钮) (下拉框选) (多行文本框) (1) 是表单的标签,所有需要写在form里面才能今 进行提交; 1:name=”” form中的name属性主要是对这个form进行标记; 2:m...
  • 表单提交与重置事件

    千次阅读 2018-07-06 09:13:05
    表单提交事件(onsubmit)是在用户提交表单时(通常使用“提交”按钮,也就是将按钮的type属性设为submit),在表单提交之前被触发,因此,该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证...
  • html表单的type属性

    2019-10-04 19:49:49
    Input表示Form表单中的一种输入对象,其又随Type类型不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等, 下面一一介绍。 type=text 输入类型是text,这是我们见最多也是使用最多,比如登陆...
  • 5.3 表单的使用 在项目,用户和服务端数据的交互大部分是通过表单来实现,我们这一小节...第一步:定义提交按钮,在按钮button的属性中增加form-type=“submit”,格式如下 <button form-type="submit">按钮&l
  • 表单中经常有需要上传文件表单项,但是这是一个比较特殊表单控件,在各个浏览器中呈现方式都不一样。在IE中,它呈现方式是不可输入输入框加按钮;在Chrome下,它呈现方式是一个按钮加右边文件名,如果...
  • 因为有些页面中的查询选择框太多了,所以要求在这些页面上添加重置按钮 选择框使用是antdSelect组件,antd组件好用是好用,但是密闭性太强了,想要根据需求自定义就会变得很困难 其中Select组件占用了...
  • form 表单输入域不同 type属性详解

    千次阅读 2012-06-28 11:36:44
    Input表示Form表单中的一种输入对象,其又随Type类型不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍。  1,type=text  输入类型是text,这是我们见最多也是使用最多,比如...
  • 【表单标签——按钮】(需要配合JS使用)1.普通按钮&lt;input type="button" value="我是按钮”&... (清空表单中的内容)可以添加value属性改变标题4.提交按钮&lt;input type
  • 表单

    2021-04-18 09:42:53
    表单1.表单作用表单作用表单元素怎么写表单active属性和method属性get和post请求区别标签元素1.单选框2.多选框3....注意:表单中的数据想要提交,一定要有name属性存在。 表单active属性和method属性
  • 关于按钮

    2020-02-17 11:11:40
    #按钮的设置 ##提交按钮&重置按钮 使用提交按钮可以将表单中的信息提交给服务器 使用input创建一个提交按钮,它的...可以创建一个重置按钮,点击重置按钮以后表单中内容将会恢复默认值 <input type="reset"...
  • HTML表单复选框标签在HTML的表单控件,复选框也是经常使用控件,它可以让用户选择打勾或不打勾。它使用也是标签。一、定义标签用于表示文本框、密码框、单选框、复选框、文件上传框、普通按钮、提交按钮、重置...
  • 重置按钮被点击,包含它的表单中所有输入元素值都重置为它们默认值。默认值由 HTML value 属性或 JavaScript defaultValue 属性指定。 在实际情况中,我们经常需要在编辑某个内容时候实
  • input的属性和功能

    2013-10-26 17:57:14
    Input表示Form表单中的一种输入对象,其又随Type类型不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍。 1,type=text 输入类型是text,这是我们见最多也是使用最多,比如...
  • ElementUI中TimePicker组件,当设置is-range属性后,放在form表单中后使用resetFields()方法重置表单,会导致接下来该组件无法继续选取时间。虽然再次打开时间选择面板点击“取消”按钮后恢复正常,但这种操作并不...
  • input的属性用法介绍

    2018-09-06 14:15:00
    Input表示Form表单中的一种输入对象,其又随Type类型不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍。1,type=text输入类型是text,这是我们见最多也是使用最多,比如登陆输入...
  • HTML表单

    2021-03-04 19:52:02
    表单基础知识 通过form嵌套table来实现一个登入表单 ...reset 是重置按钮 file 是文件选择框 注意点 form必须有action属性,表示提交地址 所有需要提交的数据,input必须有name属性 input按钮的文字使
  • 对于Form表单reset方法误解

    千次阅读 2014-03-05 14:18:00
    HTML中Form表单reset方法被用来清空用户所输入内容,以前一直误以为其是单纯将input等输入项中值清空。 但实际上不是这样,reset方法本质是将input等输入...当重置按钮被点击,包含它的表单中所有输入元
  • type属性

    2020-09-10 09:52:35
    input常用type属性如下: text:单行文本输入框,可以通过正整数size控制框长度。...reset:重置按钮,会重置当前表单中全部内容。 image:图像形式提交按钮,写法是“”。 hidden:隐
  • button type属性

    千次阅读 2018-07-06 15:34:04
    该值是其他浏览器默认值)button 该按钮是可点击按钮(Internet Explorer 默认值)reset 该按钮是重置按钮(清除表单数据)总结:其他浏览器(除IE浏览器),如果button没有设置type属性,默认值为type=&...
  • button按钮

    2017-01-18 18:48:56
    button按钮的type属性有: ①type=“button” ②type=“submit” ③type=“reset”对应的每一种的作用分别为: ...③type=“reset”,表示重置,作用是将其所关联的表单中的输入值重置。引申: button和input type=

空空如也

空空如也

1 2 3 4 5 6
收藏数 105
精华内容 42
关键字:

表单中重置按钮的属性是