• 表 单 1

    初识表单post和get提交

    表单

    表单元素格式

    例子：

    • form：表单
    • action ： 表单提交的位置，可以是网站，也可以是一个请求处理地址
    • method: post/get 提交方式
    • get方式提交：可以再URL中看到我们提交的信息，不安全，高效
    • post ：比较安全，传输大文件，
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>登录注册title>
    6. head>
    7. <body>
    8. <h1>注册h1>
    10. <form action="first.html" method="post">
    11.     <p>名字：<input type="text" name="username">p>
    12.     <p>密码：<input type="password" name="pwd">p>
    13.     <p>
    14.         <input type="submit">
    15.         <input type="reset">
    16.     p>
    17. form>
    18. body>
    19. html>

    输出结果：

    （1）get提交

    （2）post提交（按住f12在network可以查看密码）

    文本框和单选框

    例子：

    （1）文本框

    • value="haha"    默认初始值
    • maxlength="8"   最长能写几个字符
    • size="30"       文本框的长度

    （2）密码框

    • input type="password"

    （3）单选框标签

    • input type="radio"
    • value : 单选框的值
    • name: 表示组
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>登录注册title>
    6. head>
    7. <body>
    8. <h1>注册h1>
    10. <form action="first.html" method="post">
    11.     
    12.     <p>名字：<input type="text" name="username" value="haha" maxlength="8"/>p>
    13.     
    14.     <p>密码：<input type="password" name="pwd"/>p>
    15.     
    16.     <p>
    17.         <input type="radio" value="man" name="sex"/>男
    18.         <input type="radio" value="woman" name="sex"/>女
    19.     p>
    20.     <p>
    21.         <input type="submit"/>
    22.         <input type="reset"/>
    23.     p>
    24. form>
    25. body>
    26. html>

     输出结果：

    按钮和多选按钮

        按钮

    •     input type="button" 普通按钮
    •     input type="image"  图片按钮
    •     input type="submit" 提交按钮
    •     input type="reset"  重置

    例子：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>登录注册title>
    6. head>
    7. <body>
    8. <h1>注册h1>
    10. <form action="first.html" method="post">
    11.     
    12.     <p>名字：<input type="text" name="username" value="haha" maxlength="8"/>p>
    13.     
    14.     <p>密码：<input type="password" name="pwd"/>p>
    15.     
    16.     <p>
    17.         <input type="radio" value="man" name="sex"/>男
    18.         <input type="radio" value="woman" name="sex"/>女
    19.     p>
    20.  
    21.     
    22.     <p>
    23.         爱好：
    24.         <input type="checkbox" value="sleep" name="hobby"/>睡觉
    25.         <input type="checkbox" value="code" name="hobby"/>敲代码
    26.         <input type="checkbox" value="chat" name="hobby"/>聊天
    27.         <input type="checkbox" value="game" name="hobby"/>游戏
    28.     p>
    29.     
    30.     <p>
    31.         按钮：
    32.         <input type="button" value="点击变长" name="but1"/>
    33.         <input type="image" src="../resource/img/5efaffbac96db.jpg"/>
    34.     p>
    35.     <p>
    36.         <input type="submit"/>
    37.         <input type="reset"/>
    38.     p>
    39. form>
    40. body>
    41. html>

    输出结果：

  • 相关阅读:
    力扣第41天----第123题、第188题
    米联客FDMA3.1数据缓存方案全网最细讲解，自创升级版，送3套视频和音频缓存工程源码
    JZ22 链表中倒数最后k个结点
    Vue路由组件的缓存keep-alive和include属性
    开源驰骋低代码-积极拥抱AI时代
    ssm基于WEB的房屋出租管理系统的设计与实现161620
    C++基础——函数
    Linux - 性能可观察性工具
    Harmony 页面之间的跳转
    蓝桥杯每日一题20233.10.10
  • 原文地址：https://blog.csdn.net/qq_46423017/article/details/126261777