時間：2023-09-14 22:24:02 | 來源：網站運營
時間：2023-09-14 22:24:02 來源：網站運營
（03）③ HTML 表單詳解 | HTML：
在線咨詢
原創(chuàng)：itsOli @前端一萬小時本文首發(fā)于公眾號「前端一萬小時」本文版權歸作者所有，未經授權，請勿轉載！本文節(jié)選自“語雀”私有付費專欄「前端一萬小時 | 從零基礎到輕松就業(yè)」 1. POST 和 GET 方式提交數據有什么區(qū)別？ 2. 在 input 里，name 有什么作用？ 3. label 有什么作用？如何使用？ 4. radio 如何分組？ 5. placeholder 屬性有什么作用？ 6. type=hidden 隱藏域有什么作用？舉例說明。 7. CSRF 攻擊是什么？如何防范？ 8. 網頁驗證碼是干嘛的？是為了解決什么安全問題？ 9. 常見 Web 安全及防護原理？10. 以下哪種寫法會導致 checkbox 被勾選： ? <input type="checkbox" checked=false > ? <input type="checkbox" checked=true > ? <input type="checkbox" checked="" > ? <input type="checkbox" checked> ? <input type="checkbox" >11. 如果想勾選 checkbox，以下哪些是推薦的寫法： ? <input type="checkbox" checked=true > ? <input type="checkbox" checked="true" > ? <input type="checkbox" checked="checked"> ? <input type="checkbox" checked>12. 有 4 個 radio，想 id1 和 id2 一組，id3 和 id4 一組，實現(xiàn)單選，以下說法正確的是？（不定項） <input id="id1" type="radio"> <input id="id2" type="radio"> <input id="id3" type="radio"> <input id="id4" type="radio"> ? id1 和 id2 需要設置相同的 name，id3 和 id4 需要設置相同的 name。 ? id1 和 id2 需要設置相同的 value，id3 和 id4 需要設置相同的 value。 ? id1 和 id2 需要設置相同的 class，id3 和 id4 需要設置相同的 class。 ? id1 和 id2 需要設置相同的 label，id3 和 id4 需要設置相同的 label。13. 關于 POST 和 GET 的區(qū)別，以下說法正確的是？ ? GET 的語義是“要”數據，POST 的語義是“給”數據或者“創(chuàng)建”數據。 ? GET 把參數拼裝成 URL，發(fā) GET 請求實際上是瀏覽器請求拼接后的 URL。 ? GET 提交的數據沒有最大長度限制，POST 提交的數據有最大長度限制（和服務端的設置有關）。 ? GET 提交的數據有最大長度限制，根本原因是瀏覽器地址欄對輸入的 URL 有最大長度限制，超過會截斷。 ? POST 相對更“安全”一些，因為 GET 請求拼裝的 URL 會保存在瀏覽器歷史記錄，到了服務器之后一般 也有保存的請求日志可以直接看到請求參數。 ? 從嚴格的安全意義上講，只要是 HTTP 的請求，都不安全。HTTPS + POST 才安全。 上方面試題“參考答案詳解”，請點擊此處查看獲取方式！<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>HTML 表單</title> <style type="text/css"> #txa { width: 300px; height: 200px; margin-left: -12px; } </style></head><body> <div class="login"> <input type="text" name="sex"> <!-- ??注釋 1 --> <form action="/getinfo" method="get"> <!-- ??注釋 2 --> <div class="username"> <!-- ??注釋 3 --> <label for="username">姓名</label> <!-- ??注釋 4 --> <input id="username" type="text" name="username" value="Oliver"> <!-- ??注釋 5 --> </div> <div class="password"> <label for="password" >密碼</label> <input id="password" type="password" name="password" placeholder="輸入密碼"> <!-- ??注釋 6 --> </div> <div class="sex"> <label>性別</label> <!-- ??注釋 7 --> <input type="radio" name="sex" value="男" checked>男 <!-- ??注釋 8 --> <input type="radio" name="sex" value="女">女 </div> <div class="orientation"> <label>取向</label> <input type="radio" name="orientation" value="男">男 <input type="radio" name="orientation" value="女" checked>女 </div> <div class="hobby"> <label>愛好</label> <input type="checkbox" name="hobby" value="reading" checked>讀書 <!-- ??注釋 9 --> <input type="checkbox" name="hobby" value="design" checked>室內設計 </div> <div> <label for="txa">評論：</label> <textarea id="txa" name="article">是個好人！ </textarea> <!-- ??注釋 10 --> </div> <div class="file"> <input type="file" name="myfile" accept="image/png"> <!-- ??注釋 11 --> </div> <div class="mycar"> <label>我的 car</label> <select name="mycar"> <!-- ??注釋 12 --> <option value="三菱" selected>三菱</option> <!-- ??注釋 13 --> <option value="奧迪">奧迪</option> <option value="MINI">MINI</option> </select> <input type="submit" value="提交"> <!-- ??注釋 14 --> <input type="button" value="不提交"> <!-- ??注釋 15 --> <input type="reset" value="重置輸入"> <!-- ??注釋 16 --> <input type="hidden" name="csrf" value="123456oliver"> <!-- ??注釋 17 --> </div> </form> </div></body></html>注釋 1：<input type="text" name="sex"><form>…</form> 標簽來包裹住所有 input 輸入框。當你點擊“提交”的時候，他就會把這個 <form> 所包裹的所有 input 里邊的信息“提交”給 form 對應的后臺地址上（詳見：注釋 2）；<form> 包裹，因此在“提交”的時候不會把里邊填寫的信息“提交”給后臺。<form action="/getinfo" method="get"><form> 包裹住所有 input 輸入框；action 是指“表單”提交處理對應的后臺路徑；method 是指“表單”提交的方法（GET 或 POST）：type=text 中的東西拿出來，得到里邊的內容，里邊的內容就是我們輸入的文字、密碼等；name 拿出來（username/password)；localhost:8080/abc?username=Oliver&password=123456 ）<div class="username">用一個 div 來區(qū)分出一個“塊”，用一個 class 來建立一個“類”（以下同理）。<label for="username">姓名</label> <!-- 注釋 4 --><input id="username" type="text" name="username" value="Oliver"> <!-- 注釋 5 -->label for 是為了給一個 input 輸入框前邊加上可點擊的說明文字；label 里邊的 for 和 input 里邊的 id 連用，是為了：正常情況下，我要在這個輸入框里邊輸入的話，我僅僅點擊前邊的說明文字是沒反應的，我必須要點擊這個輸入框才能進入可輸入模式。而這里的 label for 和 id 的連用就可以實現(xiàn)點擊輸入框前邊的輸入文字也可以進入輸入模式。（注意：有 for 就必須有一個 id）<label for="username">姓名</label> <!-- 注釋 4 --><input id="username" type="text" name="username" value="Oliver"> <!-- 注釋 5 -->type="text" ，這個輸入框是用于輸入單行文本。我們使用 <input> 元素來創(chuàng)建一些不同的控件，type 屬性確定了這是什么類型的控件；name="username" ，絕大多數表單元素都需要一個名字，相當于用戶輸入數據的一個標識符。后臺服務器腳本將使用這個元素名，并提取里邊的參數（見：注釋 2，表單是怎樣提交給后臺的）；value="Oliver" ，這里我輸入例如一個初始值——Oliver，我們可以輸入或不輸入任何初始文本（例如： value="" ）。<div class="password"> <label for="password">密碼</label> <input id="password" type="password" name="password" placeholder="輸入密碼"> <!-- 注釋 6 --></div>type="password" ，這個輸入框是用于輸入密碼；placeholder="輸入密碼" ，這個屬性用陰影文字來引導用戶在框里“輸入密碼”。<div class="sex"> <label>性別</label> <!-- 注釋 7 --> <input type="radio" name="sex" value="男" checked>男 <!-- 注釋 8 --> <input type="radio" name="sex" value="女">女</div>單純用了 label，里邊沒有 for，與之對應的 input 里邊也沒有 id。因為這個 input 是“單選框”類型，沒有必要點擊文字（性別）就選擇或輸入。<div class="sex"> <label>性別</label> <!-- 注釋 7 --> <input type="radio" name="sex" value="男" checked>男 <!-- 注釋 8 --> <input type="radio" name="sex" value="女">女</div>type="radio" ，這個是“單選鈕輸入”，用于單選；……value="男" checked>男……value="女">女因為是勾選，沒有在輸入框輸入東西，如果沒有 value 值，那么用戶只勾選后提交，我們后臺是沒有東西的。所以，必須手動添加 value 值，讓勾選后，后臺可以顯示對應勾選的 value 值；<div class="hobby"> <label>愛好</label> <input type="checkbox" name="hobby" value="reading" checked>讀書 <!-- 注釋 9 --> <input type="checkbox" name="hobby" value="tour" checked>旅游 <input type="checkbox" name="hobby" value="design" checked>室內設計</div>type="checkbox" ，這個是“復選框”，用于多選；type="radio" ，name 都是 hobby；<div> <label for="txa">評論：</label> <textarea id="txa" name="article">是個好人！ </textarea> <!-- 注釋 10 --></div>type="text" ；<textarea> 是一個閉合的標簽，因此初始值（是個好人）要寫在標簽里。<div class="file"> <input type="file" name="myfile" accept="image/png"> <!-- 注釋 11 --></div> type="file" ，這個是用于文件上傳，如上傳身份信息等；accept="image/png" ，accept 屬性可以用來約束上傳文件的格式。例如這里只能上傳 image/png （但實際工作中，我們前端這樣單方面的限制是不靠譜的，還需要后端也做相應的限制）。<div class="mycar"> <label>我的 car</label> <select name="mycar"> <option value="三菱" selected>三菱</option> <option value="奧迪">奧迪</option> <option value="MINI">MINI</option> </select>type="radio" 和 type="checkbox" 中的 value；<input type="submit" value="提交"> <!-- 注釋 14 --><input type="button" value="不提交"> <!-- 注釋 15 --><input type="reset" value="重置輸入"> <!-- 注釋 16 -->type="submit" 、 type="reset" 、 type="button" 都是可以點擊的按鈕；<input type="hidden" name="csrf" value="123456oliver"><input type="hidden" name="_" value="_"> 里邊埋了一個值，下次我們要用的時候，就直接可以定位到這個元素去獲取它的值，獲取到后就可以用了，但用戶什么都不知道；<input type="hidden" name="csrf" value="123456oliver"> ，他把這個東西寫好后發(fā)給你。發(fā)給你之后，你看到的頁面表面上沒什么特別的變化，可實際上有一個點已經埋下了—— name="csrf" value="123456oliver" 。<input type="hidden" name="csrf" value="123456oliver"> 里的這個值：csrf=123456oliver 。csrf=123456oliver ，而他沒有這樣一個值，或得到的值是錯的，那他即使發(fā)送了這些數據，服務器也是不認可的。關鍵詞：
