HTML 中表单form 的相关知识

 

在Javascript 中,页面上的每一对<form> 标记都解析为一个对象,即form 对象。

可以通过document.forms 获取以源顺序排列的文档中所有form 对象的集合。

 

如果一个表单对象定义如下:
<form name="frm1" method="post" action="login.aspx">
获得该表单对象的方法:
  i>  document.forms["frm1"];   // 根据name属性值
 ii>  document.forms[0];        // 根据索引号
iii>  document.frm1;            // 直接根据name值获得对象

 

 

form 表单应该注意的属性:

elements:获取以源顺序排列的给定表单中所有控件的集合。<input  type="image" > 对象不在此集合内。

 

var txtName = myform.elements[0];         //获得表单的第一个元素
var txtName = myform.elements["txtName"]; //获得name属性值为"txtName"的元素
var txtName = myform.elements.txtName;    //获得name属性值为"txtName"的元素

 

 

enctype:设置或获取表单的多用途网际邮件扩展(MIME) 编码。

                    这个属性的默认值为:application/x-www-form-urlencoded

                    如果要上传文件,则应该设置为:multipart/form-data

 

form 表单中的<label> 标记:

        每一个表单元素的文字描述都应该使用<label> 标记!

该标记用于将文字绑定到对应的表单元素上,它的for 属性指定它所要绑定的表单元素id 值。绑定后单击该文字,鼠标将聚焦到对应的文本框中或选中对应的选项。

若安装了某些桌面主题,某些表单元素还会变换颜色来予以提示,这大大提高了用户体验。

示例代码:

 

<form method="post" name="frm1">
    <label for="txt">点我将聚焦到文本框</label>
    <input type="text" id="txt" name="myname">
<br/>
    <label for="rdo">点我将选中单选框</label>
    <input type="radio" id="rdo" name="male"/>
<br/>
    <label for="cbo">点我将选中复选框</label>
    <input type="checkbox" id="cbo" name="hobby">
</form>

 

效果如下: 点我将聚焦到文本框
点我将选中单选框
点我将选中复选框

 

注意:

i >    每个表单元素应当尽量使用<label>标签来提高用户体验;

ii >   每个表单元素应当分配 name 属性  和 id 属性

        name 属性:用来将数据提交到服务器

               id 属性:用来在客户端做相应的操作;如:<label>标签的绑定、CSS 选择器的使用等。

 

在客户端,Javascript 对表单表单元素的操作,更青睐于使用其name 属性。

因为,对于某些特定的表单元素(如:单选按钮等),使用其name 属性更易于获得元素值,也更方便向服务器传送数据!

 

Javascript 操作form 表单元素,比较少用的属性:

defaultChecked 设置或获取复选框或单选钮的状态。
defaultValue 设置或获取对象的初始内容。
disabled 设置或获取控件的状态。

 

提交表单

提交表单的示例:

 

  <form name="frm" method="post" action="javascript:alert('提交成功!');">
     <input type="button" value="提交功能" 
            onclick
="document.forms['frm'].submit();">
     <input type="button" value="禁用反复提交" 
            onclick
="this.disabled=true; this.form.submit();">
  </form>

注意:

i >   如果使用submit( ) 方法来提交表单,则不会触发<form> 表单元素的onsubmit 事件

       这是与用<input  type="submit">提交元素不同的地方;

ii >  可以在按钮的提交或点击事件中,使用disabled 属性来禁用用户反复点击提交按钮的行为,

       减少服务器的响应负担;

 

设置文本框

i >   控制文本框的字符个数

 

<script language="javascript">
function LessThan(_textArea){
    //返回文本框字符个数是否符号要求的boolean值
    return _textArea.value.length < _textArea.getAttribute("maxlength");
}
</script>
<label for="name">文本框:</label>
<input type="text" name="name" id="name" value="姓名" maxlength="10"></p>
<br>
<label for="comments">多行文本框:</label>
<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea>

 

注意:多行文本框<textarea> 中的maxlength 为自定义属性;如果在<textarea> 中输入字符时,换行也算一个字符;

 

ii >  自动选中文本框

 

<script language="javascript">
window.onload = function(){
    var txtName = document.getElementsByName("myName")[0];
    txtName.onmouseover = function(){
       this.focus();
    };
    txtName.onfocus = function(){
       this.select();
    };
}
</script>
<INPUT TYPE="text" NAME="myName" value="默认值被选中" />

 

遵循了行为与结构分离的原则。

 

设置单选按钮

