• HTML 表单笔记/练习

    表单

    概述

    表单用于收集用户信息，用户填写表单提交到服务器

    • 一般传参方式：
      • GET
      • POST
      • Cookie
    • 传参要素
      • 传参方式
        • GET
        • POST
      • 参数的名字
      • 目标页面
      • 内容的数据类型（只有在上传文件的时候）

    提示信息

    • 一个表单中通常还包含一些说明性的文字，提示用户填写和操作

    表单域

    • 相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过表单域定义处理表单数据所提交到的 url 地址，以及数据提交到服务器的方法
    • 如果不定义表单域，则数据将无法提交给服务器

    表单声明

    <form action="" method="">
  
form>

    • 1
    • 2
    • 3

    表单属性

    • action 代表提交的地址

    • method 代表提交的方式

      • get 方法会在 url 中显示提交的内容

      • post 方法不会在 url 中显示提交的内容，而会显示在http中

    • target

      • _blank 新标签页打开提交的表单
      • _self 当前标签页打开

    • enctype

      • application/x-www-form-urlencoded 默认传参方式
      • multipart/form-data 只有在文件上传时使用

    表单控件

    • 能与用户进行交互的可视化控件
    • 包含了具体的表单功能
    • 包括
      • 单行文本输入框
      • 密码输入框
      • 复选框 (点击选择)
      • 提交按钮
      • 重置按钮等

    输入框

    属性
    属性说明
    type用来区分文本框的类型。
    name
    id    		标签的唯一标识符。 用来表示当前文本框的名字。 要服务器完成完整的交互传参，此属性必不可少。
    value代表表单元素控件的默认值； 如果没有此属性，需要从用户获得。
    disabled代表控件禁用； disabled = “disabled”。
    type 属性

    默认为 type="text"

    type属性描述
    textinput 将会接受文本输入
    password可用于一些私密性和隐私性的内容（例如：密码）
    button、submit、reset实现一个按钮形式，但用于的内容不同，实质上都是实现一个按钮形式，此时可以为 input 元素设置 value 值为按钮贴上文字
    radio实现单选框（注意：同一组单选框 name 属性需要相同，否则无法实现单选）
    checkbox实现复选框
    time时间框
    week星期框
    month年月框
    date日期框
    datetime_local本地日期和时间
    search实现搜索框，从搜索框字可以看出这个值用于搜索方面的
    color实现颜色选择框（例如：ps中的拾色器一样）
    image实现图像按钮，将一幅图像作为按钮，点击图像任何位置都会做出响应
    file有时我们需要将文件上传至服务器，使用file值将会实现此功能，但是如果只给type属性设置为file，并不能实现完整的上传操作，除需要给form元素中method属性设置为post外，还需要将input元素中的enctype属性设置为multipart/form-data。这样就可以完整的上传文件了
    number设置为此属性输入框只能输入数字
    range实现数值滚动条
    hidden将i元素给隐藏
    email、tel、url对邮箱、电话号码、网址等数据进行把关，但是把关方面需要 正则表达式来定义（正则表达式通过pattern属性来定义）
    文本输入框

    • 明文显示输入的内容

      <form action="">
    <input type="">
form>  

      • 1
      • 2
      • 3
    密码输入框

    • 加密显示输入的内容

      <form action="">
    <input type="password">
    
form>  

      • 1
      • 2
      • 3
      • 4

      image-20231018090931364

    单选框

    • type="radio"

    • 注意：同一组单选框 name 属性需要相同，否则无法实现单选

      通过 value 属性，可以为每个单选框设置不同的标识值，以便在后端处理表单数据时进行识别和处理。

      <form action="">
    男
    <input type="radio" name="sex" value="男">
    女
    <input type="radio" name="sex" value="女">
form>  

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

      image-20231018090943353

    复选框

    • type="checkbox"

    • 注意：同一组复选框 name 属性需页要相同

      通过 value 属性，可以为每个单选框设置不同的标识值，以便在后端处理表单数据时进行识别和处理。

      <form action="">
    吃
    <input type="checkbox" name="love" value="吃">
    喝
    <input type="checkbox" name="love" value="喝">
    拉
    <input type="checkbox" name="love" value="拉">
    撒
    <input type="checkbox" name="love" value="撒">
form>  

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10

      image-20231018090951674

    普通按钮
    <input type="button" value="按钮上显示的文字">

    • 1
    提交按钮

    • type="submit"

      <input type="submit">

      • 1

      image-20231018090956866

    重置按钮

    • type="reset"

      <input type="reset">

      • 1

      image-20231018091005827

    上传文件

    • type=file

      <form>
    <input type="file" name="photo">
form>

      • 1
      • 2
      • 3

      image-20231018091013944