HTML表单标签

表单标签

• 格式：
  
  
  <表单元素>
  
• 作用;
• 表单就是专门用来收集用户信息的

表单元素

• input

• 格式：
  

• 作用：

  • input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同

• 注意：表单元素一定要写在表单标签中

• 明文输入框：
  

• 暗文输入框：
  

• 给输入框设置默认值：
  
  

• 单选框：
  男
  女
  保密

• 注意：

  • 默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值
  • 要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性
  • 在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐大家不要省略取值

• 多选框：
  篮球
  足球
  棒球

• 注意：多选框，天生是不互斥的，如果想互斥，必须要有相同的name属性

• 普通按钮：
  

• 注意：可以通过value属性来给按钮指定标题

• 作用：配合JS完成一些操作

• 图片按钮：
  

• 重置按钮：
  

• 注意：如果想想改重置按钮默认的按钮标题可以通过value属性来修改

• 作用：用于清空表单中已经填写好的数据

• 提交按钮：
  

• 注意：

  • 要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件
    1.需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
    2.需要给需要提交到服务器的表单元素添加一个name属性

• 隐藏域：
  

• 作用:定义隐藏的输入字段

• 暂时不用掌握, 在Ajax中对数据的CRUD操作有非常大的作用

• 取色器：
  

• HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容

• 日期选择器:
  

• HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容

• Label标签

• 作用：默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定

• 绑定格式：
  1.将文字利用label标签包裹起来
  2.给输入框添加一个id属性
  3.在label标签中通过for属性和输入框中的id进行绑定即可
  账号:

• datalist标签

• 格式：
  

• 作用:给输入框绑定待选项

• 事例：
  请输入你的车型:

事例.png

宾利

• select标签
• 格式：
  
  列表数据
  
• 作用：用于定义下拉列表
• 给下拉列表设置默认值：
  
  列表数据
  列表数据
  列表数据
  
• 给下拉列表添加分组：
  
  
  列表数据
  
  
• 注意：
  • 下拉列表不能输入内容, 但是可以直接在列表中选择内容
  • 可以通过给option标签添加一个selected属性来指定列表的默认值
  • 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类
• textarea标签
• 格式:
  <br>
• 设置宽高的多行输入框
  <br>
• 注意：
  • 默认情况下输入框可以无限换行
  • 默认情况下输入框有自己的宽度和高度
  • 可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
  • 默认情况下输入框是可以手动拉伸的，可以通过CSS设置禁止拉伸