html表單的作用英岭？
html表單用于瀏覽器（Brower）向服務(wù)端(Server)提交數(shù)據(jù)時(shí)使用。應(yīng)用場(chǎng)景比如：用戶登錄，用戶注冊(cè)谁不。
常用的表單元素有哪些？
-
input (根據(jù)type屬性值的不同徽诲，作用也不同)刹帕，type常用值如下：
- type= "text" 文本輸入域
- type ="password" 密碼輸入域
- type="checkbox" 復(fù)選框
- type="radio" 單選按鈕
- type="file" 文件上傳
- type="hidden" 隱藏域
- type="button" 按鈕（不提交表單信息）
- type="sumbit" 按鈕（提交表單信息）
- type="reset" 按鈕 （重置表單信息）
-
select （下拉列表）
- 選項(xiàng)值（option）
-
textarea
- 多行文本域
下面通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)展示如上表單元素的使用
<!DOCTYPE html>
<html lang="zh">
<head>
<title>表單使用介紹</title>
<meta charset="UTF-8">
</head>
<body>
<div class="user_register">
<!-- action: 指定表單內(nèi)容提交到指定的url method: 指定提交表單數(shù)據(jù)的方式，常用的兩種方式(get/post)-->
<form action="/register" method="post">
<div class="username">
<label for="username">用戶名：</label> <!--顯示綁定：通過(guò)label標(biāo)簽的for屬性與指定的表單元素綁定谎替，作用：從而點(diǎn)擊此標(biāo)簽的時(shí)候相應(yīng)的作用于指定掛鉤的標(biāo)簽-->
<input id="username" name="username" type="text" placeholder="用戶名">
</div>
<div class="pwd">
<label for="pwd">密碼：</label>
<input id="pwd" name="pwd" type="password" value="12345678">
</div>
<div class="sex">
<!-- 通過(guò)name值的相關(guān)將radio按鈕分為一組-->
性別: <label><input name="sex" type="radio" value="1" checked>男</label> <!--隱式綁定：通過(guò)label標(biāo)簽的for屬性與指定的表單元素掛鉤偷溺，作用：從而點(diǎn)擊此標(biāo)簽的時(shí)候相應(yīng)的作用于指定掛鉤的標(biāo)簽-->
<label><input name="sex" type="radio" value="0">女</label>
</div>
<div class="habby">
愛好: <label><input name="habby" type="checkbox" value="2" checked>看書</label>
<label><input name="habby" type="checkbox" value="4" checked>聽歌</label>
<label><input name="habby" type="checkbox" value="6">游泳</label>
</div>
<div class="icon">
<label>頭像上傳<input name="icon" type="file"><label>
<div>
<div class="birthplace">
<select name="birthplace">
出生地: <option value="2" selected>北京</option>
<option value="4">上海</option>
<option value="6">深圳</option>
</select>
</div>
<div class="other">
<textarea name="other" value="2"></textarea>
</div>
<div class="btn">
<input type="button" value="button">
<input type="submit" value="submit">
<input type="reset" value="reset">
</div>
</form>
</div>
</body>
</html>
效果圖如下：
Paste_Image.png
綜上就是表單元素基本的使用，本人還在學(xué)習(xí)階段钱贯，后續(xù)還會(huì)補(bǔ)充挫掏。本文章歸饑人谷_nanhai和饑人谷所有，轉(zhuǎn)載須說(shuō)明來(lái)源秩命。
