首页 HTML

# HTML 表单标签

# input 系列标签的基本介绍

input 标签可以通过 type 属性值的不同，展示不同效果

type 属性值 :

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

# text

常用属性 :

属性名说明
placeholder占位符，提示用户输入内容的文本
1
<input type="text" placeholder="请输入文字">

# radio

常用属性 :

属性名说明
name分组，有相同 name 属性的单选框为一组，一组中同时只能有一个被选中
checked默认选中
1
请选择性别 : <input type="radio" name="sex" checked>男  <input type="radio" name="sex">女

# file

常用属性 :

属性名说明
multiple多文件选择
1
请上传文件 : <input type="file" multiple>

# 按钮

  • submit
  • reset
  • button

常用属性 :

  • value
1
2
3
4
5
6
7
8
<form action="">
    请输入账号 : <input type="text">
    <br><br>
    请输入密码 : <input type="password">
    <br><br>
    <input type="submit"><input type="reset">
    <input type="button" value="我是一个普通按钮">
</form>

# button 按钮标签

type 属性值 :

标签名type 属性值说明
buttonsubmit提交按钮，点击之后提交数据给后端服务器
buttonreset重置按钮，点击之后回复表单默认值
buttonbutton普通按钮，默认无功能，之后配合 js 添加功能

注意点 :

  • Google 浏览器中 button 默认是提交按钮
  • button 标签是双标签，更便于包裹其他内容：文字，图片等

# 下拉菜单

标签组成 :

  • select 标签：下拉菜单的整体
  • option 标签：下拉菜单的每一项

常见属性 :

  • selected : 下拉菜单的默认选中
1
2
3
4
5
<select>
    <option>北京</option>
    <option selected>上海</option>
    <option>深圳</option>
</select>

# textarea 文本域标签

常见属性 :

  • cols : 规定了文本域内可见宽度
  • rows : 规定了文本域可见行数

注意点 :

  • 右下角可以拖拽改变大小
  • 实际开发时针对于样式效果推荐用 css 设置
1
<textarea rows="40" cols="20"<你好世界 啦啦啦</textarea>

# label 标签

使用方法① :

  1. 使用 label 标签把内容 (如文本) 包裹起来
  2. 在表单标签上添加 id 属性
  3. 在 label 标签的 for 属性中设置对应的 id 属性值

使用方法② :

  1. 直接使用 label 标签把内容 (如文本) 和表单标签一起包裹起来
  2. 需要把 label 标签的 for 属性删除即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <br><br>
<!--    方法一-->
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <input type="radio" name="sex" id="nv"><label for="nv">女</label>


<!--    方法二-->
    <br><br>
    <label>
        <input type="radio" name="sex">男
    </label>
    <label>
        <input type="radio" name="sex">女
    </label>