### form表單標簽
`<form></form>`定義表單的開始位置和結束位置,表單提交時的內容就是`<form>`表單中的內容
#### 使用格式
```
<form action="接受表單內容的地址" name="表單名稱" method="post|get">...</form>
```
#### 屬性
* name 表單名稱
* method 傳送數據的方式,分為`post`和`get`兩種方式
>[info] get方式提交時,會將表單的內容附加在URL地址的后面,所以限制了提交的內容的長度,不超過8192個字符,且不具備保密性
> post方式提交時,將表單中的數據一并包含在表單主體中,一起傳送到服務器中處理,沒有數據大小限制
* action 表單數據的處理程序的URL地址,如果為空則使用當前文檔的URL地址,如果表單中不需要使用action屬性也要指定其屬性為no
* enctype 設置表單的資料的編碼方式
* target 和超鏈接的屬于類似,用來指定目標窗口,默認值是`_self `,可選值`_blank`表示在新網頁中打開
### input 文本域和密碼 單標簽
使用格式
```
<input type="" name="" value="" size="" maxlength="">
```
* type text時為文本輸入域;為password為密碼輸入域
* name 定義控件名稱
* value 初始化值,打開瀏覽器時,文本框中的內容
* size 設置控件的長度
* maxlength 輸入框中最大允許輸入的字符數
### 提交、重置、普通按鈕
* type="submit"時,為提交按鈕
* type="reset"時,為重置按鈕,清除當前的輸入
* type="button"時,為普通按鈕
### 單選框和復選框
* 單選按鈕 當type="radio"時,如果只能選擇一個,將name設置為相同即可
* 復選框 當 type="checkbox"時
* 單選框和復選框都可以使用”cheked“屬性來設置默認選中項
### 隱藏域
當`<input type="hidden">`時,為隱藏表單域
### textarea 多行文本域
用法,使用`<textarea>`標記可以實現一個,能夠輸入多行文本的區域
```
<textarea name="name" rows="value" cols="value" value="value"> ... ... <textarea>
```
rows屬性和cols屬性分別用來指定,顯示的行數和列數,單位是字符個數
### select 菜單下拉列表域
使用方法
~~~
<select name="" size="value" multiple="multiple">
<option value="value" selected>選項1</option>
<option value="value">選項2</option>
<option value="value">選項3</option>
</select>
~~~
* multiple 不用賦值,其作用是,表示用可以多選的下來列表,如果沒有這個屬性就只能單選
* size 設置列表的高度
#### option 標簽
* name 定義這個列表的名稱
* value 給選項賦值,指定傳送到服務器上面的值
* selected 指定默認的選項
例子
~~~
<!DOCTYPE html>
<html>
<head>
<title>表單設計</title>
<meta charset="utf-8">
</head>
<body>
<form target="_blank">
帳號 <input type="text" name="name" value="請輸入用戶名" size="10" maxlength="8">
<br />
<br />
密碼 <input type="password" name="password" size="10" maxlength="8">
<br />
<br />
性別 <input type="radio" name="sex">男<input type="radio" name="sex">女
<br />
<br />
愛好 <input type="radio" name="ty">體育<input type="radio" name="sing">唱歌
<br />
<br />
自我介紹<br />
<textarea name="intro" rows="5" cols="40"></textarea><br />
地址<br />
<select name="area" multiple="multiple">
<option value="lyg">連云港</option>
<option value="nj">南京</option>
<option value="sh">上海</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>
~~~
顯示效果
