input标签及其type属性
input标签运用场景
在网页中显示一个收集用户信息的表单，如登录，注册，身份认证等。
标签名
input通过type属性值得不同，以展现不同效果。
type属性值及其说明
| type属性值 | 说明 |
|---|---|
| text | 生成一个文本框，用于输入单行文本 |
| password | 生成一个密码框，用于输入密码 |
| radio | 生成一个单选框，用于进行多项选择选取在其中一项 |
| checkbox | 生成一个多选框，用于选取多项选择 |
| file | 文件选择，用于提交或上传文件 |
| submit | 提交按钮，用于提交功能 |
| reset | 重置按钮，用于重置界面 |
| button | 普通按钮，配合js添加相应功能 |
type的text值
在网页中显示输入单行的表单控件。
相关常用属性
placeholder占位符，显现出输入文本框的提示信息。
代码展示
1 <body> 2 <!-- 1.文本框：text --> 3 昵称：<input type="text" placeholder="请输入您的昵称"> 4 </body>
运行效果
同理密码框（type=“password”）也可以以此方法进行设置
type的radio值
在网页中显示多选一的表单控件。
相关常用属性
name
表示分组，有相同属性的单选框分为一组，一组中只能有一个被选中。
checked
表示默认选中。
代码展示
1 性别：<input type="radio" name="sex">男 2 <input type="radio" name="sex">女 3 <input type="radio" name="sex">保密<br><br>
运行效果
type的checkbox值
用于在网页中显示多选多的表单控件
相关常用属性
checked——默认选中
代码展示
1 爱好：<input type="checkbox" checked>敲代码 2 <input type="checkbox">手办 3 <input type="checkbox">动漫 4 <input type="checkbox" checked>学习 5 <input type="checkbox" checked>熬夜 6 <input type="checkbox" checked>掉头发
效果展示
type的file值
用于在网页中显示文件选择的表单控件
相关常用属性
multiple 多文件选择
代码展示
1 <input type="file" multiple>
效果展示
三个type属性值——按钮
用于在网页中显示不通功能的按钮表单控件
| type属性值 | 说明 |
|---|---|
| submit | 提交按钮，用于提交功能 |
| reset | 重置按钮，用于重置界面 |
| button | 普通按钮，配合js添加相应功能 |
注：需要配合form标签一起使用，既用form标签将表单标签包裹起来
代码展示
1 <!-- 6.1.提交按钮：submit --> 2 <input type="submit"> 3 4 <!-- 6.2.重置按钮：reset --> 5 <input type="reset"> 6 7 <!-- 6.3.普通按钮：button --> 8 <input type="button" value="普通按钮">
效果展示
select下拉菜单
使用场景
在网页中显示提供多个选项的下拉菜单空间
标签名及用法
select标签
表示下拉菜单的整体
option标签
表示下拉菜单的每一项
常见相关属性
selected属性
表示默认选中的选项
代码展示
1 所在城市<select > 2 <option selected>北京</option> 3 <option >上海</option> 4 <option >广州</option> 5 <option >深圳</option> 6 </select>
运行效果展示
textarea文本域标签
使用场景
在网页中显示可提供输入多行文本的表单控件
textare标签的常见相关属性
cols
规定文本域内可见宽度
rows
规定文本域内可见行数
注：效果展现时，右下角拖拽可以改变大小 实际开发中，通常使用CSS
代码展示
1 <textarea cols="30" rows="10"></textarea>
效果展示
label标签
使用场景
用于绑定内容与表单标签的关系
标签名及其使用方法
标签名：label
使用方法：1.使用label标签把内容包裹起来
2.在表单标签上添加id属性，并在label标签的for属性中设置对应的id属性值
代码展示
1 <input type="checkbox" id="No1"><label for="No1">打游戏</label> 2 <label > 3 <input type="checkbox">熬夜 4 </label>
此时运行代码，点击文字即可选中选项
语义化标签
没有语义的布局标签
标签名和作用
div标签
一行只显示一个div标签，单占一行
span标签
一行可以显示多个
代码展示
1 <div>一个div标签</div> 2 <div>一个div标签</div> 3 <div>一个div标签</div> 4 <span>一个span标签</span> 5 <span>一个span标签</span> 6 <span>一个span标签</span>
运行结果展示
有语义的布局标签
使用场景
HTML5新版本中，推出了一些有语义的布局标签供我们使用
标签名及用法
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
注：特点与div标签一致
浙公网安备 33010602011771号