• 表格


    1.作用:用于接收用户输入的数据,并提交给服务器

    2.表单的二要素

      1.表单标签<form></form>
        收集用户信息,并且提交给服务器

        1.form本省不可见的,但是不能省略,因为数据的提交功能要由form实现
        2.语法:
          <form>
            表单控件
          </form>
        3.标签属性
          1.action:设置数据的提交地址
          2.method:数据提交的方式get post 默认以get方式
            1.get请求: 默认的提交方式,常用于向服务器获取数据
              特点:1.如果是提交数据,数据会以参数的形式拼接在URL后面
                 2.安全性较低
                 3.数据的大小有限,最大为2KB
            2.post请求:常用与向服务器发送数据
              特点:1.隐式提交,外部看不到数据,数据会被打包在请求体中发送
                 2.安全性高
                 3.数据大小没有限制

      2.表单控件:
        提供一组可以跟用户交互的可视化组件

        1.文本框和密码框
          <input type="text"> 普通文本输入框
          <input type="password"> 密码框
          属性:
          1.name属性,必填项,定义控件名称,缺少则无法提交当前的数据
          2. value 属性,要提交给服务器的值,同时也是默认显示在控件上的值
          3. maxlength 用来限制用户输入的最大字符数
          4. placeholder 用户输入之前显示在框中的提示文本

        2.单选框和复选框
          单选按钮:<input type="radio">
          复选框:<input type="checkbox">
          属性:
          1.name:定义控件名称,还具有分组的作用,一组中的按钮名称必须保持一致
          2.value:必须给定,设置当前控件的值,最终提交给服务器
          3.checked:设置预选中状态,可以省略,也可以使用“checked”作为值

        3.隐藏域与文件选择框
          1. 隐藏域
            作用 :需要提交给服务器但是却不需要呈现给用户的数据,都可以放在隐藏域中
            语法 :<input type="hidden">
            属性 :
             1. name 控件名称
             2. value 控件的值
          2. 文件选择框
            作用 : 选择文件上传,发送给服务器
            语法 :<input type="file">
            属性 :name 定义控件名称

        4.下拉选择框
          <select name="province">
            <option value="hebei">河北省</option>
            <option value="heilongjiang">黑龙江省</option>
            <option value="hunan">湖南省</option>
          </select>
          假设用户选择河北省,在使用get方式提交数据时,URL后拼接的数据应为province=hebei

        5. 文本域
          支持用户输入多行文本
          语法 :<textarea></textarea>
          属性 :
           1. name 控件名称
           2. cols 指定文本域默认显示的列数,一行中能显示的英文字符量,中文减半
           3. rows 指定文本域能够显示的行数
          注意 :文本域可以由用户调整大小

        6.按钮
          1. 提交按钮
           <input type="submit" name="" value="">
           将表单数据发送给服务器
           属性:type="submit"设置按钮类型为提交
              value用来设置按钮的显示文本
          2. 重置按钮
           <input type="reset" value="">
           重置表单,将表单内容恢复到初始化状态
          3. 普通按钮
           <input type="button" value="">
           可以绑定自定义事件
           按钮中的value属性值实际上是定义按钮的显示文本
          4. <button>按钮显示文本</button>
           注意 :
            1. 按钮标签可以在任何地方使用,不局限在form 表单中使用
            2. 按钮标签使用在form中,默认具有提交功能,等同于input submit
            3. 可以添加属性type 取值 submit / reset / button 进行区分 (非必填)
            4. 在表单外作为普通按钮使用时,需要通过JS 动态绑定事件

        7.特殊用法
          label for ID
          语法 :
           <label for="male">男</label>
           <input type="radio" name="gender" value="male" id="male">
          使用label标签包裹表单控件要显示的文本信息,为label标签添加for属性,属性值与所要绑定的表单控件的ID属性值保持一致,实现文本与控件的绑定

  • 相关阅读:
    PHP观察者模式
    php减少损耗的方法之一 缓存对象
    php迭代器模式
    数据库安全措施的改进依据------未实践
    mysql利用phpmyadmin导入数据出现#1044错误 的可能原因
    两列布局的基本思路
    less1.5中的减错误
    ie63像素bug原因及解决办法不使用hack
    镜像翻转二叉树
    判断一个整数是否是 2 的幂次方
  • 原文地址:https://www.cnblogs.com/zengsf/p/9769499.html
Copyright © 2020-2023  润新知