.鼠标经过自动选择文本:
Onmouseover=”this.focus()”
Onfocus=”this.select()”
2.对单选按钮的设置
Function getChice(){
Var oform = document.froms[myForm1];
Var aChoices = oform.camera;
For(var i=1;i<aChoices.length;i++){
If(aChoices[i].checked)
Break;
alert(“你目前使用的相机是:”+ aChoices[i].value);
}
}
3.对多选框的设置
<input type=”button” value=”全选” onclick=”changeBoxes(1);”/>
<input type=”button” value=”不选” onclick=”changeBoxes(0);”/>
<input type=”button” value=”反选” onclick=”changeBoxes(-1);”/>
Function changeBoxes(action){
Var oform = document.forms[myForm1];
Var ocheckBox = oform.hobby;
For(var i=1;i<aChoices.length;i++){
If(action<0){
ocheckBox[i].checked=!ocheckBox[i].checked;
}else{
ocheckBox[i].checked=action; }
}
4.对下拉菜单的设置
1 length 表示选项<option>个数
2 selected 布尔值,表示选项<option>是否选中
3
SelectedIndex 被选中的序号,如果没有被选中的则为-1,对于多选下拉菜单而言,返回被选中的是第一个序号。从0开始的。
4 text 选项的文本
5 value 选项的value值
6 type 下拉菜单的类型。单选返回select-one,多选返回select-multiple
7 options 获取选项的数组,例如oSelectBox.options[2]表示下拉菜单oSelectBoxd的第3项
一般情况下,下拉菜单有多选和单选,如果只有单选,则直接用SelectedIndex ,直接获得被选中的项,但是有多选的话就只能遍历真个列表了。如果是多选和单选的混合,为了效率,先判断是单选还是多选,如果是单选直接获得SelectedIndex ,这样省的遍历整个列表,提高效率。
Js部分主要代码如下:
<script language=”javascript”>
Function getSelectValue(Box){
Var oForm=document.forms[myForm1];
Var oSelectBox = oForm.elements[Box];//根据参数获取下拉菜单
If(oSelectBox.type==”select-one”){//判断是多选还是单选
Var ichoice = oSelectBox.oSelectBox.selectedIndex;//获取选中
Alert(“你选中的是”+ ichoice);
}else{
Var achoices = new Array();
//遍历整个下拉菜单
For(var i=1;i<achoices.length;i++){
If(oSelectBox.option[i].selected)//如果被选中
achoices.push(oSelectBox.option[i].text);//压入数组
Alert(“你选中的是”+ achoices.join());//输出结果
}
}
</script>
下拉菜单的操作在大多数情况下还有添加,替换,删除选项的功能
1. 增加需要new一个option如下:
Var oOption = new Option(text,value,defaultSelected,selected);
后两项默认值为0,如果不希望选中则可以忽略。添加时通常把第length项直接设置为选中。代码如下:
<script language=”javascript”>
Function AddOption(Box){
Var oForm = document.forms[“myForm1”];
Var oBox = oForm.elements[Box];
Var oOption = new Option(“乒乓球”,”pingpang”);//new一个Option
oBox.options[oBox.options.length]=oOption;//添加到下拉菜单
}
</script>
2. 如果下拉菜单的序号是已经存在的选项,添加时会自动替换原来的选项,如:
oBox.options[iNum]=oOption; //替换第iNum个选项
3. 删除选项,就是把某项值赋为null。如下代码:
oBox.options[iNum]=null; //删除achoices第iNum个选项
5.提交表单:
提交表单 可以直接用控件submit,也可以用submit()函数。
a. Var oForm= document.forms[“myForm1”];
oForm.submit();
b.<input type=”button” value=”submit” onclick=”document.form[myForm1].submit();”/>
c.<input type=”submit” value=”submit”>
有很多时候防止重复提交,则这样写,如下:
<input type=”button” value=”submit” onclick=”this.disabled=true;this.form.submit();”/>
相关推荐
"常用表单数据验证JS"这个压缩包很可能是包含了一系列JavaScript函数和库,用于实现各种常见的表单验证功能。以下是一些关于表单数据验证的基本概念和常用方法: 1. **基本概念**: - **数据验证**:是指在用户...
2、向表单中,引入自定义样式和js。当前用的时layui 3、对表单中的控件,绑定事件,并同时在电脑端、OA精灵端、手机端同时生效。 4、自定义 数据请求、弹出页面、数据选择、回填数据到表单 的函数 jQuery('body...
在蓝凌系统的表单中,JS起到了关键作用,可以实现表单验证、数据处理、表单样式定制等功能。 1. **表单验证**:这是JS在表单中的基础应用,通过编写JS代码,可以对用户输入的数据进行实时检查,确保其符合预设的...
JavaScript弹出层表单提交是一种常见的用户交互设计,它允许用户在不离开当前页面的情况下填写并提交表单数据。这种技术常用于网站的登录、注册、评论或编辑功能,提供了良好的用户体验,因为用户无需跳转到新页面...
JS表单验证是在用户提交数据之前,于客户端执行的一系列检查,以确保输入的数据符合预设的规则,如非空、格式正确等。这可以减少无效请求,提高服务器效率,并为用户提供即时反馈。 1. 验证基本类型:JS提供了多种...
JavaScript(简称JS)是网页开发中用于实现动态交互的重要脚本语言,特别是在处理表单验证时,它的作用不可或缺。表单验证确保用户输入的数据符合预设的规则,从而提高用户体验并减少服务器端的压力。本文将深入探讨...
- **jquery.idealforms.min.js**:JavaScript文件,实现了表单的动态行为、键盘操作、验证等功能。需要与CSS文件一起引入到项目中,以实现插件的全部功能。 - **readme.txt**:通常包含插件的安装指南、使用方法和...
JavaScript表单编程是Web开发中的核心技能之一,它允许开发者获取用户在网页表单中输入的数据并进行验证,从而提供良好的交互体验。本章主要涵盖了以下几个关键知识点: 1. **脚本访问表单**: - 通过`document....
写了好多表单样式 ,这个表单样式是我比较满意的Form表单样式
在本文中,我们将深入探讨“JS表单特效”,如何利用JavaScript实现高效且兼容多浏览器的表单验证功能,以及创建引人入胜的用户界面。 一、表单特效的重要性 在网页中,表单是收集用户信息的关键元素,如注册表单、...
7. **表单自定义控件**:使用`appearance:none`可以去除浏览器默认的表单样式,然后自定义样式,实现独特的输入框、选择框等控件。 8. **动画效果**:通过CSS动画,可以在用户与表单交互时增加动态反馈,如输入验证...
在网页设计和开发中,用户交互的一个常见场景是通过弹出层(modal)表单来收集数据。这种设计模式能够提供一种不打断整体用户体验的方式来获取信息,如注册、登录、编辑或确认操作。本文将详细讲解如何实现弹出层...
本项目通过结合JavaScript(Js)和层叠样式表(CSS)技术,实现了美化的超级漂亮的表单效果,为用户提供更加友好和吸引人的交互体验。下面将详细探讨这个主题中的关键知识点。 一、CSS美化表单 1. 布局:利用CSS的...
在JavaScript(简称JS)中,清空表单标签通常是网页交互中常见的操作,尤其是在用户提交数据后重置表单或者在某些动态事件触发时需要清除输入的值。本篇文章将详细探讨如何使用JavaScript来实现这一功能,以及相关...
9. **API文档**: 使用xForm时,开发者需要参考其提供的API文档,了解如何初始化表单、添加字段、触发弹窗、获取表单数据等操作。 10. **示例代码和教程**: 对于初学者来说,实际的代码示例和教程是学习的关键。...
JavaScript动态表单是一种在网页上创建、修改或交互操作表单元素的技术,它极大地提升了用户界面的灵活性和用户体验。在Web开发中,JavaScript扮演着关键角色,为表单提供了丰富的功能,如验证输入、动态添加删除...
- **css**:这个目录可能包含了用于定制表单样式的CSS文件。 - **example3, example2, example1**:这些可能是不同的示例文件,展示了不同的表单设计和功能实现。 - **images**:可能包含用于表单设计的图标或其他...
"一个完美的js表单验证案例"利用JavaScript(特别是jQuery库)实现了这一功能,提供了高效、用户友好的验证机制。 JavaScript作为客户端脚本语言,可以直接在用户的浏览器上运行,这使得表单验证可以实时进行,减少...
原生JavaScript作为Web开发的基础,提供了丰富的API和方法来处理表单元素,如input和select。本主题将深入探讨如何使用原生JavaScript对form表单进行美化,并对input输入框和select下拉框进行优化。 一、表单基础 1...
总的来说,JavaScript表单验证是网页开发中必不可少的技能,它涉及到了JavaScript基础、正则表达式、DOM操作以及用户交互等多个方面,熟练掌握这一技术能有效提升网站的用户体验和数据安全性。通过不断学习和实践,...