HTML之表單標籤

carson0408發表於2018-03-17
HTML

        表單標籤是最常用的標籤，常用於與伺服器的互動，比如一些文字框、按鈕、密碼、提交等等。我們常用的登入一個網頁的賬號密碼，就是使用表單標籤製作的。

        表單最外面的標籤就是<form>標籤，利用<form>表單內容</form>來修飾表單。其中<form>常用的有action和method兩個屬性，action主要是指表單向何處提交資料，一般為URL；而method則表示提交表單資料的HTTP方法，有get和post兩個取值。接下來看看form內部常用到的一些標籤。

1.input標籤

        input標籤中最重要的屬性就是type屬性，type屬性決定了它代表哪種輸入形式；type主要有button、checkbox、file、hidden、image、password、radio、reset、submit、text等等。以下通過例項來演示input標籤的用法。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<title>表單示例</title>
	<form action="01.html" method="get">
		姓名：<input type="text" name="name" value="張三"/><br/>
		手機號碼：<input type="text" id="text1" name="phone" value="1234567890"/><br/>
		密碼：<input type="password" id="text2" name="password" value="***********"/><br/>
		性別：<input type="radio" id="text3" name="sex" checked="checked"/>男<input type="radio" id="text4" name="sex" />女<br/>
		興趣愛好：<input type="checkbox" checked="checked"/>籃球<input type="checkbox"/>足球<input type="checkbox"/>乒乓球<input type="checkbox"/>羽毛球<br/>
		<br/>
		<input type="submit" value="提交"/>
		<input type="reset" value="重置資訊">
	</form>
</body>
</html>

得到如下網頁：


從上可以看出使用了text、password、radio、checkbox、submit、reset等型別的物件，其中文字類的預設值由value屬性實現，而單選框和核取方塊的預設值則由checked屬性實現。上面程式碼中顯示如果提交資料則會顯示01.html網頁的內容，接下來點選提交鍵，觀看結果。


        以上便是提交資料之後顯示的頁面，也就是form中action的值所對應的網頁。

2.select標籤

        我們在一個網頁填寫資訊的時候，常會遇到下拉選單，而select標籤就是用來製作下拉選單的。以下通過在上面的例子中新增下拉選單，使得頁面更加豐富。

        其中select是由option屬性集合組成的。每個option標籤的返回結果都是下拉選單的一個值。option有value和selected屬性，前者表示顯示的值，後者表示預設選中該值。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<title>表單示例</title>
	<form action="01.html" method="get">
		姓名：<input type="text" name="name" value="張三"/><br/>
		手機號碼：<input type="text" id="text1" name="phone" value="1234567890"/><br/>
		密碼：<input type="password" id="text2" name="password" value="***********"/><br/>
		性別：<input type="radio" id="text3" name="sex" checked="checked"/>男<input type="radio" id="text4" name="sex" />女<br/>
		興趣愛好：<input type="checkbox" checked="checked"/>籃球<input type="checkbox"/>足球<input type="checkbox"/>乒乓球<input type="checkbox"/>羽毛球<br/>
		生日:<select name="year">
				<option value="0">請輸入年份</option>
				<option value="1990" selected="selected">1990</option>
				<option value="1991">1991</option>
				<option value="1992">1992</option>
				<option value="1993">1993</option>
				<option value="1994">1994</option>
				<option value="1995">1995</option>
				<option value="1996">1996</option>
				<option value="1997">1997</option>
				<option value="1998">1998</option>
		
		</select>
		<select name="month" >
				<option value="0">請輸入月份</option>
				<option value="1" selected="selected">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
		
		</select>
		<select name="day" >
				<option value="0">請輸入天</option>
				<option value="1" selected="selected">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
		
		</select>
		<br/>
		<br/>
		<input type="submit" value="提交"/>
		<input type="reset" value="重置資訊">
	</form>
</body>
</html>

得到如下網頁，可以看到下拉選單的顯示效果。


