HTML基础——表单标签

什么是表单

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

什么是表单元素

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

常见的表单标签

  • input标签
    • type属性:取值不同,决定了表单的不同外观
      • 明文输入框
账号:
- 暗文输入框
密码:
- 单选框radio
  - 默认情况不会互斥,设置name属性且设置相同值
  - 默认选中:checked
 
- 按钮
  - 作用:配合JS完成操作
  - 格式:

  - 图片按钮:

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

  - 提交按钮
    - 将表单中填写好的数据提交到远程服务器
    - 给form表单添加action属性指定需要添加到的服务器
    - 隐藏域
       - 配合提交按钮将一些数据悄悄提交到服务器
- value:设置默认值
    账号:
    
密码:
  • label标签
    • 默认情况下文字和输入框是没有关联的,若想点击文字时让对应的输入框聚焦,就需要让文字和输入框进行绑定
    • 使用label标签可以实现,格式如下
    
    
- 将文字用label标签包裹起来
- 添加id属性
- 通过label标签中的for属性和输入框中的id属性进行绑定
  • dalist标签
    • 众多浏览器不支持,仅了解即可
    • 作用:给输入框绑定待选项
    • 格式:

    

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

  • 通过select属性添加默认值

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

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

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

你可能感兴趣的:(HTML基础——表单标签)