五、表单 + 六、字符实体

最新推荐文章于 2024-07-25 09:24:40 发布

m0_58061685

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量23

点赞数

分类专栏： html学习文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_58061685/article/details/132444177

版权

html学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

五、表单

1. input系列标签

type属性值

属性值	说明
text	文本框，用于输入单行文本
password	密码框，用于输入密码
radio	单选框，用于多选一
checkbox	多选框，用于多选多
file	文件选择，用于上传文件
submit	提交按钮，用于提交
reset	重置按钮，用于重置
button	普通按钮，默认无功能，之后配合js添加功能

placeholder属性：占位符，提示用户输入内容文本
radio单选框
- 属性
  
  属性名说明
  name 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
  checked 默认选中
```
<body>
    性别：<input type="radio" name="sex"> 男
          <input type="radio" name="sex" checked> 女
</body>
```
file文件上传

属性名说明
multiple 多文件选择
按钮（submit、reset、button）
- 用form标签设置按钮作用域
属性名说明
value 修改按钮名称

属性名	说明
name	分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked	默认选中

属性名	说明
multiple	多文件选择

属性名	说明
value	修改按钮名称

2. button系列标签

标签名	type属性值	说明
button	submit	提交按钮
button	reset	重置按钮
button	button	普通按钮

3. select下拉菜单标签

提供多个选择项的下拉菜单表单控件
标签组成
- select标签：下拉菜单的整体
- option标签：下拉菜单的每一项
selected：下拉菜单默认选中

4. textatea文本域标签

属性	说明
cols	规定了文本域内可见宽度
rows	规定了文本域内可见行数

注意点
- 右下角可以拖拽改变大小
- 实际开发和css一起用

5. label标签

常用于绑定内容和表单标签的关系
使用1
- 使用label标签把内容包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应id属性值
使用2
- 直接用label标签把内容和表单标签一起包裹起来
- 把label标签的for属性删除

<body>
    <!-- 使用1 -->
    性别：<input type="radio" name="sex" id="nan" > <label for="nan">男</label> 
    <!-- 使用2 -->
          <label><input type="radio" name="sex" checked> 女</label> 
</body>