3-4. Label标签
2017-11-09 本文已影响8人
一Left一
1、将没有关联的文字和输入框等关联起来，点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
- <label> 标签为 input 元素定义标注（标记）。
- label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
- 借助Label标签可以实现相关的绑定
2、绑定格式："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
- 将文字利用label标签包裹起来
- 给输入框添加一个id属性
- 在label标签中通过for属性和输入框中的id进行绑定即可
<label for="account">账号:</label><input type="text" id="account">
格式2: 直接将文字和表单元素用Label包裹
<body>
<!--
form: 是一个复合标签
格式:
<form>
相关表单元素/标签/标记
</form>
相关元素/标签/标记:
input: 输入 (文本域,密码域,单选框,复选框),通过type属性进行制定
非input元素
属性:
action: 是为了制定把收集的信息发送到的地址, 如果是网络地址一定要加上协议:(http://)
注意点:
1. 所有表单元素,必须要写在form标签之内
-->
<form action="">
<!--
input 标签
type: 指定输入类型
value: 设置默认的值
不会自动换行
name: 告诉服务器,收集的哪一个信息,只有表单元素具备name属性的时候,才会把相应的信息发送到服务器
-->
<!--1,文本域,单行
type="text"
type: 指定输入类型
value: 设置默认的值
placeholder: 提供默认的提示信息,没有输入文字的,会出现
-->
请输入账户: <input type="text" placeholder="务必输入汉语" name="name">
<!--
2.密码域:
type: password
-->
<br>
请输入密码: <input type="password" value="1235456" name="ps">
<!--
3. 单选框
type: radio:收音机
如果没有指定值,默认就是on/off,为了服务器辨别,指定value值
注意:要实现单选的功能,要指定name属性相同的值
-->
<br>
性别: 男<input type="radio" name="sex" value="male"> 女<input type="radio" name="sex" value="fmale">
<!--
4. 复选框
type: checkbox
要指定相同的name值
如果没有指定值,默认就是on/off,为了服务器辨别,指定value值
-->
<br>
兴趣爱好:
篮球<input type="checkbox" name="love" value="basketball">
排球<input type="checkbox" name="love" value="pai">
乒乓球<input type="checkbox" name="love" value="ping">
铅球<input type="checkbox" name="love" value="qian">
选择文件:<input type="file">
<input type="submit">
</form>
</body>
图片.png
