1.input标签:
场景:在网页中显示收集用户信息的表单效果,如:登录页、注册页
标签名: input
-
input标签可以通过type属性值的不同,展示不同效果
-
type属性值:
标签名 type属性值 说明 input text 文本框,用于输入单行文本 input password 密码框,用于输入密码 input radio 单选框,用于多选一 input checkbox 多选框,用于多选多 input file 文件选择,用于之后上传文件 input submit 提交按钮,用于提交 input reset 重置按钮,用于重置 input button 普通按钮,默认无功能,之后配合js添加功能
1.文本框:
属性名 | 说明 |
---|---|
placeholder | 占位符。提示用户输入内容的文本 |
2.单选框:
场景:在网页中显示多选一的单选表单控件
type属性值: radio
常用属性:
属性名 | 说明 |
---|---|
name | 分组。有相同name属性值的单选框为一组, 一组中同时只能有一个被选中 |
checked | 默认选中 |
注意点:
- name属性对于单选框有分组功能
- 有相同name属性值的单选框为一组, 一组中只能同时有一个被选中
3.多选框:
场景:在网页中显示多选的多选表单控件
type属性值: checkbox
常用属性:
属性名 | 说明 |
---|---|
name | 分组。有相同name属性值的多选框为一组 |
checked | 默认选中 |
注意点:
- name属性对于多选框有分组功能
- 有相同name属性值的单选框为一组, 一组中能同时有多个被选中
3.文件选择:
场景:在网页中显示文件选择的表单控件
type属性值:file
属性名 | 说明 |
---|---|
multiple | 多文件选择 |
4.按钮系列:
场景:在网页中显示不同功能的按钮表单控件
type属性值:
标签名 | type属性值 | 说明 |
---|---|---|
input | submit | 提交按钮。点击之后提交数据给后端服务器 |
input | reset | 重置按钮。点击之后恢复表单默认值 |
input | button | 普通按钮。默认无功能,之后配合js添加功能 |
常用属性:
属性名 | 说明 |
---|---|
value | 更改按钮上的名称 |
注意点:
- 如果需要实现以上按钮功能,需要配合form标签使用
- form使用方法:用form标签把表单标签一起包裹起来即可
示例:
<form action="">
<h3>CF登录</h3>
账号:<input type="text" placeholder="请输入您的账号">
<br>
<br>
密码:<input type="password" placeholder="请输入您的密码">
<br>
<br>
婚姻状况: <input type="radio" name="marry" checked>未婚 <input type="radio" name="marry">已婚
<br>
<br>
爱好: <input type="checkbox" checked>跑步 <input type="checkbox" checked>唱歌<input type="checkbox">跳舞
<br>
<br>
精彩集锦上传:<input type="file" multiple>
<br>
<br>
按钮:<input type="button" value="普通按钮">
<br>
<br>
重置信息:<input type="reset" >
<br>
<br>
提交:<input type="submit" value="免费注册">
</form>
效果:
CF登录
账号:密码:
婚姻状况: 未婚 已婚
爱好: 跑步 唱歌跳舞
精彩集锦上传:
按钮:
重置信息:
提交:
2.button按钮:
场景:在网页中显示用户点击的按钮
标签名: button
type属性值(同input的按钮系列) :
标签名 | type属性值 | 说明 |
---|---|---|
button | submit | 提交按钮。点击之后提交数据给后端服务器 |
button | reset | 重置按钮。点击之后恢复表单默认值 |
button | button | 普通按钮。默认无功能,之后配合js添加功能 |
注意点:
- 谷歌浏览器中button默认是提交按钮
- button标签是双标签,更便于包裹其他内容:文字、图片等
示例:
<button type="button">button</button>
<br><br>
<button type="reset">reset</button>
<br><br>
<button type="submit">submit</button>
<br><br>
效果:
3.表单标签:
场景:在网页中提供多个选择项的下拉菜单表单控件
标签组成:
- select:下拉菜单的整体
- option:下拉菜单的每一项
常见属性:
- selected:下拉菜单的默认选中
<select>
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
<option>丽水</option>
</select>
4.文本域:
场景:在网页中提供可输入多行文本的表单控件
标签名: textarea
常见属性:
- cols:规定了文本域内可见宽度
- rows:规定了文本域内可见行数
注意点:
- 右下角可以拖拽改变大小.
- 实际开发时针对于样式效果推荐用CSS设置
示例:
<textarea cols="30" rows="20"></textarea>
效果:
5.label标签:
场景:常用于绑定内容与表单标签的关系
标签名: label
使用方法1:
- 使用label标签把内容(如:文本)包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法2:(推荐使用简单明了)
- 直接使用label标签把内容(如:文本)和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
作用:即点击旁边的字或者图片也可勾选
示例:
<input type="radio" name="sex" id="man"><label for="man">男生</label>
<label><input type="radio" name="sex">女生</label>
6.输入空格:
1.pre双标签:
操作:输入几个空格就输入几个
示例:
<pre>床前明月光, 疑是地上霜</pre>
效果:
床前明月光, 疑是地上霜
2. :
操作:想输入几个空格就输入几个 ,每个后面加一个”;“
示例:
床前明月光 疑是地上霜
效果:
床前明月光 疑是地上霜