今天学的不多，就只学了表单元素中的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. js获取客户端MAC地址

    最近遇到一个需求,医院要求呼叫中心账号必须对应MAC地址,也就是说该MAC地址必须和呼叫中心账号对应才可使用,这可就难道我了,这需求就要求每次都判断用户登录的电脑MAC地址是否有呼叫中心账号,当然只针 ...

  2. C#常用8种排序算法实现以及原理简介

    public static class SortExtention { #region 冒泡排序 /* * 已知一组无序数据a[1].a[2].--a[n],需将其按升序排列.首先比较a[1]与a[2 ...

  3. C# 实现语音听写

    本文系原创,禁止转载. 分享如何使用c#对接科大讯飞语音听写服务,简单高效地实现语音听写. 实现语音听写主要分为录音和语音识别两部分:录音是指获取设备声卡端口的音频数据并将之保存为音频文件,语音识别就 ...

  4. JDBC&&c3p0、事务、批处理、多线程 于一体的经典秘方QueryRunner

    目录: 基础篇_功能各自回顾 JDBC基础代码回顾(使用JdbcUtils工具简化) c3p0数据库连接池的使用(使用JdbcUtils工具简化) 大数据的插入(使用c3p0+JdbcUtils工具简 ...

  5. Linux下protobuf的编译与安装【各种奇葩问题】

    1.下载源码 首先,从github上下载protobuf的源码,地址:https://github.com/google/protobuf,我选择下载2.5.0版本. 2.编译protobuf 2.1 ...

  6. ES6关于Unicode的相关扩展

    前面的话 字符串是编程中重要的数据类型,只有熟练掌握字符串操作才能更高效地开发程序.JS中的字符串String类型是由引号括起来的一组由16位Unicode字符组成的字符序列.在过去,16位足以包含任 ...

  7. React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端 ...

  8. 机器学习 —— 类不平衡问题与SMOTE过采样算法

    在前段时间做本科毕业设计的时候,遇到了各个类别的样本量分布不均的问题——某些类别的样本数量极多,而有些类别的样本数量极少,也就是所谓的类不平衡(class-imbalance)问题. 本篇简述了以下内 ...

  9. ubuntu中vim下按上下左右键时输入A、B、C、D的问题

    ubuntu下使用vi 进行编辑文件时,按上下左右键时,会输入A.B.C.D,这个用起来很不方便.网上查得此问题的原因是: ubuntu系统自带的 vi 不完整导致,解决方法:安装完整的vi $ su ...

  10. android rss阅读器开发一点小技巧

    这几天一直在学习开发Rss阅读器,遇到一个很坑的问题,InputSource这里总是出错.弄了好久,终于让我找到一个解决方法----看代码: new Thread(){ @Override publi ...