** 本博客著作權(quán)歸從這到那所有，轉(zhuǎn)載請注明出處 **
表單的作用
HTML表單用于接收不同類型的用戶輸入，用戶提交表單時向服務(wù)器傳輸數(shù)據(jù)，從而實現(xiàn)用戶與Web服務(wù)器的交互。
表單的工作機制
如何編寫表單
首先表單我們需要使用form標(biāo)簽
<form action="" method="post">
表單元素
</form>
這里介紹一下form使用的兩個屬性action method
| 屬性 | 值 | 描述 |
|---|---|---|
| action | URL | 規(guī)定當(dāng)提交表單時向何處發(fā)送表單數(shù)據(jù) |
| method | get、post | 規(guī)定用于發(fā)送表單數(shù)據(jù)的HTTP方法 |
更詳細(xì)的屬性介紹請點擊我
輸入元素
用的最多是輸入標(biāo)簽input，有類型屬性type來決定輸入類型。常見的輸入類型如下：
注意：
radiocheckbox還需要單獨設(shè)置value屬性
文本域
標(biāo)簽<input type="text">
<form>
My name: <input type="text" name="myname"><br>
</form>
顯示效果：
密碼字段
使用標(biāo)簽<input type="password">
<form>
密碼：<input tupe="password" name="password">
</form>
顯示效果：
單選按鈕
標(biāo)簽<input type="radio">
<form>
<input type="radio" name="sex" value="male">Male<br />
<input type="radio" name="sex" value="female">Female<br />
</form>
顯示效果：
復(fù)選框
標(biāo)簽<input type="checkbox">
<form>
<input type="checkbox" name="fruit" value="apple">Apple<br />
<input type="checkbox" name="fruit" value="banana">Banana<br />
<input type="checkbox" name="fruit" value="grape">Grape
</form>
顯示效果：
未選中
選中
提交按鈕
標(biāo)簽：<input type="submit">。當(dāng)用戶單擊確認(rèn)按鈕事，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性action定義了目的文件的文件名。
<form name="input" action="heml_form_action.php" method="get">
姓名<input type="text" name="name">
<input type="submit" value="提交">
</form>
顯示效果：
除了input外還有一些其他的表單輸入元素
注意：input標(biāo)簽不用閉合，以下標(biāo)簽是需要閉合的。
textarea
<form>
<textarea rows="10" cols="30">
我是多行文本輸入框
</textarea>
</form>
顯示效果：
select和option
<form>
<select name="city">
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="beijing">北京</option>
</select>
</form>
顯示效果：
label
這個標(biāo)簽主要是為input元素定義標(biāo)注（標(biāo)記）。
<form>
<label for="male">Male</label>
<input type="radio" name="sex" value="male"><br />
<label for="male">Female</label>
<input type="radio" name="sex" value="female">
</form>
顯示效果：
我們來寫個完整的例子
先看效果：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="login">
<form action="/getInfo" method="get">
<div class="submit">
<button>提交??</button>
</div>
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" value="test">
</div>
<div class="password">
<label for="password">密碼</label>
<input id="password" type="password" name="password" placeholder="輸入密碼">
</div>
<div class="hobby">
<label>愛好</label>
<input type="checkbox" name="hobby" value="read"> 讀書
<input type="checkbox" name="hobby" value="music"> 聽歌
<input type="checkbox" name="hobby" value="study"> 學(xué)習(xí)
</div>
<div class="sex">
<label>性別</label>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女
</div>
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>
<div class="select">
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="hangzhou">杭州</option>
</select>
</div>
<div class="textarea">
<textarea name="article">
多行文本
</textarea>
<br />
<input type="hidden" name="csrf" value="12345623fafdffdd">
<input type="button" value="Buttom" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</div>
</form>
</div>
</body>
</html>
