1. 表单标签

表单:用于采集用户输入的数据的.用于和服务器进行交互.

2. form表单

  1. <form action="#" method="get" name="f">
  2.     <!--form 用于定义表单的,可以定义一个范围,范围代表采集用户的范围
  3.         属性:
  4.             action:指定提交数据的url
  5.             method:指定提交方式
  6.                 分类:一共7种,有2种比较常用
  7.                      get:
  8.                         1.请求参数会在地址栏中显示
  9.                         2.请求参数的长的是有限制的
  10.                         3.不太安全
  11.                     post:
  12.                         1.请求参数不会在地址中显示,会封装在请求体中(http协议)
  13.                         2.请求参数的大小没有限制.
  14.                         3.较为安全
  15.                  表单项中的数据想要被提交,必须指定其name属性
  16.             name:表单名字
  18.     -->

03. 表单标签 - 图1

表单项标签:

3. input:可以通过type属性值,改变元素的样式

  • type属性:

  • text:文本输入框,默认值

    • placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息

  • password:密码输入框

  • radio:单选框

    • 属性:

      • name:要想实现单选多个单选框name属性必须相同
      • value:一般回给每个单选框提供value值,提交时返回value值
      • chec ked:设置默认是否勾选

  • checkbox:复选框

    • 属性

      • name:要想实现单选多个单选框name属性必须相同
      • value:一般回给每个单选框提供value值,提交时返回value值
      • checked:设置默认是否勾选

  • file:文件选择框 上传文件用

  • hidden:隐藏域,用于提交一些信息

  • 按钮:

    • submit:提交按钮,可以提交表单
    • button: 普通按钮,配合其他JavaScript使用
    • image:让图片成为按钮 src为图片路径
    • reset:重置表单中的文本

  • color:取色器,设置name属性后可以提交颜色表单

  • date:日期

  • datetime-local:属性为日期 24小时进制时间 设置name属性后提交表单返回日期和格式化后的时间

  • email: email属性为邮箱 name属性提交表单返回值 会做判断用户的输入是否包含@符号

4. label:指定输入项的文字描述信息

  • label的for属性一般回合input的id属性＝,如果对应了则点击label区域会自动让input输入框获取焦点
  • 或者可以在label标签中定义输入框

5. select:下拉列表

  1. 省份:<select name="province">  <!-- <select>下拉列表  name属性提交表单-->
  2.     <option value="1" >广东</option>  <!-- 列表元素用<option>包裹 设置value后提交value值 如果不设置则返回包裹的文字-->
  3.     <option value="2" selected>上海</option>  <!-- selected属性  将改元素设置为默认选项  如不指定则默认为下拉列表中第一个元素-->
  4.     <option value="3">北京</option>

6. textarea:文本域

  • cols:指定列数,每一行有多少个字符
  • rows:默认多少