html基礎表單及其常用表單元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form action="http:\\www.baidu.com\a.aspx" method="post">
			<table border="1">
				<tr>
					<td>
						<label for="txtName">姓名:</label>
					</td>
					<td>
						<input id="txtName" name="txtName" maxlength="5" type="text" value="張三" readonly="readonly">
					</td>
				</tr>
				<tr>
					<td>
						郵箱:
					</td>
					<td>
						<input name="txtMail" type="text" disabled="disabled">
					</td>
				</tr>
				<tr>
					<td>密碼</td>
					<td><input name="txtPassword" type="password"></td>
				</tr>
				<tr>
					<td>
						確認密碼
					<td>
						<input name="txtSurePassword" type="password" />
					</td>
				</tr>
				<tr>
					<td>
						性別:
					</td>
					<td>
						<input id="radmale" name="gender" type="radio" value="male"><label for="radmale">男</label>
						<input checked="checked" name="gender" type="radio" value="female" />女
					</td>
				</tr>
				<tr>
					<td>
						興趣愛好:
					</td>
					<td>
						<input id="chk_1" name="hobby" type="checkbox" value="1"><label for="chk_1">籃球</lable>
						<input name="hobby" type="checkbox" value="2" checked="checked">游泳
						<input name="hobby" type="checkbox" value="3">棒球
						<input name="hobby" type="checkbox" value="4" checked="checked">乒乓球
					</td>
				</tr>
				<tr>
					<td>所在地區:</td>
					<td>
						省:
						<select name="province" multiple="multiple" size="2">
							<option value="0">請選擇</option>
							<option value="1">湖南</option>
							<option value="2" selected="selected">湖北</option>
						</select>
						市:
						<select name="city" id="">
							<option value="0">請選擇</option>
							<optgroup label="湖南">
								<option value="1_1">長沙</option>
							</optgroup>
							<optgroup label="湖北">
								<option value="2_1" selected="selected">武漢</option>
							</optgroup>
						</select>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<fieldset>
							<legend>請選擇感興趣的內容:</legend>
							<input name="hobbyContext" type="checkbox">操作系統
							<input name="hobbyContext" type="checkbox">Web前端
							<input name="hobbyContext" type="checkbox">.Net後端
						</fieldset>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						請仔細閱讀協議:
						<textarea name="" id="" cols="30" rows="10" readonly="readonly">
							請仔細閱讀協議:請仔細閱讀協議:請仔細閱讀協議:請仔細閱讀協議:請仔細閱讀協議:請仔細閱讀協議:請仔細閱讀協議:請仔細閱讀協議:請仔細閱讀協議:
						</textarea>
					</td>
				</tr>
				<tr>
					<td>
						請選擇圖片:
					</td>
					<td>
						<input type="file" name="">
					</td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="submit" value="註冊">
						<input type="reset" value="重置">
						<input type="button" value="按鈕">
					</td>
				</tr>
			</table>
			<input type="hidden" name="user_id">
			<embed src="xx.mp3" loop="true" autostart="true" name="bgss"></embed>
		</form>
	</body>
</html>


<!-- 

 form:表單
	  action:提交服務器的地址
      input:表單元素
			type:表單元素類型
				text:文本框
				password:密碼框
				radio:單選按鈕 
					  checked : checked 默認選中項
				checkbox:多選按鈕
				        checked : checked 默認選中項
				hidden:隱藏域,在頁面被隱藏,但是提交的時會上傳服務器
				textarea:文本域,用於輸入多行文本
				submit:點擊提交表單按鈕
				reset:點擊重置表單數據
				button:普通按鈕
				file:文件域, 用於上傳文件元素
	  select:下拉列表
			multiple:多個選擇
			option:下拉選項
			selected:selected默認選中項
	  fieldset:繪製方框內容標籤
			  legend:方框內容中的標題
	  embed:播放器,用於播放音樂等
		   src:播放地址
		   loop:是否循環播放

ID屬性的目的是在可以在客戶端,通過javascript來操作某個元素
所有元素都可以有ID , 並且每個元素的ID都不可以重複

name屬性的目的是將數據提交給服務器
 只有表單元素纔可以有name , 並且name是可以重複的
 
 表單提交其實就是提交表單元素的value的值
 
 get:方式提交,把數據封裝成了用&來鏈接起來的鍵值對的方式提交到服務器,因爲請求的地址長度是有限的,所以不能通過get方式來上傳文件。
	 因爲get提交的數據會直接顯示在url地址欄中,所以相對不安全。
 post:默認下, post提交也是用&把鍵值對鏈接起來。同時提交的內容沒有在url中顯示, post可以上傳文件。
 
 label:標籤可以配合表單元素ID使用
      for:id 點擊label中文字,使頁面對應的id獲取焦點
	  
 -->

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章