3.textarea標籤

         textarea標籤表示多行輸入文字標籤，通過cols和rows來控制可見列數和可見行數。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<title>表單示例</title>
	<form action="01.html" method="get">
		姓名：<input type="text" name="name" value="張三"/><br/>
		手機號碼：<input type="text" id="text1" name="phone" value="1234567890"/><br/>
		密碼：<input type="password" id="text2" name="password" value="***********"/><br/>
		性別：<input type="radio" id="text3" name="sex" checked="checked"/>男<input type="radio" id="text4" name="sex" />女<br/>
		興趣愛好：<input type="checkbox" checked="checked"/>籃球<input type="checkbox"/>足球<input type="checkbox"/>乒乓球<input type="checkbox"/>羽毛球<br/>
		生日:<select name="year">
				<option value="0">請輸入年份</option>
				<option value="1990" selected="selected">1990</option>
				<option value="1991">1991</option>
				<option value="1992">1992</option>
				<option value="1993">1993</option>
				<option value="1994">1994</option>
				<option value="1995">1995</option>
				<option value="1996">1996</option>
				<option value="1997">1997</option>
				<option value="1998">1998</option>
		
		</select>
		<select name="month" >
				<option value="0">請輸入月份</option>
				<option value="1" selected="selected">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
		
		</select>
		<select name="day" >
				<option value="0">請輸入天</option>
				<option value="1" selected="selected">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
		
		</select>
		<br/>
		自我評價：<textarea cols="20" rows="2"></textarea>
		<br/>
		<input type="submit" value="提交"/>
		<input type="reset" value="重置資訊">
	</form>
</body>
</html>

得到如下網頁：


4.表單整齊化

        之前講過表格標籤，表格看上去就比較整齊，所以在表單標籤中引入表格標籤，然後把表單元素作為表格的每個單元格的元素，那麼整體佈局就會比較整齊。程式碼如下所示：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
<body>
	<title>表單示例</title>
	<form action="01.html" method="get" id="f1">
		<table width="100%">
		<center>
		<tr>
		<td align="right">姓名：</td>
		<td><input type="text" name="name" value="張三"/></td>
		</tr>
		<br/>
		<tr>
			<td align="right">手機號碼：</td>
			<td ><input type="text" id="text1" name="phone" value="1234567890"/></td>
		</tr>
		<br/>
		<tr>
			<td align="right">密碼：</td>
			<td><input type="password" id="text2" name="password" value="***********"/></td>
		</tr>
		<br/>
		<tr>
			<td align="right">性別：</td>
			<td><input type="radio" id="text3" name="sex" checked="checked"/>男<input type="radio" id="text4" name="sex" />女</td>
		</tr>
		<br/>
		<tr>
			
			<td align="right">興趣愛好：</td>
			<td><input type="checkbox" checked="checked"/>籃球<input type="checkbox"/>足球<input type="checkbox"/>乒乓球<input type="checkbox"/>羽毛球</td>
		</tr>
		<br/>
		<tr>
			<td align="right">生日:</td>
			<td><select name="year">
					<option value="0">請輸入年份</option>
					<option value="1990" selected="selected">1990</option>
					<option value="1991">1991</option>
					<option value="1992">1992</option>
					<option value="1993">1993</option>
					<option value="1994">1994</option>
					<option value="1995">1995</option>
					<option value="1996">1996</option>
					<option value="1997">1997</option>
					<option value="1998">1998</option>
			
			</select>
		
			<select name="month" >
					<option value="0">請輸入月份</option>
					<option value="1" selected="selected">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
			
			</select>
			<select name="day" >
					<option value="0">請輸入天</option>
					<option value="1" selected="selected">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
			
			</select></td>
		<tr>
		<br/>
		<tr>
			<td align="right">自我評價：</td>
			<td><textarea cols="20" rows="2"></textarea></td>
		<tr>
		<br/>
		<tr>
			<td align="right"><input type="submit" value="提交"/></td>
			<td><input type="reset" value="重置資訊"></td>
		</tr>
		</center>
		</table>
	</form>
</body>
</html>

頁面佈局如下所示：


        很明顯，在表單標籤中新增了表格標籤後，將左右兩邊的佈局劃分的較之前的整齊。

相關文章