12、HTML <form>标签(表单)
從傳統意義上講,"表單"這個詞指代的是一個文檔,這個文檔中有一些空白區域可供用戶填寫信息。區別于傳統意義上的表單,HTML 中的表單不僅可以供用戶填寫信息還可以為用戶提供信息。
例如,登錄頁面和注冊頁面使用的就是表單。當用戶填寫了相應信息后,這些信息就會經過表單服務器被提交到網站的后臺,后臺管理人員可以經過一系列操作拿到用戶輸入的信息來判斷是否允許用戶登錄或注冊。接下來我們看一下在網頁中是如何使用表單的。
1. 簡述<form>標簽
HTML 中規定,使用 <form> 標簽來表示表單。我們都知道表格的行、列及單元格需要放在 <table></table> 標簽中,表單里的元素也不例外,同樣需要放在 <form></form> 標簽中。<form> 標簽有幾個常用的屬性,見下表:
<form> 標簽的常用屬性:
具體語法如下:
<form action="url" method="post" name="formName"></form>method="post"和method=“get”
此處使用提交方法為post,還可以設置為get。我們來看一下兩者之間有什么區別:
- get:用戶點擊提交按鈕后,提交的信息會被顯示在頁面的地址欄中。一般情況下,get提交方式中不建議包含密碼,因為密碼被提交到地址欄,不安全。
- post:如果表單包含密碼這種敏感信息,建議使用post方式進行提交,這樣數據會傳送到后臺,不顯示在地址欄中,相對安全。
2. <form>標簽所有屬性
以上我們列舉的是 <form> 標簽的常用屬性,接下來看一下它的所有屬性:
<form> 標簽的所有屬性:
- action---- 規定用戶點擊提交按鈕時,表單被提交到的位置。
- method---- 規定表單提交時所使用的 http 請求方法,只能是 get 或 post 中的任意一種。
- name ----定義表單的名稱,不能包含特殊字符和空格。
- accept-charset---- 規定在被提交表單中使用的字符集(默認:頁面字符集)。
- autocomplete---- 規定瀏覽器應該自動完成表單(默認:開啟)。
- enctype---- 規定被提交數據的編碼(默認:url-encoded)。
- novalidate ----規定瀏覽器不驗證表單。
- target ----規定 action 屬性中地址的目標(默認:_self)。
如果某個文檔要加入多個表單,<form> 標簽不可以互相嵌套。表單的提交功能我們在后面章節會詳細講解。
文本框:<input type="text" id="userName" name="userName">
密碼框:<input type="password" id="pwd" name="pwd>
文本域:<textarea rows="10" cols="30"></textarea>10行30列的文本域
單選框:
性別:<input type="radio" name="sex">男<input type="radio" name="sex" checked="checked">女復選框:
愛好:<input type="checkbox" name="hobby"/>吃<input type="checkbox" name="hobby"/>喝下拉框:
年級:<select id="grade" name="grade"><option value="一年級>一年級</option><option value="二年級>二年級</option><option value="二年級>二年級</option> </select>提交按鈕:<input type="submit" value="登錄">
普通按鈕:<input type="button" value="登錄">
文件上傳:<input type="file" id="f" name="f">
總結
以上是生活随笔為你收集整理的12、HTML <form>标签(表单)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 11、HTML <head>标签
- 下一篇: 13、HTML <meta>标签