HTML中表單的製作

1.HTML交互式表單(form)

表單的製作:

2.列表框:

3.多行文本輸入控件:

<html>
	<head><title>表單的例子</title></head>
	<body>
		<form method="get" action="reg.jsp">
			<table>
				<tr>
					<td>用戶名:</td>
					<!--單行文本輸入控件-->
					<td><input type="text" name="user" value="遊客" size=""30></td>  
				</tr>
				<tr>
					<td>密碼:</td>
					<!--口令輸入控件-->
					<td><input type="password" name ="pwd"></td>  
				</tr>
				<tr>
					<td>性別:</td>
					<!--運用單選框-->
					<td>
						<input type="radio" name="sex" value="1" checked>男
						<input type="radio" name="sex" value="0" >女	
					</td>  
				</tr>
			
				<tr>
					<td>興趣:</td>
					 <!--運用複選框-->
					 <td>
						<input type="checkbox" name="interest" value="football">足球
						<input type="checkbox" name="interest" value="basketball">籃球
						<input type="checkbox" name="interest" value="tennis">網球
						<input type="checkbox" name="interest" value="baseball">棒球<br>
					</td>
				</tr>
				<tr>
				<!--下拉框-->
					<td>最高學歷:</td>
					<td>
						<select size="1" name="education">
							<option value="" selected>...</option>
							<option value="小學" >小學</option> 
							<option value="初中" >初中</option>
							<option value="高中" >高中</option>
							<option value="大學" >大學</option>
							<option value="研究生" >研究生</option>
						</select><br>
					</td>
				</tr>
				
				<tr>
					<!--多行文本輸入,以下顯示3行每行30個字-->
					<td>個人簡介:</td><br>
					<td><textarea name="personal" rows="3" cols="30" >個人簡介</textarea><br></td>	
				</tr>
				<tr>
					<!--隱藏控件-->
					<td><input type="hidden" name="id" value="001"></td>
				<tr>
					<!--重置按鈕-->
					<td><input type="reset" value="重寫 "></td>.<!--充值按鈕,使用value屬性更改控件內容-->
					<!--提交按鈕-->
					<td><input type="submit" value="註冊"></td><!--提交按鈕,使用value屬性更改控件內容-->
				</tr>
			</table>
		</form>
	</body>
</html>

顯示結果:

發佈了120 篇原創文章 · 獲贊 18 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章