label对表单的拓展

2024-10-22

label表单的关联性

<input type="checkbox" id="cr" /> <label for="cr">点击关联复选框</label> input 其他类型也可以用label来关联例如:type="radio"

HTML5对表单进行了许多的改进,在这篇文章中,我选择了其中个人认为很有趣的三个变化:自动聚焦,对button元素的改进,把表单元素与非父元素的form表单挂钩进行简单的介绍. 1. 自动聚焦自动聚焦的主要应用点是:我们可以为某个表单元素,如input设置一个autofocus属性,这样在这个页面刚刚加载出来的时候,这个input元素就会自动处于被选中的状态,直接可以进行输入,省去了用户手动选择的过程.这个特性使用js也可以做到,但是使用这个新特性无疑更加简单高效. 注意,autofocus属

HTML5对表单的约束验证

在HTML5中增加了许多新的功能,用于表单提交到服务器之前对表单进行数据的验证(抢了javascript的饭碗),有了这些功能,即便是javascript没有加载进来还是可以确保基本的验证.换句话说,浏览器自己会根据标记中的规则执行验证,然后自己显示适当的错误消息.当然,这些功能既然是来自HTML5 的,当然只能在支持HTML5这部分的内容的浏览器才有效,所以请我们看向未来的眼光来学习下面的这些个功能. 必填字段在表单中指定required字段,凡是标注有required的字段在提交表单时值都

fieldset 标签 -- 对表单进行分组

转自:https://xhmaomy-163-com.iteye.com/blog/1066977 fieldset——一个不常用的HTML标签 fieldset 标签 -- 对表单进行分组在form表单中,我们可以对form中的信息进行分组归类,如注册表单的form,我们可以将注册信息分组成基本信息(一般为必填) 详细信息(一般为可选) 那我们如何更好的来实现呢?我们可考虑在表单form中加入下面两个标签: fieldset:对表单进行分组,一个表单可以有多个fieldset. legen

Element-ui 中对表单进行验证

Element-ui 中对表单(Form)绑定的对象中的对象属性进行校验如果是直接绑定属性,是可以的,但是绑定对象中的属性就需要特别处理,需要在rules中添加双引号 " "或者'' <template> <div class="about"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-wid

HTML——使用表格对表单进行布局

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3Vuc2h1bWlu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=""> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

jQuery（6）——jQuery对表单、表格的操作及更多应用

jQuery对表单.表格的操作及更多应用 [表单应用] 一个表单有表单标签.表单域及表单按钮三个基本部分. 单行文本框应用:获取和失去焦点改变样式. 也可以用CSS中的伪类选择符来实现,但是IE6并不支持除超链接元素之外的:hover伪类选择符.css与jQuery的对比: //css代码 input:focus ,textarea:focus{ border:1px solid #f00; background:#fcc; } //jquery代码 $(function(){ $(":inpu

angularjs通过ng-change和watch两种方式实现对表单输入改变的监控

angularjs通过ng-change和watch两种方式实现对表单输入改变的监控直接上练习代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>

如何使用AngularJS对表单提交内容进行验证

AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等……使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证. AngularJS对表单中常用的验证操作 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine

jQuery 对表单、表格的操作及更多应用-简略笔记

[jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的缩小及放大(高度变化)等功能:(也可以利用滚动条实现高度变化:利用scrollTop) (3)在复选框中可以实现对复选框进行全选.反选.和全不选等操作: (4)在下拉框中可以实现左边的内容添加到右边等典型的操作: (5)还可以实现网页中的表单验证操作. 以上是利用jQuery对网页的典型操作,具体

（十）jQuery对表单、表格的操作

一.表单应用 1.HTML中的表单大致由三部分组成 (1).表单标签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择器和文件上传框等. (3).表单按钮:包括提交按钮.复选按钮和一般,用于数据传递服务器上或者取消传送,还可以用来控制其他定义了处理脚本的处理工作.2.单行文本框: <fieldset></fieldset>使表单被框起来,form的值与input标签的值一样.3.多

js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化

js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化一.总结一句话总结:如果用ajax传递表单的数据,如果不进行表单的序列化,要一个参数一个参数的写,太麻烦,序列化的话,一句代码搞定.data:$('form').serialize(),这样一句话解决复杂的表单ajax的post传值过程. 1.表单序列化函数是什么? $(selector).serialize()和serializeArray() 24 <script> 25 $(function(){ 26 $('f

JS-中对表单处理

一.表单的基本介绍 1. HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是HTMLFormElement 类型. HTMLFormElement 继承了 HTMLElement, 因此它拥有 HTML 元素具有的默认属性,并且还独有自己的属性和方法: HTMLFormElement 属性和方法属性或方法说明 acceptCharset 服务器能够处理的字符集 action 接受请求的 URL elements 表单中所有控件的集合 en

jQuery对表单的操作

表单应用一个表单有3个基本组成部分: 表单标签:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法表单域:包含文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等表单按钮:包括提交按钮.复位按钮和一般按钮.用于将数据传送到服务器上或者取消传送,还可以用来控制其他定义了处理脚本的处理工作. (本次主要讲解jQuery在表单域中的应用) 单行文本框:单行文本框是表单域中最基本的元素,这次介绍--获取和失去焦点改变样式 <!DOCTYPE html> &

第5章 jQuery对表单、表格的操作及更多应用

本章主要是对前面4章的小结和应用. 一. 表单form应用表单分为3个组成部分 (1)form标签表单可包含文本域,复选框,单选按钮等等.表单用于向指定的 URL 传递用户数据. (2)表单域 --文本框.密码框(password),隐藏域,多行文本域(textarea),复选框(checkbox),单选框(radio),下拉框(select)文件上传框 (3)表单按钮 --提交按钮(submit).复位(reset),一般按钮(button) 1.单行文本框(input type="tex

【CSS系列】对表单和数据表格应用样式

表格特有的元素: 1.summary和caption caption用作与表格的标题.summary应用于表格标签,用来描述表格的内容,于image标签的alt文本相似. 2.thead tbody 和tfoot 这3个标签可以让开发人员将表格划分为逻辑部分. 行和列标题应该使用th标记而不是td,但是如果某些内容既是标题又是数据,那么仍然应该使用td,表格标题可以设置值为row或col的scope属性,定义他们是行标题还是列标题.他们还可以设置值rowgroup和colgroup,表示他们与多

onsubmit对表单的拦截

今天遇到一个问题:在对同name 的input 表单时判断其值是否有效用了each判断当初错误的做法: function check_goods() { var regs = /^\d+$/; $("form[name='event'] input.goods_id").each(function(){ if($(this).val() == '' || !regs.test($(this).val())) { alert('请输入必要商品信息:id值和商品件数'); retur

JS对表单的操作

JS对表单中的style的操作,包括复选框技术废话不多说直接上文件代码!!! 功能:全选\反选,鼠标监测变颜色 <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <table border="1" width="900px" align="center&qu

提交表单之前对表单进行检查的方法 onsubmit="return checkSubmit();"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

5.1 《锋利的jQuery》jQuery对表单的操作

获取焦点和失去焦点改变样式改变文本框/滚动条高度复选框应用下拉框应用表单验证 tip1: 注意使用<label>的for标签,对应input的id.(for 属性规定 label 与哪个表单元素绑定.) tip2: 注意:jquery从1.6版本开始,哪些属性应该用attr()访问,哪些应该用prop()访问. 第一个原则:只添加属性名称该属性就会生效应该使用prop(); 第二个原则:只存在true/false的属性应该使用prop(); 按照官方说明,如果是设置disabled和c

Jquery对表单、表格的操作以及应用

表单的应用 (1)表单标签:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法 (2)表单域:包含文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框.和文件上传框 (3)表单按钮:包括提交按钮.复位按钮和一般按钮,用于将数据传送到服务器上或者取消传送,还可以用来控制其他定义了处理脚本的处理工作. 5.1．1单行文本框获取和失去焦点改变样式 <label> 标签为 input 元素定义标注(标记). label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进