HTML学习笔记——表单标签上

表单标签上

目录

• 简介
• 格式
• Input标签
• Label标签
  

  ---

• Datalist标签
• Select标签
• Textarea标签
• 综合练习
• 注意点

简介

• 什么是表单？
  
  • 表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签，表单域，表单按钮。
• 什么是表单元素？
  
  • HTML中标签/标记/元素都是指HTML中的标签
  • 表单元素其实就是HTML中的一些标签，在浏览器中所有的表单标签都有特殊的外观和默认的功能

格式

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

Input标签

<input>标签，<input>标签有一个type属性，这个属性有很多类型的取值，取值的不同就决定了<input>标签的功能和外观，所有的<input>标签必须写在<form>标签中

• text:明文输入框，value属性设置默认值
• password:暗文输入框，value属性设置默认值
• radio:单选框
  - 默认情况下单选框不会互斥，需要设置name属性，把同名的单选框添加到同名的分组当中去，在一个分组中的单选框互斥
  
  • 要设置单选框默认选中，只需要设置checked属性为checked
  • HTML中如果属性的名称和取值一样，可以只写一个属性名称，但是XHTML中必须填写完整
  • 一个分组中如果设置了多个checked属性，则按照分组中最后一个设置的radio为准
• checkbox:复选框
  
  • 要设置多选框默认选中，只需要设置checked属性为checked
    
    • 可以设置多个checked属性
• button:按钮，配合js完成一些操作
• img:图片按钮，配合js完成一些操作
• reset:重置按钮，不设置value属性的话，有默认value=“重置”，用于清空表单数据
• submit:提交按钮，不设置value属性的话，有默认value=“提交”，用于提交表单数据
  
  • 需要设置提交的目标服务器：通过action属性设置
  • 需要提交哪些数据：form中的所有定义了name属性的表单元素
• hidden:隐藏域，不会显示在网页上，用于悄悄收集用户的数据
• email:邮箱，添加正则表达式校验输入的邮箱格式是否正确
• url:url链接，添加正则表达式校验输入的url格式是否正确，注意完整的url需要以http://或者https://开头
• number:数字，添加正则表达式校验保证只能输入数字
• date:时间，添加一个时间选择框
• color:颜色，添加一个颜色选择框

<form action="">    
    <!--明文输入框-->
    <input type="text" value="zhangsan"><br>
    <!--暗文输入框-->
    <input type="password" value="123456"><br>
    <!--单选框-->
    <input type="radio" name="sex" checked="checked">male<input type="radio" name="sex">female<input type="radio" name="sex">secret<br>
    <!--复选框-->
    <input type="checkbox">basketball<input type="checkbox">football<input type="checkbox">pingpong<br>
    <!--按钮 -->
    <input type="button" value="Click me"><br>
    <!--图片按钮-->
    <input type="image" src="1.png"><br>
    <!--重置按钮-->
    <input type="reset"><br>
    <!--提交按钮-->
    <input type="submit"><br>
    <!--隐藏域-->
    <input type="hidden">
    <!--HTML5新增的属性-->
    <!--邮箱-->
    <input type="email"><br>
    <!--url-->
    <input type="url"><br>
    <!--数字-->
    <input type="number"><br>
    <!--时间选择-->
    <input type="date"><br>
    <!--颜色选择-->
    <input type="color"><br>
</form>

Label标签

• 默认情况下文字和输入框是没有关联关系的，也就是说点击文字，对应的输入框不会聚焦，如果想要让输入框获得焦点，就需要把文字和输入框绑定起来，这时候可以使用Label标签
• 首先给<input>标签设置一个id，然后用<label>标签包裹文字，然后设置<label>标签的for属性为对应输入框的id，这是官方推荐的写法。

    <label for="username">username:</label><input type="text" value="zhangsan" id="username"><br>

    <label for="password">password:</label><input type="password" value="123456" id="password"><br>

• 你还可以这样做，直接用<label>标签报告你的<input>标签，也能实现相同的结果，不需要设置id属性，也不需要设置for属性，这种方法仅仅适用于文字和<input>标签一一对应的情况

<label>username:<input type="text" value="zhangsan"></label>