JavaScript实现表单元素的操作
一、forms[]; Form 表单对象
document.forms[] 是一个数组,包含了文档中所有的表单(<form>)。要引用单个表单,可以用 document.forms[x],但是一般来说,人们都会这样做:在<form>标记中加上“name="..."”属性,那么直接用 “document.<表单名>”就可以引用了。
1、属性
- name 返回表单的名称,也就是<form name="...">属性。
- action 返回/设定表单的提交地址,也就是<form action="...">属性。
- method 返回/设定表单的提交方法,也就是<form method="...">属性。
- target 返回/设定表单提交后返回的窗口,也就是<form target="...">属性。
- encoding 返回/设定表单提交内容的编码方式,也就是<form enctype="...">属性。
- length 返回该表单所含元素的数目。
enctype属性:编码方式
表单中的enctype参数用于设置表单信息提交的编码方式。具体语法如下:
<form enctype="value"...</form>
参数说明:value的取值:
- Test/plain: 以纯文本的形式传送
- application/x-www-form-urlencoded : 默认的编码形式
- multipart/form-data: MIME编码,上传文件的表单必须选择该项
2、方法
- reset() 重置表单。这与按下“重置”按钮是一样的。
- submit() 提交表单。这与按下“提交”按钮是一样的。
3、事件
onreset; onsubmit。
二、表单元素
1、输入标记
输入标记<input>是表单中最常用的标记之一。常用的文本域、按钮等都使用这个标记。语法如下:
<form> <input name="field_name" type="type_name"> </form>
- field_name:控件名称
- type_name:控件类型
2、输入类控件的type可选值
- text 文字域
- password 密码域,用户在页面输入时不显示具体的内容,以*代替
- radio 单选按钮
- checkbox 复选框
- button 普通按钮
- submit 提交按钮
- reset 重置按钮
- image 图像域,图像提交按钮
- hidden 隐藏域,不显示在页面上,只将内容传递到服务器上
- file 文件域
3、elements[]; Element 表单元素对象
<表单对象>.elements 是一个数组,包含了该表单所有的对象。一般我们不用该数组,而直接引用各个具体的对象。
Hidden 隐藏对象由“<input type="hidden">”指定。
属性
- name 返回/设定用<input name="...">指定的元素名称。
- value 返回/设定用<input value="...">指定的元素的值。
- form 返回包含本元素的表单对象。
4、三个获取表单对象的方法
注意:document.form[index]跟form.element[index]的原理一致,通过form表单在html文档的先后顺序来获取表单相应的表单对象。
下例列举了所有的表单元素,并把表达的相关操作都呈现出来
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form name="everything"> <table border="border" cellpadding="5"> <tr> <td>UserName:<br/>[1]<input type="TEXT" name="username" size="15"/></td> <td>Password:<br/>[2]:<input type="PASSWORD" name="password" size="15"/> </td> <td rowspan="4">Input Events[3]<br/><textarea name="textarea" rows="20" cols="28"/></textarea> </td> <td rowspan="4" align="center" valign="center"> [9]<input type="BUTTON" value="Clear" name="clearbutton"/><br/> [10]<input type="BUTTON" value="submit" name="submitbutton"/><br/> [11]<input type="RESET" value="Reset" name="resetbutton"/><br/> </td> </tr> <tr> <td colspan="2">File:[4]<input type="FILE" name="file" size="15"/></td> </tr> <tr> <td>My Computer Peripherals:<br/> [5]<input type="CHECKBOX" name="extras" value="burner">DVD Writer<br/> [5]<input type="CHECKBOX" name="extras" value="printter">Printer<br/> [5]<input type="CHECKBOX" name="extras" value="card">cardReader<br/> </td> <td>My Web Browser:</br> [6]<input type="RADIO" name="browser" value="ff">Firefox<br/> [6]<input type="RADIO" name="browser" value="ie">IE<br/> [6]<input type="RADIO" name="browser" value="other">Other </td> </tr> <tr> <td> My Hobbies:[7]<BR/> <select multiple="multiple" name="Hobbies" size="4"> <option value="programmeing">Hacking Javascript <option value="surfing"> surfing the web <option value="caffeine">Drinking coffe <option value="annoying">annoying my friends </select> </td> <td align="center" valign="center">My Favorite Color:<br>[8] <select name="color"> <option value="red">red <option value="green">green <option value="Blue">Blue <option value="white">white <option value="violet">violet <option value="peach">Peach </select> </td> </tr> </table> </form> <div align="center"> <table border="4" bgcolor="pink" cellspacing="1" cellpadding="4"> <tr> <td align="center"><b>Form Elements</b></td> <td>[1]Text</td> <td>[2]Password</td> <td>[3]textarea</td> <td>[4]FielU</td> <td>[5]Checkbox</td> </tr> <tr> <td>[6]Radio</td><td>[7]select(list)</td><td>select(menu)</td> <td>[9]BUTTON</td><td>[10]submit</td><td>[11]Reste</td> </tr> </table> </div> <script type="text/Javascript"> function report(element,event){ if((element.type=="select-one") || (element.type=="select-multiple")){ value=""; for(var i=0;i<element.options.length;i++) if(element.options[i].selected) value+=element.options[i].value+""; } else if(element.type=="textarea") value="..." else value=element.value; var msg=event+":"+element.name+'('+value+')\n'; var t=element.form.textarea; t.value=t.value+msg; } function addhandlers(f){ for(var i=0;i<f.elements.length;i++){ var e=f.elements[i]; e.onclick=function(){report(this,'Click');} e.onchange=function(){report(this,'Change');} e.onfocus=function(){report(this,'Focus');} e.onblur=function(){report(this,'Blur');} e.onselect=function(){report(this,'Select');} } //Define some special-case event handlers for the three buttions. f.clearbutton.onclick=function(){ this.form.textarea.value='';report(this,'CLick'); } f.submitbutton.onclick=function(){ report(this,'Click');return false; } f.resetbutton.onclick=function(){ this.form.reset();report(this,'Click');return false; } } //Finally,activate our form by adding all possible event handlers addhandlers(document.everything); </script> </body> </html>
三、Button 按钮对象
由“<input type="button">”指定。引用一个 Button 对象,可以使用“<文档对象>.<表单对象>.<按钮名称>”。<按钮名称>指在<input>标记中的“name="..."”属性的值。引用任意表单元素都可以用这种方法。
属性
- <name 返回/设定用<input name="...">指定的元素名称。
- value 返回/设定用<input value="...">指定的元素的值。
- form 返回包含本元素的表单对象。
方法
- blur() 从对象中移走焦点。
- focus() 让对象获得焦点。
- click() 模拟鼠标点击该对象。
事件
onclick; onmousedown; onmouseup
四、Checkbox 复选框对象
由“<input type="checkbox">”指定。
属性
- name 返回/设定用<input name="...">指定的元素名称。
- value 返回/设定用<input value="...">指定的元素的值。
- form 返回包含本元素的表单对象。
- checked 返回/设定该复选框对象是否被选中。这是一个布尔值。
- defaultChecked 返回/设定该复选框对象默认是否被选中。这是一个布尔值。
方法
- blur() 从对象中移走焦点。
- focus() 让对象获得焦点。
- click() 模拟鼠标点击该对象。
事件
onclick
五、Password 密码输入区对象
由“<input type="password">”指定。
属性
- name 返回/设定用<input name="...">指定的元素名称。
- value 返回/设定密码输入区当前的值。
- defaultValue 返回用<input value="...">指定的默认值。
- form 返回包含本元素的表单对象。
方法
- blur() 从对象中移走焦点。
- focus() 让对象获得焦点。
- select() 选中密码输入区里全部文本。
事件
onchange
六、Radio 单选域对象
<input type="radio"> 标签定义了表单单选框选项,<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
checked属性 表示是否被默认选择
学生: 男孩<input type="radio" value="boy" name="gender" checked="checked"> 女孩<input type="radio" value="girl" name="gender" >
由“<input type="radio">”指定。一组 Radio 对象有共同的名称(name 属性),这样的话,document.formName.radioName 就成了一个数组。
要访问单个 Radio 对象就要用:document.formName.radioName[x]。
单个 Radio 对象的属性
- name 返回/设定用<input name="...">指定的元素名称。
- value 返回/设定用<input value="...">指定的元素的值。
- form 返回包含本元素的表单对象。
- checked 返回/设定该单选域对象是否被选中。这是一个布尔值。
- defaultChecked 返回/设定该对象默认是否被选中。这是一个布尔值。
方法
- blur() 从对象中移走焦点。
- focus() 让对象获得焦点。
- click() 模拟鼠标点击该对象。
事件
onclick
七、Reset 重置按钮对象
由“<input type="reset">”指定。因为 Reset 也是按钮,所以也有 Button 对象的属性和方法。至于“onclick”事件,一般用 Form 对象的 onreset 代替。
八、Select 选择区(下拉菜单、列表)对象
菜单列表类的控件<select>和<option>菜单是种最节省空间的方式,正常状态下只能看到个选项,单击按钮打开菜单后才能看到部的选项。
列表可以显示一定数量的选项,如果超过了这个数量,会自动出现滚动条。具体语法如下:
<select name="select_name" size=select_size multiple="multiple"> <option value="option_value" selected="selected">选项</option> <option value="option_value">选项</option> </select>
1、属性
- name 返回/设定用<input name="...">指定的元素名称。
- length 返回 Select 对象下选项的数目。
- selectedIndex 返回被选中的选项的下标。这个下标就是在 options[] 数组中该选项的位置。如果 Select 对象允许多项选择,则返回第一个被选中的选项的下标。
- form 返回包含本元素的表单对象。
2、方法
- blur() 从对象中移走焦点。
- focus() 让对象获得焦点。
3、事件
onchange
4、操作select控件
新增、修改、删除、选中、清空、判断存在等
1、判断select选项中 是否存在Value=”paraValue”的Item
function jsselectisexititem(objselect,objitemvalue) { var isexit = false; for(var i=0;i<objselect.options.length;i++) { if(objselect.options[i].value == objitemvalue) { isexit = true; break; } } return isexit; }
2、向select选项中加入一个Item
function jsadditemtoselect(objselect,objitemtext,objitemvalue) { //判断是否存在 if(jsselectisexititem(objselect,objitemvalue)) { alert("该item的value值已经存在"); } else { var varitem = new option(objitemtext,objitemvalue); // objselect.options[objselect.options.length] = varitem; objselect.options.add(varitem); alert("成功加入"); } }
3、从select选项中删除一个Item
function jsremoveitemfromselect(objselect,objitemvalue) { //判断是否存在 if(jsselectisexititem(objselect,objitemvalue)) { for(var i=0;i<objselect.options.length;i++) { if(objselect.options[i].value == objitemvalue) { objselect.options.remove(i); break; } } alert("成功删除"); } else { alert("该select中 不存在该项"); } }
4、删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) { var length = objSelect.options.length - 1; for(var i = length; i >= 0; i—){ if(objSelect[i].selected == true){ objSelect.options[i] = null; } } }
5、修改select选项中 value=”paraValue”的text为”paraText”
function jsupdateitemtoselect(objselect,objitemtext,objitemvalue) { //判断是否存在 if(jsselectisexititem(objselect,objitemvalue)) { for(var i=0;i<objselect.options.length;i++) { if(objselect.options[i].value == objitemvalue) { objselect.options[i].text = objitemtext; break; } } alert("成功修改"); } else { alert("该select中 不存在该项"); } }
6、设置select中text=”paraText”的第一个Item为选中
function jsselectitembyvalue(objselect,objitemtext) { //判断是否存在 var isexit = false; for(var i=0;i<objselect.options.length;i++) { if(objselect.options[i].text == objitemtext) { objselect.options[i].selected = true; isexit = true; break; } } //show出结果 if(isexit) { alert("成功选中"); } else { alert("该select中 不存在该项"); } }
7、设置select中value=”paraValue”的Item为选中
document.all.objSelect.value = objItemValue;
8、得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;
9、得到select的当前选中项的text
var currselecttext = document.all.objselect.options[document.all.objselect.selectedindex].text;
10、得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
11、清空select的项
document.all.objSelect.options.length =0;
九、options[]; Option 选择项对象
options[] 是一个数组,包含了在同一个 Select 对象下的 Option 对象。Option 对象由“<select>”下的“<options>”指定。
options[] 数组的属性
length; selectedIndex 与所属 Select 对象的同名属性相同。
单个 Option 对象的属性
- text 返回/指定 Option 对象所显示的文本
- value 返回/指定 Option 对象的值,与<options value="...">一致。
- index 返回该 Option 对象的下标。对此并没有什么好说,因为要指定特定的一个 Option 对象,都要先知道该对象的下标。这个属性好像没有什么用。
- selected 返回/指定该对象是否被选中。通过指定 true 或者 false,可以动态的改变选中项。
- defaultSelected 返回该对象默认是否被选中。true / false。
十、Submit 提交按钮对象
由“<input type="submit">指定。因为 Submit 也是按钮,所以也有 Button 对象的属性和方法。至于“onclick”事件,一般用 Form 对象的 onsubmit 代替。
十一、Text 文本框对象
由“<input type="text">”指定。Password 对象也是 Text 对象的一种,所以 Password 对象所有的属性、方法和事件,Text 对象都有。
十二、Textarea 多行文本输入区对象
在HTML中还有一种特殊定义的文本样式,称为文本域<textarea>。它与文字字段的区别在于可以添加多行文字,从而输入更多的文本。语法如下:
<textarea name="textname" value="text_value" rows=rows_value cols=cols_value></textarea>
由“<textarea>”指定。Textarea 对象所有的属性、方法和事件和 Text 对象相同,也就是跟 Password 对象一样。
到此这篇关于JavaScript操作表单元素的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://www.cnblogs.com/springsnow/p/12365175.html
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
- 这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
- 神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30
- tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
前言在面向对象的编程范式中,封装都是必不可少的一个概念,而在诸如 Java,C++等传统的面向对象的语言中, 私有成员是实现封装的一个重要途径。但在 JavaScript 中,确没有在语法特性上对私有成员提供支持, 这也使得开发人员使...2015-10-30