HTML|表单post和get提交

HTML|表单post和get提交


1.表单

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


<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>

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


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


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

    <p>用户:<input type="text" name="username">p>
    <p>密码:<input type="password" name="pwd">p>

form>

body>
html>

打开网页我们可以看到:

HTML|表单post和get提交_第1张图片

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

HTML|表单post和get提交_第2张图片

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

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

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


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

<h2>注册h2>


<form action="Hdemo01.html" method="post">


  <p>用户名:<input type="text" name="username">p>


  <p>密码:<input type="password" name="pwd">p>
    

  <p>
    <input type="submit">
    <input type="reset">
  p>

form>

body>
html>

HTML|表单post和get提交_第3张图片

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

HTML|表单post和get提交_第4张图片

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


人生没有白走的路,每一步都算数!

你可能感兴趣的:(#,HTML,html)