天天看點

HTML|表單post和get送出

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

打開網頁我們可以看到:

HTML|表單post和get送出

有個注冊、使用者輸入框和密碼輸入框,我們輸入可以看到:

HTML|表單post和get送出

因為密碼一欄的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>      
HTML|表單post和get送出

可以看到生成了送出按鈕和重置按鈕,我們輸入資訊過後點選送出:

HTML|表單post和get送出

可以看到我們點選送出按鈕之後是跳轉到了我的部落格頁面,另外再網址欄,出現了我填寫的資訊使用者和密碼,是以我們看出,這樣是不太安全的,因為method我們是設定了get,如果我們将其改為post,再次嘗試就會發現網址欄沒有了剛剛送出的資訊:

HTML|表單post和get送出

但是資訊也不是絕對安全的,我們同樣也可以找到剛剛輸入的資訊,但是會相對get較安全一些。