input标签/复选框/单选框点击文字有效果
来源:互联网 发布:社交网络 豆瓣 编辑:程序博客网 时间:2024/05/17 23:09
先来测试一段代码,点击文字有效果的会用红色标注!
<body>
<label><input type="checkbox"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="checkbox"/>
沪深A股
</label>
<div>
<input type="checkbox"/>
<label>沪深A股</label>
</div>
<div>
<input id="checkboxId" type="checkbox"/>
<label for="checkboxId">沪深A股</label>
</div>
<div for="checkboxId">
<input id="checkboxId" type="checkbox"/>
沪深A股
</div>
<input id="checkboxId" type="checkbox"/>
<div for="checkboxId">
沪深A股
</div>
<p>
<label>
<input type="button" value="沪深A股"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="checkbox"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="file"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="image"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="password"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="radio"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="reset"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="submit"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="text"/>
<span>沪深A股</span>
</label>
<p>
<label>
<input type="hidden"/>
<span>沪深A股</span>
</label>
</body>
为什么要选择label标签做例子,请看:http://www.w3school.com.cn/tags/tag_label.asp
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
首先来说下1-6为什么只有1、2、4有效果!
要使label有效果,要么放在label内,要么用id告诉label,除了label外我们还用了其他标签与label的for=”id"显然没有效果,这个功能是lablel独有的。
除了复选框,还有其他的input标签做实验,只有hidden隐藏的看不出点击文字有效果外,均点击文字有效果。
(建议使用第一种input,因为节省代码,改变文字部分时也不会很麻烦。)
(不要使用第四种,因为要写两个事件)
(一、二只要给input写事件label就会跟着相应了)
(建议使用第一种input,因为节省代码,改变文字部分时也不会很麻烦。)
(不要使用第四种,因为要写两个事件)
(一、二只要给input写事件label就会跟着相应了)
1 0
- input标签/复选框/单选框点击文字有效果
- 设计input搜索框提示文字点击消失的效果
- 点击文字选中单选框/复选框 (模拟程序功能)
- zTree点击文字勾选复选框
- 设计input搜索框提示文字点击消失的效果,提示文字与输入显示不同----->特别推荐
- input输入框点击文字消失
- 点击文字选中的单选和复选框
- ztree 点击文字也可以选中前面的复选框
- 自定义一个图片加文字button,点击有效果
- html中input文本框,初始里边有文字提示,当点击时,文字消失
- input内文字点击消失
- html中input文本框,初始里边有文字提示,当点击输入文字时,原文字消失
- 复选框、单选框与文字对齐问题
- input输入框获取js点击文字内容
- iOS 自定义view 是上面文字某区域有点击事件和点击背景效果
- 文字有阴影效果
- input 标签实现带提示文字的输入框
- input标签输入框点击时出现默认边框
- Spring加载完毕时,初始化参数
- 对拉格朗日乘子法的理解
- [javase学习笔记]-9.1 继承
- YTU 2916: Shape系列-2
- 使用Autolayout实现UITableView的Cell动态布局和高度动态改变
- input标签/复选框/单选框点击文字有效果
- iTOP-4412开发板Android操作系统源码编译过程全纪录
- c++ + opencv + linux下加载文件(图片或级联分类器)路径的问题
- 用PopWindow仿iOS照片上传的dialog
- Android Studio 9n图片相关问题
- SSL连接建立过程分析(1)
- 使用JS实现导出功能1
- 如何学习Unity3d开发,菜鸟在线有妙招!
- Notepad++设置运行Python程序