HTML基础——表单标签

什么是表单

• 专门用来搜集用户信息的

什么是表单元素

• 什么是元素
  • 标签/标记/元素均为HTML中的标签
• 格式

<form>
    <表单元素>
</form>

常见的表单标签

• input标签
  • type属性：取值不同，决定了表单的不同外观
    • 明文输入框

账号：<input type="text">

- 暗文输入框

密码：<input type="password">

- 单选框radio
  - 默认情况不会互斥，设置name属性且设置相同值
  - 默认选中：checked

 <input type="radio" name="gender" checked="checked">女

- 按钮
  - 作用：配合JS完成操作
  - 格式：

<input type="button" value="我是按钮">

  - 图片按钮：

<input type="image" src="QRCode.jpg" width="10">

  - 重置按钮
    - 清空表单中填好的数据

<input type="reset" value="清空">

  - 提交按钮
    - 将表单中填写好的数据提交到远程服务器
    - 给form表单添加action属性指定需要添加到的服务器

<form action="http://www.520it.com">
<input type="submit">

    - 隐藏域
       - 配合提交按钮将一些数据悄悄提交到服务器
- value：设置默认值

    账号：<input type="text" value="123">
    <br>
    密码：<input type="password" value="123">

• label标签
  • 默认情况下文字和输入框是没有关联的，若想点击文字时让对应的输入框聚焦，就需要让文字和输入框进行绑定
  • 使用label标签可以实现，格式如下

    <label for="accout">账号</label>：<input type="text" id="accout">
    <br>
    <label for="pwd">密码</label>：<input type="password" id="pwd">

- 将文字用label标签包裹起来
- 添加id属性
- 通过label标签中的for属性和输入框中的id属性进行绑定

• dalist标签
  • 众多浏览器不支持，仅了解即可
  • 作用：给输入框绑定待选项
  • 格式：

<datalist>
    <option value="">待选项内容</option>
</datalist>

• 如何给输入框绑定待选项
  • 搞一个输入框
  • 搞一个datalist列表
  • 给datalist添加id
  • 给输入框添加id属性，且id的值即为对应的datalist的id
• select标签
  • 作用：定义下拉列表
  • 格式：

<select name="" id="">
    <option value="">列表数据</option>
</select>

• 通过select属性添加默认值

<option selected="selected">浙江</option>

• 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分组

<select>
    <optgroup label="北京">
    <option>朝阳区</option>
    <option>昌平区</option>
    <option>通州区</option>
    </optgroup>
    <optgroup label="广州">
    <option>天河区</option>
    <option>越秀区</option>
    <option>黄浦区</option>
    </optgroup>
</select>

• textarea标签
  • 作用：定义一个多行输入框
  • 格式：

<textarea name="" id="" cols="30" rows="10">
    内容
</textarea>

• 注意点：
  • 默认情况下可无限换行
  • 有默认的宽度和高度
  • col和row指定列数行数
• fieldset标签
  • 作用：给表单添加一个边框
  • legend可以给边框指定标题