表單Form以及表單元素，框架集（瞭解）及iframe(重點)

HTML 課程Day3

課程大綱

 

Ø 表單Form以及表單元素

Ø 框架集（瞭解）及iframe(重點)

本課程視頻連接：http://edu.51cto.com/course/15538.html

1、表單標籤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>

 

 

2、框架（瞭解）

知識內容：

活動框架 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>