表单--form对象

2023-10-27

      在Javascript 中,页面上的每一对<form> 标记都解析为一个对象,即form 对象。所有的表单元素都支持type、name、form、value属性。

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

      每一个表单元素的文字描述都应该使用<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 选择器的使用等。


       submit()方法可以使用JS调用这个方法将表单提交。如果使用submit( ) 方法来提交表单,则不会触发<form> 表单元素的onsubmit 事件,这是与用<input  type="submit">提交元素不同的地方。

注意:

        不要将表单中项name命名为submit。


     让表单不能提交成功(这样,有条件不成立时则不提交):onsubmit事件,提交时触发,如果返回false,则不提交,如果返回true,则提交。

如:

html结构:

<form name="frm" action="reg.php" method="post" οnsubmit="return yan()">
	username:<input type="text" name="username" value=""><br>
	password:<input type="text" name="password" value=""><br>
	<input type="submit" name="dosubmit" value="登录"><br>
</form>
js:

<script type="text/javascript">
	function yan(){
		var username = document.frm.username;
		var password = document.frm.password;
		if(username.value==""){
			alert("用户名不能为空");
			return false;
		}
		if(password.value==""){
			alert("密码不能为空");
			return false;
		}
		return true;
	}
</script>



本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

表单--form对象 的相关文章

随机推荐

  • windows查看服务器启动日志文件,windows server 2008 如何查看异常重启日志

    windows7系统下一些常用工具的总结 1 查看计算机的基本信息 计算机 右键 属性 快捷键 Win Pause 2 查看计算机的详细信息 开始菜单 所有程序 附件 系统工具 系统信息 运行命令 msinfo32 3 定制计 HDU 40
  • Java 哈希函数 哈希表 动态容量 链地址法 简介+实现

    简介 哈希函数 整型 浮点型 字符串型 Java 中的hashCode 哈希冲突 时间复杂度 动态空间处理 适用范围 实现 简介 实现哈希表有两个主要的问题 一个是解决哈希函数的设计 一个是哈希冲突的处理 哈希函数 键通过哈希函数可以得到一
  • UVA-1354 天平难题 题解答案代码 算法竞赛入门经典第二版

    GitHub jzplp aoapc UVA Answer 算法竞赛入门经典 例题和习题答案 刘汝佳 第二版 这道题需要 1 遍历二叉树的每种构成方式 我这里每次把当前所有结点列出 然后遍历选取两个组合构成一个新结点 原来的结点剔除 新结点
  • 17张经典动态图带您看懂电动机运行原理!电机一共有多少种?

    电动机 电动机是一种旋转式电动机器 它将电能转变为机械能 它主要包括一个用以产生磁场的电磁铁绕组或分布的定子绕组和一个旋转电枢或转子 在定子绕组旋转磁场的作用下 其在电枢鼠笼式铝框中有电流通过并受磁场的作用而使其转动 这些机器中有些类型可作
  • php弹窗24小时一次,javascript 24小时弹出一次的代码(利用cookies)_广告代码

    function jb51tuitan if getCookie jb51popped 要执行的代码或一些操作 setCookie jb51popped ok 写入cookies表示已经执行过了 alert ok jb51tuitan fu
  • spring mvc 集成freemarker模板

    主要使用到的jar 文件 spring mvc freemarker jar 第一步 spring mvc 集成 freemarker
  • SQL如何进行帕累托分析?(窗口函数、累计百分比分类)

    帕累托分析法是指定决策的统计方法 包含按降序排序的列和表示累积总百分比的线条 面试题 有一张 学生成绩表 包含3个字段 学号 课程 成绩 问题 找出每门课程A类和B类的学生 判断标准是累计占比 0 60 的记为A类 60 85 记为B类 解
  • GPIO模块功能测试

    目录 1 功能描述 2 端口复用 3 如何操作 4 测试代码分析 4 1GPIO VERIFICATION01 GPIO复位值验证 4 2GPIO VERIFICATION02 GPIO读写验证 4 3GPIO VERIFICATION03
  • WebGL射线拾取模型——八叉树优化

    经过前面2篇WebGL射线拾取模型的文章 相信大家对射线和模型面片相交的原理已经有所了解 那么今天我们再深入探究关于射线拾取的一个问题 那就是遍历场景中的所有与射线相交的模型的优化问题 首先我们来复习一下射线拾取模型的原理 请看下图 我们从
  • ELK 日志系统收集K8s中日志

    容器特性给日志采集带来的困难 K8s弹性伸缩性 导致不能预先确定采集的目标 容器隔离性 容器的文件系统与宿主机是隔离 导致日志采集器读取日志文件受阻 日志按体现方式分类 应用程序日志记录体现方式分为两类 标准输出 输出到控制台 使用kube
  • 人工智能算法 上市公司,人工智能算法公司排名

    人工智能上市公司龙头股票有哪些 一 科大讯飞 002230 属于人工智能稀缺标的 多领域布局苦尽甘来 业绩拐点临近 二 浪潮信息 000977 人工智能基础设施提供商 目前具备业界最全CPU服务器产品线 三 中科曙光 603019 含着金钥
  • 第十二章 内中断

    引言 本书主要讲解硬件中断 12 1 内中断的产生 12 2 中断处理程序 12 3 中断向量表 中断向量表在内存中存放 对于8086PC机 中断向量表指定存放在内存地址0处 从内存0000 0000到0000 03FF的1024个单元中存
  • 微信小程序npm构建

    步骤 一 初始化 npm init y 自动生成生成package json文件 二 project config js配置项 packNpmManually false packNpmRelationList packageJsonPat
  • error: No rule to make target ‘...‘. Stop. 解决方案

    一 error 二 解决方案 第一步 删除 xxx pro 文件中的 RESOURCES xxx qrc 然后 CTRL S 保存文件 第二步 重新添加资源文件 注 文件名不要使用中文 以避免未知的错误 三 环境
  • 类成员函数创建线程

    include
  • iOS--伪后台(安卓与iOS区别)

    1 后台机制方面的区别 提到后台 大家应该会很容易想到安卓的真后台了吧 所谓真后台 就是像PC一样 将应用保留在RAM中 当你使用HOME键退出应用 程序实际上并没有完全退出 而是被系统挂在了后台 比如一些聊天软件 之所以关闭后依然能够收到
  • 注意力机制详述

    学习本部分默认大家对RNN神经网络已经深入理解了 这是基础 同时理解什么是时间序列 尤其RNN的常用展开形式进行画图 这个必须理解了 这篇文章整理有关注意力机制 Attention Mechanism 的知识 主要涉及以下几点内容 1 注意
  • Django 项目使用 Bootstrap 的导入方式

    Django 项目中导入 Bootstrap 是固定的 补充 1 Django 项目的 html 文件中必须先写 meta 再引入其他内容 并且对于导入 JS 的先后顺序有比较严格的要求 补充 2 Django 项目表单中使用POST的方法
  • C++ 对象模型

    C 对象模型 虚函数机制 实现执行器绑定 虚基类机制 实现多继承体系中只有一个共享实体 非静态数据成员放在 object 之中 静态数据成员放在 object 之外 静态和非静态成员函数都放在 object 之外 每个类会产生一堆指向虚函数
  • 表单--form对象

    在Javascript 中 页面上的每一对