获取选中的单选按钮& 设置单选按钮被选中。代码如下:

 

<script language="javascript">
//获取选中项
function getChoice(){
    var oForm = document.forms["myForm1"];
    //radioName是单选按钮的name属性值
    var aChoices = oForm.radioName;
    //遍历整个单选项表
    for(i=0;i<aChoices.length;i++)   
        if(aChoices[i].checked)   
            break; //如果发现了被选中项则退出
    alert("您选中的是:"+aChoices[i].value);
}
//设置选中项
function setChoice(_num){
    var oForm = document.forms["myForm1"];
    //radioName是单选按钮的name属性值
    oForm.radioName[_num].checked = true; //其它选项的checked值会自动设置为false
}
</script>
//调用代码
<input type="button" value="获取选中项" οnclick="getChoice();" />
<input type="button" value="设置第1项被选中" οnclick="setChoice(0);" />

 

需要保证同一组单选按钮的name 属性值相同即可。

 

设置复选框

设置复选框的“全选”、“全不选”及“反选”功能。

 

<script language="javascript">
function changeBoxes(_action){
    var myForm = document.forms["myForm1"];
    //myCheckbox 为所有复选框的name属性值
    var oCheckBox = myForm.myCheckbox;
 
    for(var i=0;i<oCheckBox.length;i++)    //遍历每一个选项
        if(_action < 0)//反选
            oCheckBox[i].checked = !oCheckBox[i].checked;
        else 
            //_action为1是则全选,为0时则全不选
            oCheckBox[i].checked = _action;
}
</script>
<form name="myForm1">
<input type="checkbox" name="myCheckbox">aa
<input type="checkbox" name="myCheckbox">bb
<input type="button" value="全选" onclick="changeBoxes(1);" />
<input type="button" value="全不选" onclick="changeBoxes(0);" />
<input type="button" value="反选" onclick="changeBoxes(-1);" />
</form>

 

 

设置下拉列表框

下拉列表框的multiple 属性用于设置或获取下拉列表框是否可以选中多个选项

下拉列表框默认只能选中一项,若要设置为可以选中多项,则<select  multiple = "multiple"> 即可。

type 属性:javascript 语言根据type 属性的值获得下拉列表框select 控件的类型。

