第10章表單
新課導語:在上一次課裡,我們共同學習了css樣式,通過學習我們知道了css樣式在專業的網頁製作過程中應用非常廣泛,是不是只有css樣式在網頁製作過程中應用廣泛呢!不是的,今天我們就再共同學習乙個在網頁製作過程中應用非常廣泛的元素。
在學習這個網頁元素之前,讓我們共同看三張**。
提問:通過這三張**,同學們看到了什麼共同點?
答案:都有文字框,這就是我們本次課要學習的新的網頁元素——表單。
板書:10 表單(居中)
講解:本章的學習目標有3點:
1、熟練掌握建立表單和插入文字域的方法
2、掌握核取方塊和單選按鈕的應用技巧
3、掌握列表和選單的建立方法和技巧
講解:本次課的學習目標是熟練掌握建立表單和插入文字域的方法,下面我們就來學習:使用表單。
講解:10.1 使用表單
板書:10.1 使用表單
講解:什麼是表單呢,我們先看看表單的定義。教材上沒有將表單的定義特別明確化,但是我們可以根據教材提供的知識,這樣定義表單。
板書:1、表單的定義
表單的定義:乙個容器,用來存放表單物件,並負責將表單物件的值提交給伺服器端的某個程式處理。
在這個定義當中,我們應該注意這兩個要點:1)表單是容器,2)表單是用來存放表單物件的。
表單的定義我們知道了,那麼如何使用表單呢,首先就需要先建立表單
板書:10.1.1 建立表單
講解:如何建立表單呢?大家請看大螢幕。
10.1.1 建立表單
在文件中插入表單的具體操作步驟如下。
(1)在文件視窗中,將插入點放在希望插入表單的位置。
(2)啟用「表單」命令, 文件視窗**現乙個紅色的虛輪廓線用來指示表單域。
表單建立分為兩種方法:
1、單擊「插入」面板「表單」選項卡中的「文字字段」按鈕,在文件視窗的表單**現乙個單行文字域。
2、選擇「插入》表單》文字域」命令,在文件視窗的表單**現乙個單行文字域。
操作:網頁製作系統,建立兩個空白網頁,分別採用以上兩種方法在上面插入表單。
講解:通過對網頁製作的學習,我們知道網頁中插入的任何元素,都需要對其進行屬性的設定。那麼表單包括哪些屬性呢?屬性的作用分別是什麼呢?我們來學習——表單的屬性。
板書:10.1.2 表單的屬性
10.1.2 表單的屬性
在文件視窗中選擇表單,「屬性」面板就會變成表單屬性面板。
表單「屬性」面板中一共包括6項屬性,各項屬性的作用如下:
1、「表單id」選項:是標記的name引數,用於標記表單的名稱。
穿插知識:form是html語言中標記表單的標籤,html語言是超文字描述語言,具體的作用是構建網頁的框架。這個知識點,我們在以往的講課過程中,多次強調,再次不再講解。
提問:id在哪個網頁元素出現過呢?
答案:網頁元素——****現過,作用是區別文件中插入的不同**。
講解:為什麼表單要有id(identification)呢,同樣的道理。當表單提交資料給伺服器時,伺服器要知道是哪個表單提供的資料,這時id就成了伺服器辨別不同表單的唯一要素。
操作:在第乙個新建的空白文件中,再次插入乙個表單。對比兩個表單的id名稱的不同,在**檢視下和設計檢視下**id。
2、「動作」選項:是標記的action引數,用於設定處理表單資料的動態網頁路徑。
講解:表單的資料要傳送到乙個動態的網頁上進行處理,action引數就是來定義該動態網頁的路徑的。
3、「方法」選項:是標記的method引數,用於設定將表單資料傳輸到伺服器的方法。
講解:方法有兩種,分別是:post和get方法,兩種方法的不同之處就是傳輸的資料字元數不同。
post方法支援長字元,get方法支援短字元,但是post方法保密性差,傳輸過程中能夠被黑客擷取,所以傳輸保密洩漏資料的
4、「編碼型別」選項:是標記的enctype引數,用於設定對提交給伺服器的資料使用的mime編碼型別。
5、「目標」選項:是標記的target引數,用於設定乙個視窗,在該視窗中顯示處理表單後返回的資料。
目標值有以下幾種:
◆ 「 blank」
◆ 「 parent」
◆ 「 self」
◆ 「 top」
◆ 「 new」
目標值_new在教材中沒有提出,但是屬性面板「目標」選項中有這樣的乙個值,所以在這裡,我們也把這個值的意義給同學們講解一下。
6、「類」選項:表示當前表單的樣式。
10.1.3 文字域
通常使用表單的文字域來接收使用者輸入的資訊,文字域包括單行文字域、多行文字域、密碼文字域3種。一般情況下,當使用者輸入較少的資訊時,使用單行文字域接收;當使用者輸入較多的資訊時,使用多行文字域接收;當使用者輸入密碼等保密資訊時,使用密碼文字域接收。
1.插入單行文字域
2.插入多行文字域
3.插入密碼文字域
4.文字域屬性
10.1.3.1 插入單行文字域
插入單行文字域有以下方法:
◆ 單擊「插入」面板「表單」選項卡中的「文字字段」按鈕,在文件視窗的表單**現乙個單行文字域。
◆ 選擇「插入>表單>文字域」命令,在文件視窗的表單**現乙個單行文字域。
在「屬性」面板中顯示單行文字域的屬性,可以根據需要設定該單行文字域的各項屬性。
10.1.3.2 插入多行文字域
插入多行文字域有以下方法:
◆ 單擊「插入」面板「表單」選項卡中的「文字區域」按鈕,在文件視窗的表單**現乙個多行文字域。
◆ 選擇「插入>表單>文字區域」命令,在文件視窗的表單**現乙個多行文字域。
在「屬性」面板中顯示多行文字域的屬性,可以根據需要設定該多行文字域的各項屬性。
10.1.3.3 插入密碼文字域
插入密碼文字域有以下方法:
◆ 單擊「插入」面板「表單」選項卡中的「文字字段」按鈕或「文字區域」按鈕,在文件視窗的表單**現乙個單行或多行文字域。
◆ 選擇「插入>表單>文字域」或「文字區域」命令,在文件視窗的表單**現乙個單行或多行文字域。
在「屬性」面板的「型別」選項組中選擇「密碼」單選項。此時,單行或多行文字域就變成密碼文字域。
10.1.3.4 文字域屬性
選中表單中的文字域,「屬性」面板**現該文字域的屬性,當插入的是單行文字域或多行文字域時,「屬性」面板如下所示:
文字域「屬性」面板各選項如下:
1、「文字域」選項
2、「字元寬度」選項
3、「最多字元數」選項
4、「型別」選項組
5、「單行」選項
6、「多行」選項
7、「密碼」選項
8、「行數」選項
9、「初始值」選項
10、「類」選項
10.1.4 隱藏域
隱藏域在網頁中不顯示,只是將一些必要的資訊儲存並提交給伺服器。
插入隱藏域胡方法如下:
單擊「插入」面板「表單」選項卡中的「隱藏域」按鈕,在文件視窗的表單**現乙個隱藏域。
選擇「插入》表單》隱藏域」命令,在文件的表單**現乙個隱藏域。
公開課教案
公開課教案 公頃和平方千公尺 教學設計 第1課時 教學目標 1 通過實際觀察與推算,初步認識常用的土地面積單位 公頃,體會1公頃的實際大小,建立1公頃的表象頃 10000平方公尺,會進行簡單的單位換算。2 經歷觀察 想象 推理 交流等數學活動,並在活動中豐富對公頃的認識,發展空間觀念,提高應用意識。...
公開課教案
年級四年級 人數40 上課時間 2011 10 23 執教老師徐紹鋒指導老師 王良教學內容 一 障礙跑 二 遊戲 1 認知目標 掌握通過不同的障礙的方法,初步學會快速安全通過障礙物 的技能,發展靈敏 速度等身體素質,提高越過障礙的能力。2 技能目標 通過一系列不同的障礙跑,讓學生在享受樂趣的同時愉悅...
公開課教案
教學內容 教學目標時間 課教學內容 序一 課堂常規1 集合隊伍2 師生問好 教師時間 班級人數 三 1 武術 五步拳40分鐘 1 創設良好的學習環境,激發學生對武術的興趣。2 讓學生初步掌握五步拳的基本動作和騰空旋轉 3 發展學生的創造力和表現力,在體育活動中培養學生合作 的能力及團結協作的精神。預...