非常详细的html form表单详解

最新推荐文章于 2022-04-20 00:28:10 发布

就爱酸辣土豆丝

最新推荐文章于 2022-04-20 00:28:10 发布

阅读量2.5k

点赞数 11

分类专栏： html+css+js 文章标签： html

本文链接：https://blog.csdn.net/m0_50913689/article/details/108927543

版权

html+css+js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了HTML表单的基本结构和元素，包括form标签、input、textarea、select及option等，强调了action和method属性在数据提交中的作用。讨论了GET和POST方式的区别，指出GET方式可能导致敏感信息泄露，推荐使用POST方式来保护用户数据的安全。同时，提供了修改为POST方式的示例代码。

摘要由CSDN通过智能技术生成

表单

表单介绍

表单用于收集不同类型的用户输入数据，将用户输入数据提交给web服务器，表单使用http协议提交数据

form标签：表单标签，定义表单区域
- action属性：设置表单提交的服务器地址
- method属性：设置表单提交的方式，一般有“GET”和“POST”方式, 不区分大小写

<body>
<form action="http://www.baidu.com" method="GET">
</form>
</body>

label标签：表示表单标签的文字标注，定义文字标注
input标签：表示表单标签的用户输入，定义不同类型的用户输入方式
- type属性：
  - type=“text” 定义单行文本输入框
  - type=“password” 定义密码输入框
  - type=“radio” 定义单选框
  - type=“checkbox” 定义复选框
  - type=“file” 定义上传文件
  - type=“submit” 定义提交按钮
  - type=“reset” 定义重置按钮
  - type=“button” 定义一个普通按钮
    元素属性设置：
- name属性：设置表单元素的名称，该名称是提交数据时的参数名
- value属性：设置表单元素的值，该值是提交数据时参数名所对应的值
textarea标签：表示表单元素的多行文本输入框标签定义多行文本输入框
select标签：表单元素的下拉列表标签定义下拉列表
option标签：与select标签配合，定义下拉列表中的选项
如：

<body>
<form action="http://www.baidu.com" method="GET">
    <p>
        <label for="name">用户名：</label>
        <input type="text" id="name" name="username">
    </p>
    <p>
        <label for="">密 码：</label>
        <input type="password" name="password">
    </p>
    <p>
        <label for="">再次输入密码：</label>
        <input type="password" name="password">
    </p>
    <p>
        <label for="">密码保护问题：</label>
        <select name="problem">
            <option value="0">你母亲的名字是?</option>
            <option value="1">你父亲的名字是?</option>
            <option value="2">你最喜欢的人是?</option>
            <option value="3">你毕业的学校是?</option>
        </select>
    </p>
    <p>
        <label for="">密码保护问题答案：</label>
        <input type="text" name="password protection">
    </p>
    <p>
        <label for="">性别：</label>
        <input type="radio" name="sex" value="0">男
        <input type="radio" name="sex" value="1">女
    </p>
    <p>
        <label for="">爱好：</label>
        <input type="checkbox" name="love" value="sing">唱歌
        <input type="checkbox" name="love" value="dance">跳舞
        <input type="checkbox" name="love" value="game">玩游戏
        <input type="checkbox" name="love" value="study">学习
        <table>其他爱好：</table>
        <textarea cols="30" rows="10" name="love"></textarea>
    </p>
    <p>
        <table>真实姓名：</table>
        <input type="text" name="name">
    </p>
    <p>
        <table>本人照片：</table>
        <input type="file" name="pic">
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>
</body>

执行结果：
在这里插入图片描述

表单提交

逐项填写，方便查看，可以打开浏览器的network(当前页面右击—>检查—>network)
在这里插入图片描述
点击提交，界面已经成功跳转到百度

可以看到数据是按照“GET”方式提交

参数按照“地址栏+?”的方式提交,问号后面是提交给服务器的数据，数据会直接显示在地址栏中，包括自己的账号密码，很容易造成密码泄露，因此只要涉及到登录账号密码数据时，不建议各位大佬使用“GET”方式，一般使用“POST"方式，改成“POST"方式提交，表单数据会放在请求体里面，不会显示在地址栏
在这里插入图片描述
改为post方式：

<form action="http://www.baidu.com" method="POST">

执行结果：
在这里插入图片描述
“POST"和“GET"方式提交数据，都以http协议提交给web服务器
就说到这里啦，以上如有问题，欢迎各位大佬随时指正！！！

就爱酸辣土豆丝

关注

11
点赞
踩
37

收藏

觉得还不错? 一键收藏
3
评论
非常详细的html form表单详解

表单表单介绍表单用于收集用户输入数据，将用户输入数据提交给web服务器，表单使用http协议提交数据form标签：表单标签，定义表单区域 action属性：设置表单提交的服务器地址method属性：设置表单提交的方式，一般有“GET”和“POST”方式, 不区分大小写label标签：表示表单标签的文字标注，定义文字标注input标签：表示表单标签的用户输入，定义不同类型的用户输入方式type属性： type="text" 定义单行文本输入框 type="password"
复制链接

扫一扫

专栏目录