今天学的不多，就只学了表单元素中的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标签的更多相关文章

  1. input:checked + label用法

    input:checked ~ label   :相邻同胞选择器,选择被选中的input标签后 所有的label标签［input  和 label标签有共同的父元素］: input:checked + ...

  2. label、input、table标签

    <label>标签 <form> <label for="male">Male</label> <input type=&qu ...

  3. label标签内含有input元素，点击事件会触发两次

    **label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //h ...

  4. Label标签 自动触发onclick，点击内部的Input

    最近项目遇到了一个bug,点击外层元素会直接触发元素内部的input框.(外层元素用的是label包裹的).找了很久才发现是label标签造成的. label定义和用法: label 标签为 inpu ...

  5. 巧妙利用label标签实现input file上传文件自定义样式

    提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可    但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同   我们往 ...

  6. 使用<label>标签修改input[type="checkbox"]的样式

    因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...

  7. input标签与label标签的“合作关系”

    一直忽略了input和label的关系.一次在做自定义单选框的时候又重新捡起来这对“兄弟”. label的for属性和input的id值一致的话,input和label就会组成一个组.例如: < ...

  8. HTML label标签的一点理解

    label标签为input元素定义标注. label元素不呈现任何特殊效果.不过他为鼠标用户改进了可用性.如果你在label元素内点击文本就会触发此控件.就是说当用户选择该标签是,浏览器就会自动的将焦 ...

  9. HTML <label> 标签

    定义:<label> 标签为 input 元素定义标注(标记). 用法: label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本, ...

随机推荐

  1. JAVA中Socket的用法模拟服务端和客户端

    <看透springMvc源代码分析与实践>学习笔记 Socket分为ServerSocket和Socket两个大类 ServerSocket用于服务端,可以通过accept方法监听请求,监 ...

  2. Akka（13）： 分布式运算：Cluster-Sharding-运算的集群分片

    通过上篇关于Cluster-Singleton的介绍,我们了解了Akka为分布式程序提供的编程支持:基于消息驱动的运算模式特别适合分布式程序编程,我们不需要特别的努力,只需要按照普通的Actor编程方 ...

  3. 我眼中的ASP.NET Core之微服务 (二)

    前言 接上一篇. 上一篇未完待续的原因是当时刚好是6-30号晚上马上12点了还没写完,然后我想赶在7月1号之前发出去,所以当时就发了.然后在发的时候出了一点问题,结果发出去的时候刚好是 7.1号 00 ...

  4. 封装游戏配表读取和存储(xml格式);支持行列存取,标题存取

    做服务器肯定会涉及到游戏配表,而读取游戏配表是一个必备技能; 之前一直都是采用TinyXml直接读,匹配字符串,每次加个表都是一大坨代码,看着也是心累; 因此利用了闲暇的时间封装了一个 xml配置表 ...

  5. Java面向对象之抽象类，接口

    抽象类: 含有抽象方法的类被声明为抽象类 抽象方法由子类去实现 含有抽象方法的类必须被声明为抽象类 抽象类被子类继承,子类(如果不是抽象类)必须重写抽象类中的所有抽象方法 抽象方法: 声明而未被实现的 ...

  6. RxSwift 系列(六) -- Mathematical and Aggregate Operators

    前言 本篇文章将要学习RxSwift中数学和集合操作符,在RxSwift中包括了: toArray reduce concat toArray 将一个Observable序列转化为一个数组,并转换为一 ...

  7. Java 接口-抽象类解析

    对于面向对象编程,抽象是它的三大特征(抽象.继承.多态)之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类. 这两者既相似又存异.诸位在初学的时候也会傻傻分不清接口与抽象类的区别,大 ...

  8. oracle-plsql序列问题

    场景:用来汇总工作中数据库的异常问题! 1 问题 序列在会话中未定义 解决: 创建Sequence后直接查询它的当前值(CURRVAL)会出错,要先调用Sequence对象.NEXTVAL,才能查询当 ...

  9. （转）OGNL表达式介绍

    OGNL是Object-Graph Navigation Language的缩写,它是一种功能强大的表达式语言(Expression Language,简称为EL),通过它简单一致的表达式语法,可以存 ...

  10. Android异步处理技术

    前言: 在移动端开发中,我们必须正确处理好主线程和子线程之间的关系,耗时操作必须在子线程中完成,避免阻塞主线程,导致ANR.异步处理技术是提高引用性能,解决主线程和子线程之间通信问题的关键. 通常在如 ...