• 表 单 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>

    输出结果：

  • 相关阅读:
    elasticsearch算法之搜索模型(一)
    中国人保为易集康健康科技承保产品责任险，为消费者保驾护航！
    前端基础建设与架构26 如何设计一个“万能”项目脚手架？
    手机浏览器看视频加载太慢怎么办，这5招用了提速快
    简述一下伪共享的概念以及如何避免
    RocketMQ中生产者发消息前为啥一定要调用start()方法？
    c语言练习10周（11~15）
    [轻笔记] SHAP值的计算步骤
    秒杀的时候怎么使用Redis？
    cocos creator 在网页中调试的时候直接代码调试方法
  • 原文地址：https://blog.csdn.net/qq_46423017/article/details/126261777