type 属性的值为:select-multiple 或 select-one (注意:下拉列表框的类型由multiple 属性控制

i >  查看下拉列表框的选项(单选项 & 多选项)

 

<script language="javascript">
function getSelectValue(_myselect){
    var oForm = document.forms["myForm1"];
    //根据参数(下拉列表框的name属性值)获得下拉菜单项
    var oSelectBox = oForm.elements[_myselect];
    //判断是单选还是多选
    if(oSelectBox.type == "select-one"){
        var iChoice = oSelectBox.selectedIndex;    //获取选中项
        alert("单选,您选中了" + oSelectBox.options[iChoice].text);
    }
    else{
        var aChoices = new Array();
        //遍历整个下拉菜单
        for(var i=0;i<oSelectBox.options.length;i++)
            if(oSelectBox.options[i].selected)//如果被选中
              //压入到数组中
              aChoices.push(oSelectBox.options[i].text);
        //输出结果
        alert("多选,您选了:" + aChoices.join());
    }
}
</script>
<form method="post" name="myForm1">
<select id="mysel" name="mysel" multiple="multiple" style="height:60px;">
    <option value="a">AA</option>
    <option value="b">BB</option>
    <option value="c">CC</option>
</select>
<input type="button" onclick="getSelectValue('mysel')" value="查看选项" />

 

 

ii >  添加下拉列表框的选项

追加新选项到末尾

 

<script language="javascript">
function AddOption(Box){ //追加选项到末尾
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[Box];
    var oOption = new Option("乒乓球","Pingpang");
    oBox.options[oBox.options.length] = oOption;
}
</script>

 

插入新选项到指定位置

 

<script language="javascript">
function AddOption(_select,_num){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[_select];
    var oOption = new Option("text值","value值");
    //兼容IE7,先添加选项到最后,再移动
    oBox.options[oBox.options.length] = oOption;
    oBox.insertBefore(oOption,oBox.options[_num]);
}
</script>
<input type="button" value="添加乒乓球" onclick="AddOption('myselect',1);" />

 

 

注意:如果直接使用insertBefore( ) 方法插入选项,将会在IE 中出现一个空选项的bug。为了解决IE 的这个bug ,只能使用先追加新选项到末尾,然后再使用insertBefore( ) 方法移动到具体位置的办法。

 

类似这样:为了跳过浏览器的某些bug 或限制,实现预定目的的小技巧,通常称之为hack 。

 

iii >  替换某一选项

 

<script language="javascript">
//替换选项
function ReplaceOption(_select,_num){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[_select];
    var oOption = new Option("text值","value值");
    oBox.options[_num] = oOption; //替换第_num 个选项
}
</script>
<input type="button" value="替换选项" onclick="ReplaceOption('selName',1);" />

 

通过oBox.options[_num] = oOption 直接将创建的新选项替换掉指定位置的选项。

 

iiii >  删除某一选项

 

<script language="javascript">
function RemoveOption(_select,_num){
    var oForm = document.forms["myForm1"];
    var oBox = oForm.elements[_select];
    oBox.options[_num] = null;    //删除选项
}
</script>
</head>
<body>
<select id="mysel" name="mysel" multiple="multiple">
......
<input type="button" value="删除选项" onclick="RemoveOption('mysel',1);" />

 

 

直接通过oBox.options[_num] = null 删除选项。

 

转自:http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html?login=1#commentform

 

转载于:https://www.cnblogs.com/jhxk/articles/1798332.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/495826.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全球机器学习领域顶尖的16家公司

来源&#xff1a;网络大数据 作者&#xff1a;Andy Patrizio摘要&#xff1a;机器学习是众多公司颇感兴趣的一个新兴领域。本文介绍了几大领先的机器学习公司&#xff0c;包括老牌技术厂商和后起之秀。机器学习是与人工智能一同急剧发展的领域。IDC预测&#xff0c;人工智能和…

突破淘宝对于 selenium 检测

From&#xff1a;https://blog.csdn.net/qq_42196922/article/details/89400988 多加一行代码&#xff0c;突破淘宝模拟登录滑块&#xff1a;http://www.imooc.com/article/285729 爬虫自动化&#xff1a;https://www.jianshu.com/p/b3b92f327374 selenium 跳过 webdriver 检…

CompletableFuture详解~allOf

当所有的阶段都完成后创建一个阶段 上一个例子是当任意一个阶段完成后接着处理&#xff0c;接下来的两个例子演示当所有的阶段完成后才继续处理, 同步地方式和异步地方式两种。 static void allOfExample() {StringBuilder result new StringBuilder();List messages Array…

AIX操作命令记录中

1.重启命令shutdown -Fr 2.查看各分区的使用情况df -sg 3.按占用空间大小降序列出/var文件夹下所有目录的空间占用情况du /var/ | sort -nr | more 4.按占用空间大小降序列出/var文件夹下所有目录和文件的空间占用情况du -a /var/ | sort -nr | more转载于:https://www.cnblogs…

18年你需要了解的15个人工智能统计数据

来源&#xff1a;网络大数据人工智能(AI)每天都在以惊人的速度增长&#xff0c;并且与此同时&#xff0c;围绕着各行业的统计数据也在发生变化。该技术在简化医疗保健行业工作流程方面取得了巨大成功&#xff0c;减少了教育部门行政任务的工时&#xff0c;同时也降低了制造业的…

Python GUI 开发工具

Python Tkinter教程&#xff08;GUI图形界面开发教程&#xff09;&#xff1a;http://c.biancheng.net/python/tkinter/ PyQt5教程&#xff1a;http://code.py40.com/face 作为 Pyhon 开发者&#xff0c;我们迟早都会碰到 图形用户界面&#xff08;GUI&#xff09;应用 开发任…

CompletableFuture详解~supplyAsync

supplyAsync 可以支持返回值。 //有返回值 public static void supplyAsync() throws Exception {CompletableFuture<Long> future CompletableFuture.supplyAsync(() -> {try {TimeUnit.SECONDS.sleep(1);} catch (InterruptedException e) {}System.out.println(&…

pandas 读写 excel

Python开发 之 Python3读写Excel文件&#xff08;较全&#xff09;&#xff1a;https://blog.csdn.net/u014597198/article/details/83104653 python读取excel&#xff08;Python处理xls&#xff09;&#xff1a;https://blog.csdn.net/chenggong2dm/article/details/44956805…

7张图了解2018物联网产业发展新趋势

来源&#xff1a;硅谷动力 作者&#xff1a;文乾摘要&#xff1a;物联网其本质上是互联网的延伸&#xff0c;利用以传感器为主的嵌入式计算机系统进行各终端之间的彼此数据交互。本篇文章用7张图片讲述了物联网应用的各个领域。随着互联网红利逐渐消失&#xff0c;“Interne…

CompletableFuture详解~异常处理

计算结果完成时的回调方法 当 CompletableFuture 的计算结果完成&#xff0c;或者抛出异常的时候&#xff0c;可以执行特定的 Action。主要是下面的方法&#xff1a; public CompletableFuture<T> whenComplete(BiConsumer<? super T,? super Throwable> actio…

知识管理≈内容管理≈文档管理≈项目文档管理

事情的起因有点偶然&#xff0c;阿杜和我聊起系统的时候&#xff0c;说我们的系统现在开发的还可以&#xff0c;就畅想了一下能否有一个桌面文档管理系统&#xff0c;问起原因&#xff0c;主要是感觉很多人不会管理自己的硬盘&#xff0c;不会管理自己的文档。 我听了也是感…

安装 Python 包时解决 Microsoft visual c++ 14.0 is required 问题

参考&#xff1a;http://www.hongweipeng.com/index.php/archives/1532/ 在 windows 上安装 scrapy 时经常会遇到这个问题&#xff0c;安装其他组件也可能会遇到。但问题解决办法都是大致相同的。 如&#xff1a;pip install scrapy 时出现&#xff1a;error: Microsoft Visua…

硅基光电子芯片:换道超车的核心技术

来源&#xff1a;光电子先导院 作者&#xff1a;周治平2018年4月16日&#xff0c;美国商务部激活了对中兴通讯的拒绝令&#xff0c;禁止美国公司向中兴通讯销售任何零部件、商品、软件和技术&#xff0c;直到2025年3月13日。这一禁令立刻使中兴通讯业务陷入休克状态&#xff…

CompletableFuture详解~join与get的区别

一.相同点&#xff1a; join()和get()方法都是用来获取CompletableFuture异步之后的返回值 二.区别&#xff1a; 1.join()方法抛出的是uncheck异常&#xff08;即RuntimeException),不会强制开发者抛出&#xff0c; 会将异常包装成CompletionException异常 /CancellationExce…

C++的流输入和输出操作

1、简单提示输入和输出 2、为格式化提供操作符和标志 3、输入和输出对象类型 4、解析输入例子&#xff08;日期确认&#xff09; 1、简单提示输入和输出 最常用的程序结合输入和输出来沟通&#xff0c;从他们信息&#xff08;输入&#xff09;中为用户呈现有用的信息&#xff0…

AI虚拟偶像:知识图谱赋予AI“生命感”

来源&#xff1a;脑极体AI是个非常有趣的词&#xff0c;不管是中文翻译的&#xff0c;还是英文的Artificial Intelligence&#xff0c;都有“生物性”的含义。一个是集结了地球顶尖智慧的“人工”&#xff0c;另一个Intelligence则专指生物拥有的智慧。不过在当今的AI风潮中&am…

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用

QT 官网&#xff1a;https://www.qt.io/zh-cn/develop 用 Python 编写安卓 APK&#xff1a;https://zhuanlan.zhihu.com/p/398126847 1、PySide6、PyQt6、PyQt5 PySide6、PySide2、PyQt5 都是基于 Qt 库&#xff0c;Qt 是一组 C 库和开发工具&#xff0c;包括图形用户界面、网…

用visio反向工程画oracle数据库表的结构图

步骤: 1、数据库----反向工程 2、在反向工程向导中选择--设置--然后选择---Microsoft--ODBC-for--oracle 3、新建数据源---选择用户数据源----Microsoft--ODBC-for--oracle4、输入用户名和数据库名5、输入数据库密码---选择需要绘制的表转载于:https://www.cnblogs.com/kokyu/a…

Mockito—参数匹配~任意

import org.mockito.Mockito;Test public void withUnspecifiedArguments() {List list Mockito.mock(List.class);//匹配任意参数Mockito.when(list.get(org.mockito.Matchers.anyInt())).thenReturn(1);//测试Assert.assertEquals(1, list.get(1));Assert.assertEquals(1, l…

该如何对「半监督学习算法」实际性应用进行评估?Google给出了新答案

原文来源&#xff1a;arXiv 作者&#xff1a;Avital Oliver、Augustus Odena、Colin Raffel、Ekin D. Cubuk、Ian J. Goodfellow「雷克世界」编译&#xff1a;KABUDA、EVA半监督学习&#xff08;Semi-supervised learning&#xff0c;SSL&#xff09;提供了一个强大的框架&…