表单控件的全面分析

提交表单
用户单击提交按钮或图像按钮时,就会提交表单。 使用<input>或<button>都可以定
义提交按钮,只要将其type特性的值设置为“submit”即可,而图像按钮则是通过
将<input>的type特性值设置为“image”来定义的。 因此,只要我们单击以下代码生
成的按钮,就可以提交表单。

用户单击重置按钮重置表单时,会触发reset事件。 利用这个机会,我们可以在必
要时取消重置操作。

共有的表单字段属性
除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性。 由于<input>类型
可以表示多种表单字段,因此有些属性只适用于某些字段,但还有一些属性是所有
字段所共有的。 表单字段共有的属性和方法如下。
disabled:布尔值,表示当前字段是否被禁用。
form:指向当前字段所属表单的指针;只读。
name:当前字段的名称。
readOnly:布尔值,表示当前字段是否只读。
tabIndex:表示当前字段的切换( tab) 序号。
type:当前字段的类型,如“checkbox”、 “radio”,等等。
value:当前字段将被提交给服务器的值。 对文件字段来说,这个属性是只读
的,包含着文件在计算机中的路径。
除了form属性之外,可以通过JavaScript动态修改其他任何属性。

能够动态修改表单字段属性,意味着我们可以在任何时候,以任何方式来动态操作
表单。 例如,很多用户可能会重复单击表单的提交按钮。 在涉及信用卡消费时,这
就是个问题:因为会导致费用翻番。 为此,最常见的解决方案,就是在第一次单击
后就禁用提交按钮。 只要侦听submit事件,并在该事件发生时禁用提交按钮即可。

2. 共有的表单字段方法
每个表单字段都有两个方法:focus()和blur()。 其中,focus()方法用于将浏览器
的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件。 例如,接收到
焦点的文本框会显示插入符号,随时可以接收输入。 使用focus()方法,可以将用
户的注意力吸引到页面中的某个部位。 例如,在页面加载完毕后,将焦点转移到表

单中的第一个字段。 为此,可以侦听页面的load事件,并在该事件发生时在表单的
第一个字段上调用focus()方法

与focus()方法相对的是blur()方法,它的作用是从元素中移走焦点。 在调用blur()
方法时,并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的
元素上面移走而已。 在早期Web开发中,那时候的表单字段还没有readonly特性,
因此就可以使用blur()方法来创建只读字段。 现在,虽然需要使用blur()的场合不
多了,但必要时还可以使用的。

3. 共有的表单字段事件
除了支持鼠标、 键盘、 更改和HTML事件之外,所有表单字段都支持下列3个事件。
blur:当前字段失去焦点时触发。
change:对于<input>和<textarea>元素,在它们失去焦点且value值改变时触

发;对于<select>元素,在其选项改变时触发。
focus:当前字段获得焦点时触发。

当用户改变了当前字段的焦点,或者我们调用了blur()或focus()方法时,都可以触
发blur和focus事件。 这两个事件在所有表单字段中都是相同的。 但是,change事件
在不同表单控件中触发的次数会有所不同。 对于<input>和<textarea>元素,当它们
从获得焦点到失去焦点且value值改变时,才会触发change事件。 对于<select>元
素,只要用户选择了不同的选项,就会触发change事件;换句话说,不失去焦点也
会触发change事件。

14.2 文本框脚本
在HTML中,有两种方式来表现文本框:一种是使用<input>元素的单行文本框,另
一种是使用<textarea>的多行文本框。 这两个控件非常相似,而且多数时候的行为
也差不多。 不过,它们之间仍然存在一些重要的区别。
要表现文本框,必须将<input>元素的type特性设置为“text”。 而通过设置size特
性,可以指定文本框中能够显示的字符数。 通过value特性,可以设置文本框的初
始值,而maxlength特性则用于指定文本框可以接受的最大字符数。

时间: 2024-10-25 04:14:19

表单控件的全面分析的相关文章

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

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

【JQuery EazyUI】表单控件

开始eazyUI界面控件的使用,主要有下列几个表单控件(效果图): 一.文本框的使用(textbox): <div class="easyui-panel" title="表单控件" style="width: 100%; max-width: 400px; padding: 30px 60px;"> <form action="demo1.ashx" id="ff"> <di

vue.js基础知识篇(1):简介、数据绑定、指令、计算属性、表单控件绑定和过滤器

目录第一章:vue.js是什么? 代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章:vue.js是什么? 1.vue.js是MVVM框架 MVVM的代表框架是Angular.js,以及vue.js. MVVM的view和model是分离的,View的变化会自动更新到ViewModel上,ViewModel的变化会自动同步到View上显示.这种自动同步依赖于ViewModel的属性实现了Observer. 2.它与angular.js的区别 相同

vue2.0 之表单控件绑定

表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v-model="myVal"><br/> {{ myVal }}<br/> <input type="text" name="" v-model.lazy="myVal1"><br/&

基于Extjs的web表单设计器 第二节——表单控件设计

这一节介绍表单设计器的常用控件的设计. 在前面两章节的附图中我已经给出了表单控件的两大分类:区域控件.常用控件.这里对每个分类以及分类所包含的控件的作用进行一一的介绍,因为它们很重要,是表单设计器的基本元素,更是核心组成部门. 一.区域控件,它主要包含三个类型的控件:卡片区域.表格区域.混合区域.这三个控件是我们的其他控件的容器或者叫包装器,相当于VS里面的各种Panel.它们很重要,每种区域控件的作用都不一样,能够包含的控件类型也不大一样,它们三个区域相互配合使用,可以为我们的表单提供强大的支

表单控件使用

表单控件使用 <span style="font-family:Microsoft YaHei;"><!--百度搜索:自信的尘埃 2014/12/29--> <html> <meta charset="UTF-8"/> <head>     <title>表单元素</title> </head> <body>     <form action="

Bootstrap关于表单控件(按扭)

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ?  input[type=“submit”]   ?  input[type=“button”]   ?  input[type=“reset”]   ?  <button> 这里先让大家看看Bootstrap的按钮长成什么样: 表单控件的大小: 前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了

表单控件+下拉列表+文本域

一.表单控件 1.<input type="text" name="user"  size="20默认" /> 2.<input type="password" name="code"  /> 3.<input type="radio" name="sex[]" value="1" />+<input ty

CSS3美化表单控件

CSS3美化表单控件 2016-06-28 18:14 by 图书馆的牧羊人, 582 阅读, 9 评论, 收藏,  编辑 表单的默认控件在不同的浏览器中的样式不同,用户体验很差.用CSS3可以实现表单控件的美化,可以提供更好的用户体验.不足之处就是浏览器的兼容性问题. 一.下拉控件 效果图: 下拉控件的布局结构: <div class="container"> <div class="select"> <p>所有选项</p