在 HTML 中,表單是由 <form> 標記定界的區域,包含文本輸入框、按鈕、復選框和圖形用戶界面的其他功能部件。Web 應用程序使用表單以允許最終用戶提供要發送到服務器的數據。
form元素
常用屬性:
action:
提交表單的地址
method:
提交表單使用的方法,一般有get和post兩種。
<form action="/getInfo" method="get">
</form>
input元素
input元素通過type屬性來設置不同的input類型。
文本域
<div class="username">
<label for="username">姓名:</label>
<input id="username" type="text" name="username" placeholder="用戶名">
</div>
密碼域
<div class="password">
<label for="password">密碼:</label>
<input id="password" type="password" name="password">
</div>
復選
checked為默認勾選項
<div class="hobby">
<label>愛好:</label>
<input type="checkbox">dota
<input type="checkbox" >籃球
<input type="checkbox" checked>騎行
</div>
單選
checked為默認勾選項
<div class="sex">
<label>性別:</label>
<input type="radio" name="sex" value="man" checked>男
<input type="radio" name="sex" value="woman">女
</div>
提交
<input type="submit" value="提交">
重置
<input type="reset" value="重置">
按鈕
<input type="button" value="確認">
隱藏域
對用戶不可見,祥見 form常見問題
<input type="hidden" name="country" value="23232323" />
選擇并上傳文件
accept屬性可限制選擇文件的類型
<input type="file" name="pic" accept="image/png" />
select元素
selected為默認選中項
<select name="mycar">
<option value="sabo" selected>薩博</option>
<option value="bentian">本田</option>
<option value="benchi">奔馳</option>
</select>
label元素
label元素為input元素定義標注。
當for屬性與關聯元素的 id 屬性要相同時,當鼠標選擇該標簽時,關聯的元素控件會獲得焦點。
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" placeholder="用戶名">
</div>
textarea元素
<div class="comment">
<label>評論:</label>
<textarea name="comment" id="" cols="30" rows="10" placeholder="ddd"></textarea>
</div>
from相關
form表單有什么作用?有哪些常用的input 標簽,分別有什么作用?
<form> 標簽用于為用戶輸入創建 HTML 表單,表單用于向服務器傳輸數據。
常用的input標簽和作用
button——定義可點擊的按鈕
checkbox——定義復選框
radio——定義單選按鈕
text——定義單行輸入框,可在其中輸入文本
file——定義輸入字段和“瀏覽”按鈕,供文件上傳
hidden——定義隱藏的輸入字段
image——定義圖像形式的提交按鈕
password——定義密碼字段,該字段中的字符被掩碼
reset——定義重置按鈕,用于清除表單中的所有數據
submit——定義提交按鈕,把表單數據發給服務器
post 和 get 方式的區別?
** GET**
查詢字符串(名稱/值對)是在 GET 請求的 URL 中發送的:
test/demo_form.asp?name1=value1&name2=value2
GET 請求可被緩存
GET 請求保留在瀏覽器歷史記錄中
GET 請求可被收藏為書簽
GET 請求不應在處理敏感數據時使用
GET 請求有長度限制
GET 請求只應當用于取回數據
POST
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
POST 請求不會被緩存
POST 請求不會保留在瀏覽器歷史記錄中
POST 不能被收藏為書簽
POST 請求對數據長度沒有要求
在搜索引擎中檢索信息等獲取信息,使用get方法。在注冊、登錄、提交用戶信息等提交信息,應使用post方法。
在input里,name 有什么作用?
1)規定input元素的名稱,用于對提交到服務器后的表單數據進行標識;
2)在客戶端提供給 JavaScript,使其可以引用表單數據;
3)用于單選/多選分組,相同name為一組。
radio 如何 分組?
通過相同name的值來分組
placeholder 屬性有什么作用?
提供可描述輸入字段預期值的提示信息,該提示會在輸入字段為空時顯示,并會在字段獲得焦點時消失。
type=hidden隱藏域有什么作用? 舉例說明
隱藏域在頁面中對于用戶是不可見的,在表單中插入隱藏域的目的在于收集或發送信息,以利于被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候,隱藏域的信息也被一起發送到服務器。
< input type="hidden" name="xxx" value="yyy">
當用戶使用提交按鈕提交信息時,將同時上傳value值為yyy的信息。