玩轉HTML中表單標籤的使用

        html中標籤個數不多,但是標籤的屬性非常之多,所以實際除非專業做前端的,否則沒必要把所有的屬性都記下來,需要查查w3c文檔即可,只需要掌握常見的用法,看得懂即可。詳細請查閱:W3C官網網站

表單用於蒐集不同類型的用戶輸入,表單由不同類型的標籤組成,相關標籤及屬性用法如下:

1、<form>標籤 定義整體的表單區域

  • action屬性 定義表單數據提交地址
  • method屬性 定義表單提交的方式,一般有“get”方式和“post”方式

2、<label>標籤 爲表單元素定義文字標註

3、<input>標籤 定義通用的表單元素

  • type屬性
    • type="text" 定義單行文本輸入框
    • type="password" 定義密碼輸入框
    • type="radio" 定義單選框
    • type="checkbox" 定義複選框
    • type="file" 定義上傳文件
    • type="submit" 定義提交按鈕
    • type="reset" 定義重置按鈕
    • type="button" 定義一個普通按鈕
    • type="image" 定義圖片作爲提交按鈕,用src屬性定義圖片地址
    • type="hidden" 定義一個隱藏的表單域,用來存儲值
  • value屬性 定義表單元素的值
  • name屬性 定義表單元素的名稱,此名稱是提交數據時的鍵名

4、<textarea>標籤 定義多行文本輸入框

5、<select>標籤 定義下拉表單元素

6、<option>標籤 與<select>標籤配合,定義下拉表單元素中的選項

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表單</title>
</head>
<body>
	<h1>註冊表單</h1>
	 <!--1. form標籤定義一個表單區域,其action屬性定義表單數據提交的地址,form的method屬性定義提交方式,get/post-->
	<form action="http://www.baidu.com/...." method="get">	
		<div>
			<!-- 2. label標籤定義表單控件的文字標註,input標籤類型爲text定義了一個單行文本輸入框  -->
			<label for="username">用戶名:</label>
			<input type="text" name="username" id="username" />
		</div>		
		<br>
		<div>
			<!--3.  input類型爲password定義了一個密碼輸入框  -->
			<label for="password">密&nbsp;&nbsp;&nbsp;碼:</label>
			<input type="password" name="password" id="password">
		</div>
		<br>
		<div>
			<!-- 4. input類型type爲radio定義了一個單選框  -->
			<label>性&nbsp;&nbsp;&nbsp;別:</label>
			<input type="radio" name="gender" value="0" id="male"> <label for="male">男</label>
			<input type="radio" name="gender" value="1" id="female"> <label for="female">女</label>
			<input type="radio" name="gender" value="2" id="renyao"> <label for="renyao">中性</label>
		</div>
		<br>
		<div>
			<!-- 5 。input類型爲checkbox定義了複選框  -->
			<label>愛&nbsp;&nbsp;&nbsp;好:</label>
			<input type="checkbox" name="like" value="study"> 學習
			<input type="checkbox" name="like" value="python"> python
			<input type="checkbox" name="like" value="frontend"> 前端
			<input type="checkbox" name="like" value="beauty"> 美少女

		</div>

		<br>

		<div>
			<!-- 6 。input類型爲file定義上傳照片或文件等資源  -->
			<label>美&nbsp;&nbsp;&nbsp;照:</label>
			<input type="file" name="">
		</div>
		<br>

		<div>
			<!-- 7. textarea定義多行文本輸入  -->
			<label>個人介紹:</label>
			<textarea name="introduce"></textarea>
		</div>
		
		<br>

		<div>
			<!--8.  select定義下拉列表選擇  -->
			<label>籍&nbsp;&nbsp;&nbsp;貫:</label>
			<select name="site">
				<option value="0">北京</option>
				<option value="1">上海</option>					
				<option value="2">河南</option>	
				<option value="3">河北</option>	
				<option value="4">廣州</option>	
			</select>

		</div>
		<br>

		<input type="hidden" name="hid01" value="12">

		<div>
			<!--9. input類型爲submit定義提交按鈕  , 還可以用圖片控件代替submit按鈕提交,一般會導致提交兩次,不建議使用。如:-->
			<input type="submit" name="" value="提交">  
			<!-- <input type="image" src="images/goods.jpg" name=""> -->

            <!-- input類型爲reset定義重置按鈕  -->
			<input type="reset" name="" value="重置">
		</div>
		
		<br/>
		
		<div >
			<!--<button> 元素定義可點擊的按鈕-->
			<button type="button" onclick="alert('Hello World!')">Click Me!</button>
			
		</div>


	</form>
</body>
</html>

效果如下:

2.html內嵌框架

html內嵌框架

<iframe>標籤會創建包含另外一個html文件的內聯框架(即行內框架),src屬性來定義另一個html文件的引用地址,frameborder屬性定義邊框,scrolling屬性定義是否有滾動條,代碼如下:

<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

內嵌框架與a標籤配合使用

a標籤的target屬性可以將鏈接到的頁面直接顯示在當前頁面的iframe中,代碼如下:

<a href="01.html" target="myframe">頁面一</a>
<a href="02.html" target="myframe">頁面二</a>
<a href="03.html" target="myframe">頁面三</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>

 

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