012---表單、下拉選單和表單域

一、表單基本語法形式

完整的表單由表單域、提示文字、表單控制元件組成。

1.輸入框控制元件：input

<input/>

是一個單標籤，效果如下（左圖滑鼠沒有放進去，右圖滑鼠點選後）：

input控制元件的屬性：

注意：

①對於單選按鈕，如果一組有兩個，那麼給這兩個控制元件設定同一個name值，那麼就可以二選一。如：

性別：	<input type="radio" name="sex" />女
		<input type="radio" name="sex" />男

那麼如下圖，男、女只能選一個，不可多選：

如果沒有設定相同的name值，那麼就會出現以下情況：

②如果要預設選中則可以這樣：

	性別：	<input type="radio" checked="checked" />女
		<input type="radio"/>男<br/>

那麼就會預設選中那一項：

③提交、重置、普通按鈕

<input type="button" value="普通按鈕" /><br/><br/>
<input type="submit"/ value="提交"><br/><br/>
<input type="reset"/ value="重置按鈕">

④maxlength

使用者名稱：<input type="text" value="請輸入使用者名稱" /><br/>
密碼：	<input type="password" maxlength="6" /><br/>

效果：

密碼只能輸入6個，並且text的輸入框的value值可以在輸入的時候刪除，這時候的value值起到提示的作用。

2. 文字域textarea（雙標籤）

類似於網友評價，留言等

<textarea></textarea>

輸入的內容多的話會自動換行，如果很多，還會出現滾動條。並且用滑鼠拉動它的右下角紅箭頭的部分，它的大小會發生變化。如下圖：

在HTML中可以通過屬性cols控制文字域的每行的字元數，通過屬性rows控制顯示的行數。但在學過CSS後可以直接通過設定文字域的寬和高來對文字域進行限制，所以這個很少使用。

二、下拉選單

基本語法：

<select name="" id="">
	<option value="">點選進行選擇</option>
	<option value="">1</option>
	<option value="">2</option>
	<option value="">3</option>
</select>

效果：

如果需要設定預設選中哪一個可以使用selected。如：

<select name="" id="">
	<option value="">點選進行選擇</option>
	<option value="" selected="selected">1</option>
	<option value="">2</option>
	<option value="">3</option>
</select>

就會：

三、表單域

語法：

<form action="xxx.php" method="post/get" name="userMSG">
	.....
</form>

解釋：

①action表示將表單域裡面的內容提交到xxx.php，其中xxx.php是PHP文件。

②method表示表單域裡的內容以何種方式提交，有兩種方式，分別是post和get

③name表示此表單域裡的內容表示哪一類，如登入人資訊、學生學籍等

例如：

<form action="xxx.php" method="post/get" name="userMSG">
	使用者名稱：<input type="text" value="請輸入使用者名稱" /><br/>
	密碼：	<input type="password" maxlength="6" /><br/>
	性別：	<input type="radio" checked="checked" />女
		<input type="radio"/>男<br/><br/>

	<input type="button" value="普通按鈕" /><br/><br/>
	<input type="submit"/ value="提交"><br/><br/>
	<input type="reset"/ value="重置按鈕">
</form>

這樣就可以進行提交，並且可以重置。