表单--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对象 的相关文章

  • 在 Angular 中使用 Vue 组件

    我有一个用 Vue 构建的项目 我想在 Angular 应用程序中重用 Vue 应用程序中的组件 这样我就不必从头开始重建每个组件 我在medium上看到了这个教程 如何在 Angular 应用程序中使用 Vue 2 0 组件 https
  • angularjs:如何向资源对象添加缓存?

    在 http 中添加缓存非常简单 通过传递cache true http docs angularjs org api ng http https docs angularjs org api ng service 24http有缓存选项
  • 如何通过单击图像预览上的“x”从文件输入中删除图像?

    我目前有一个文件输入 一旦用户上传图像 就会显示图像预览 在图像预览上 有一个 x 可以从列表中删除图像预览 单击此 x 后 有什么方法可以从输入中的文件集中删除图像吗
  • 如何更改传单中功能集的样式?

    我正在看等值区域的例子 https leafletjs com examples choropleth https leafletjs com examples choropleth 这是他们使用的数据源 type Feature prop
  • 如何使用 selenium 和 Mocha 获取 xPath() 选择的锚标记的文本

    我已经成功选择了 a 标签 我想显示锚标记的文本 但无法这样做 我正在使用 selenium mocha javascript 和 phantomJS 这是我的脚本 详细 var assert require assert var test
  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • Jquery从下拉列表中获取所选值的id

    我有一个下拉列表 可以从数据库获取值 如下所示 get getJobs function jobs seljobs jobs var i 0 jobs forEach function n alert job id n id 32 67 4
  • 使用 moment.js 检查输入日期是否为星期一

    好吧 我想检查日期是否是星期一 例如 var myDate new Date moment myDate DD MM YYYY dayIs monday 在我的国家 一周的第一天是星期一 所以 我真的想检查输入日期是否是一周的开始 我尝试使
  • 如何仅在 NextJS 站点构建期间使用 getInitialProps?

    当使用 NextJS 构建静态站点时 我想要getInitialProps方法仅在构建步骤期间触发 而不是在客户端上触发 在构建步骤中 NextJS 运行getInitialProps 方法 https nextjs org docs fe
  • 即使我可以监视其他方法,也无法监视事件处理程序

    我想使用 Jest Jasmine Enzyme 测试 React 中的事件处理程序 MyComponent js import React from react class MyComponent extends React Compon
  • 检查 touchend 是否在拖动后出现

    我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend
  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在
  • 未捕获的错误:找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http
  • 如何将函数内的捕获错误传递给父级

    我有这几行代码示例 想知道下面的逻辑到底如何 try var response child console log why here catch err console log should show this err function c
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 使用异步调用时如何从 javascript 更新元刷新?

    我有一个系统 它使用元刷新来注销页面 该系统会在空闲用户后进行清理 不用担心 服务器也会导致会话超时 我开始通过 ajax 进行一些操作 不是真正的 xml 但这不是重点 我可以运行从异步请求返回的javascript 所以我想知道是否可以
  • KeyboardAvoidingView - 隐藏键盘时重置高度

    我正在使用 React NativeKeyboardAvoidingView设置我的高度View当显示键盘时 但是当我关闭应用程序中的键盘时 视图的高度不会变回原来的值
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没

随机推荐

  • 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 中 页面上的每一对