第7天：input和label标签
今天学的不多，就只学了表单元素中的input和label标签。搬了房子，收拾了一下东西，太累了，所以没有学很多。明天还上班，今天就先到这。
一、input
input标签type属性有以下几个：
text、password、textarea、radio、checkbox、button、submit、reset
按钮
1、<input type="button" value="确定">
2、<input type="submit" > 提交
3、<input type="reset" > 重置
二、label标签
checked默认被选择;radio单选name属性必须一致。
<input type="radio" name="sex" id="nan" checked="checked"/><label for="nan">男</label>
<input type="radio" name="sex" id="nv"/><label for="nv">女</label>
复选框也如同
<input type="checkbox" id="kk"/><label for="kk">10天内免登陆</label>
所有表单元素都有label，label标签作用于选择框和文字，简言之，就是用户点击选择框和文字都可以选择内容
下面是小练习，没有添加样式，有点丑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
</head>
<body>
<div>
用户名：<input type="text"><br/><br/>
密 码：<input type="password"><br/><br/>
性 别：<input type="radio" name="sex" id="nan" checked="checked"><label for="nan">男</label>
<input type="radio" name="sex" id="nv"><label for="nv">女</label><br/><br/>
爱 好：<input type="checkbox" id="chi" checked="checked"><label for="chi">吃</label>
<input type="checkbox" id="shui" checked="checked"><label for="shui">睡</label>
<input type="checkbox" id="wan" checked="checked"><label for="wan">玩</label><br/><br/>
城 市：<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select><br/><br/>
个人简介：<input type="textarea"><br/><br/>
<input type="button" value="确定">
<input type="submit">
<input type="reset">
</div>
</body>
</html>
运行效果：
第7天：input和label标签的更多相关文章
- input:checked + label用法
input:checked ~ label :相邻同胞选择器,选择被选中的input标签后 所有的label标签［input 和 label标签有共同的父元素］: input:checked + ...
- label、input、table标签
<label>标签 <form> <label for="male">Male</label> <input type=&qu ...
- label标签内含有input元素，点击事件会触发两次
**label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //h ...
- Label标签 自动触发onclick，点击内部的Input
最近项目遇到了一个bug,点击外层元素会直接触发元素内部的input框.(外层元素用的是label包裹的).找了很久才发现是label标签造成的. label定义和用法: label 标签为 inpu ...
- 巧妙利用label标签实现input file上传文件自定义样式
提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可 但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同 我们往 ...
- 使用<label>标签修改input[type="checkbox"]的样式
因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...
- input标签与label标签的“合作关系”
一直忽略了input和label的关系.一次在做自定义单选框的时候又重新捡起来这对“兄弟”. label的for属性和input的id值一致的话,input和label就会组成一个组.例如: < ...
- HTML label标签的一点理解
label标签为input元素定义标注. label元素不呈现任何特殊效果.不过他为鼠标用户改进了可用性.如果你在label元素内点击文本就会触发此控件.就是说当用户选择该标签是,浏览器就会自动的将焦 ...
- HTML <label> 标签
定义:<label> 标签为 input 元素定义标注(标记). 用法: label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本, ...
随机推荐
- jsp注册页面验证，easyui的jsp+js表单验证
1.1下面的代码是写在Js里面的,就直接写进去不用什么其他东西,这样一个表单验证就好了(1.2图) $.extend($.fn.validatebox.defaults.rules, { phone: ...
- Spring Boot 系列（五）web开发-Thymeleaf、FreeMarker模板引擎
前面几篇介绍了返回json数据提供良好的RESTful api,下面我们介绍如何把处理完的数据渲染到页面上. Spring Boot 使用模板引擎 Spring Boot 推荐使用Thymeleaf. ...
- 微信小程序多宫格抽奖
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...
- django MVC模式 数据库的操作mysql
介绍:本节课我们继续学习djangoWEB框架的开发,这节课主要是学习如何访问数据库,django如何自动为我们创建好表结构等相关内容. 1.首先我们打开settings.py找到DATABASES关 ...
- String to Integer (atoi) - 字符串转为整形，atoi 函数（Java ）
String to Integer (atoi) Implement atoi to convert a string to an integer. [函数说明]atoi() 函数会扫描 str 字符 ...
- Effective Objective-C 2.0 Tips 总结 Chapter 3 & Chapter 4
Chapter 3 接口与 API 设计 Tips 15 使用前缀避免明明空间冲突 Objective-C 没有命名空间,所以我们在起名时要设法避免命名冲突 避免命名冲突的方法就是使用前缀 应用中的所 ...
- 浮点数的陷阱--double i != 10 基本都是对的，不管怎么赋值
#include <stdio.h>int main(){ double i; for(i = 10; i != 10, i < 12; i += 0.1) ...
- linux下文件查找工具--find
常用的文件查找命令有:which,locate,find 1.which命令 查找二进制数或二进制命令,由PATH给出 2.loacte 特点: 1.非实时,每天在系统上生成数据库,通过数据库查询 2 ...
- 回味Python2.7——笔记1
一.基本知识 1.一个值可以同时赋给几个变量: >>> x = y = z = 0 # Zero x, y and z >>> x 0 >>> y ...
- Spring boot——logback 基础使用篇（一）
1 简单日志配置 spring boot内部使用Commons Logging来记录日志,但也保留外部接口可以让一些日志框架来进行实现,例如Java Util Logging,Log4J2还有Logb ...