HTML表單
form表單
form表單用于把用戶輸入的數(shù)據(jù)提交給后臺服務(wù)器
name表示提交的表單名稱，action表示數(shù)據(jù)提交的地址性宏，methods表示數(shù)據(jù)提交的方式，有g(shù)et和post，默認是get
<form name="myform" action="url" method="get/post"><form>
<label>
<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）胰坟。
label 元素不會向用戶呈現(xiàn)任何特殊效果留拾。不過戳晌，它為鼠標(biāo)用戶改進了可用性。如果您在 label 元素內(nèi)點擊文本痴柔，就會觸發(fā)此控件沦偎。就是說，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上豪嚎。
HTML表單有四種
- <input>
- <textarea>
- <select>
- <button>
<input>
type="text"
單行文本輸入框
<input type="text" maxlength=10 placehoder="請輸入用戶名">type="password"
密碼輸入框
<input type="password" placehoder="請輸入用戶名">type="checkbox"
復(fù)選框
<input type="checkbox"> 男
<input type="checkbox"> 女type="radio"
單選框
<input type="radio">type="submit"
有提交動作
<input type="submit" value="Submit">type="button"
無提交動作
<input type="button" value="Button">
<textarea>
多行文本輸入框
<textarea rows="行數(shù)" cols="列數(shù)">
文本
</textarea>
<select>
創(chuàng)建單選或多選菜單
<select name="city ">
<!-- 下拉選框 -->
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
</select>
<button>
<button>提交</button>
所有的表單元素都要放在<form>標(biāo)簽里面搔驼，這樣才能確保數(shù)據(jù)信息可以提交
<form action="url" method="get/post">
<div class="username">
<label for="username">姓名</label>
<!-- 如果您在label 元素內(nèi)點擊文本，就會觸發(fā)name與for相同的控件 -->
<input type="text" name="username" placeholder="請輸入用戶名">
<!-- placeholder提示用戶輸入內(nèi)容疙渣，focus的時候小時匙奴，blur的時候顯示 -->
</div>
<div class="password">
<label for="password">密碼</label>
<input type="password" name="password" placeholder="請輸入密碼">
</div>
<div class="hobby">
<label for="hobby">愛好</label>
<input name="hobby" type="checkbox" checked> dance
<input name="hobby" type="checkbox"> swim
<!-- name相同的為同一組，checked表示默認選中 -->
</div>
<div class="sex">
<label>性別</label>
<input type="radio" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
<!-- name相同的為同一組妄荔，checked表示默認選中 -->
</div>
<textarea rows="10" cols="20">
<!-- 多行文本輸入框泼菌，沒有value -->
</textarea >
<div class=" city ">
<select name="city ">
<!-- 下拉選框 -->
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<!-- selected表示默認選中此項 -->
</select>
</div>
<input type="file " name="myfile " accept="image/png">
<!-- 文件上傳 accept控制可以上傳的文件格式 -->
<input type="hidden" name="csrf" value="12345623fafdffdd">
<input type="button" value="Button">
<!-- 點擊不會提交 -->
<input type="submit" value="Submit">
<!-- 點擊會提交 -->
<input type="reset" value="Reset">
<!-- 重置所有輸入 -->
<div class="button">
<button>提交</button>
</div>
</form>