HTML 課程Day3
課程大綱
Ø 表單Form以及表單元素
Ø 框架集（瞭解）及iframe(重點)
本課程視頻鏈接：http://edu.51cto.com/course/15538.html
一、表單標籤Form
1. 什麼是表單
表單在網頁中負責數據採集功能的。表單是有3部分組成：
（1）表單標籤 <form></form>
（2）表單域
（3）表單按鈕
2. Form標籤、
語法格式：
<form action=”url” method=”get|post”>
</form>
練習：
<form action="welcome.html" method="post">
<p>
用戶名 <input type="text" name="username" id="username" value="" />
</p>
<p>
</p>
<input type="submit" value="登錄"/>
</form>
屬性名 | 值 | 說明 |
action | URL | 提交的表單向何處發送數據 |
enctype | Multipart/form-data | 上傳文件時使用 |
method | Get post | 規定提交方法 |
target | _blank _self _parent _top framename | 在何處打開URL |
Autocomplete | On off | 規定表單是否啓用自動完成功能 |
Novalidate | Novalidate | 設置表單提交不驗證 |
3. 表單元素
3.1輸入框input(重點中的重點)
<input/> 用於蒐集用戶信息。
根據type屬性，決定輸入字段的形式（文本框，複選框、掩碼文本框、單選按鈕、按鈕等等）
input標籤
屬性值 描述
text 普通文本框
password 掩碼文本框
submit 提交按鈕
button 普通按鈕
reset 重置按鈕
radio 單選按鈕，一組單選按鈕必須是定義相同的name值
checkbox 複選按鈕，一次可以選擇多個，一組複選按鈕必須是定義相同的name值，方便取值
file 文件上傳文本框
hidden 隱藏域，會被提交
image 圖片按鈕，需配合src屬性使用
color 顏色按鈕
date 日期字段，帶有calender控件
datetime
datetime-local 日期字段，time字段，帶有calender控件
week 周，帶有calender控件
time 時、分、秒 帶有time控件
email 郵件地址
number 數字輸入文本框
range s數字輸入文本框，範圍
tel 電話號碼文本框
url url文本框
<p><input type="text" name="" id="" value="" /></p>
<p><input type="password" name="" id="" value="" /></p>
<p>
提交按鈕 <input type="submit" name="" id="" value="登錄" />
</p>
<p>
普通按鈕<input type="button" name="" id="" value="保存" />
</p>
其他屬性：
Placeholder ：定義文本框提示性的文字
Maxlength ： 設置文本框最多輸入的字符數
Readonly：只讀屬性
Disabled：禁用屬性，文本框，按鈕，複選框等
Checked：設置默認選中項，只適用於單選按鈕或複選按鈕
3.2 select下拉列表標籤
用法：
<!--
autofocus:自動獲取焦點
multiple：可以設置選中多個項
size：設置可見選項數目
-->
<select name="" autofocus="autofocus" size="2">
<option value="0">--請選擇省份--</option>
<option value="1" >北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="3">四川</option>
</select>
什麼時候使用select標籤？
一般當選項特別多時，checkbox不再適用，可以使用下列表
比如：學歷、省份、職位等
option標籤中可以通過設置selected=selected設置默認選項
3.3 多行文本域控件textarea
<textarea name="leavewords" rows="10" cols="40">你好，我是某某</textarea>
3.4 label標籤
<label>標籤一般和input標籤關聯使用
label標籤的兩種用法：
（1）<label><input type="checkbox" name="fruit" id="" value="0" /> 蘋果</label>
（2）<input type="checkbox" name="fruit" id="xigua" value="1" />
<label for="xigua">西瓜</label>
3.5 button標籤
定義一個按鈕標籤，<button>文本或圖像</button>
對應低版本的IE瀏覽器，button標籤，默認是普通的button按鈕，而其他的瀏覽器默認爲submit類型
<form action="" method="post">
<button>提交</button>
</form>
二、框架（瞭解）
知識內容：
活動框架 iframe
框架集 frameset
1. 活動框架iframe,這個框架可以內聯或包含另外一個網頁文檔
語法結構：<iframe></iframe>
實例：
<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tr height="100"><td colspan="2">高新區軟件園C區食堂管理系統</td></tr>
<tr height="600">
<td width="15%">
<ul>
<li><a href="usermanger/uadd.html" target="mainbox">員工添加</a></li>
<li><a href="usermanger/uedit.html" target="mainbox">員工修改</a></li>
<li><a href="usermanger/ulist.html" target="mainbox">員工查詢</a></li>
</ul>
</td>
<td width="90%">
<iframe src="usermanger/welceome.html" name="mainbox" width="100%" height="600">
你的瀏覽器不支持，請升級或更新瀏覽器
</iframe>
</td>
</tr>
</table>
常用屬性：
frameborder:是否顯示框架的邊框 0：不顯示，1：顯示
Scrolling:是否顯示滾動條
Yes：顯示
No:不顯示
Auto:自動處理
2. 框架集 frameset
<frameset ></frameset>
屬性rows表示分成幾行，一般用“，”隔開。
屬性cols表示分成幾列，一般用“，”隔開。
使用fameset標籤，不再需要body元素
主框架頁面：
<frameset rows="15%,85%">
<frame src="usermanger/top.html" />
<frameset cols="200,*">
<frame src="usermanger/navlist.html" />
<frame src="usermanger/welceome.html" name="mainbox" />
</frameset>
</frameset>
navlist.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><a href="uadd.html" target="mainbox">員工添加</a></li>
<li><a href="uedit.html" target="mainbox">員工修改</a></li>
<li><a href="ulist.html" target="mainbox">員工查詢</a></li>
</ul>
</body>
</html>