HTML|表单post和get提交

HTML|初始表单post和get提交1.表单表单是使用form标签，我们可以为它设置一个action是目标网址，method是提交方式，可以分为get和post，这里我们线将其设置为get：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单</t

Alan_Lowe

12165人浏览 · 2021-07-21 18:57:24

Alan_Lowe · 2021-07-21 18:57:24 发布

HTML|表单post和get提交

1.表单

表单是使用form标签，我们可以为它设置一个action是目标网址，method是提交方式，可以分为get和post，这里我们线将其设置为get：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<form action="https://blog.csdn.net/qq_45985728" method="get"></form>

</body>
</html>

假如我们要写一个注册页面，我们需要有一个大标题是注册，然后有一个用户名输入框，一个密码输入框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<!--
表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：有post，get提交方式
-->
<form action="https://blog.csdn.net/qq_45985728" method="get">
  <h2>注册</h2>
    
<!--
<input type="text">是文本输入框
<input type="password">是密码输入框，默认是用小黑点表示密码的
-->
    <p>用户：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>

</form>

</body>
</html>

打开网页我们可以看到：

在这里插入图片描述

有个注册、用户输入框和密码输入框，我们输入可以看到：

在这里插入图片描述

因为密码一栏的type我们设置为了password，所以是小黑点的样子。

最后我们再添加上提交按钮和重置按钮即可完成：

计较按钮是将input的type属性改为submit，重置是改为reset：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h2>注册</h2>

<!--
表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
get方式能在目标地址看到提交的信息，不安全，但是高效
post方式比较安全，可以传输大文件
-->
<form action="Hdemo01.html" method="post">

<!--
<input type="text">是文本输入框
-->
  <p>用户名：<input type="text" name="username"></p>

<!--
<input type="password">是密码输入框，默认是用小黑点表示密码的
-->
  <p>密码：<input type="password" name="pwd"></p>
    
<!--
将input标签的type改为submit即可生成一个提交按钮
改为reset即可将该表单内的输入框内容清空
-->
  <p>
    <input type="submit">
    <input type="reset">
  </p>

</form>

</body>
</html>

在这里插入图片描述

可以看到生成了提交按钮和重置按钮，我们输入信息过后点击提交：

在这里插入图片描述

可以看到我们点击提交按钮之后是跳转到了我的博客页面，另外再网址栏，出现了我填写的信息用户和密码，所以我们看出，这样是不太安全的，因为method我们是设置了get，如果我们将其改为post，再次尝试就会发现网址栏没有了刚刚提交的信息：
在这里插入图片描述
但是信息也不是绝对安全的，我们同样也可以找到刚刚输入的信息，但是会相对get较安全一些。
另外，点击重置按钮，即可清空输入栏信息