公開課教案表單

2023-01-16 16:21:02 字數 3441 閱讀 4469

第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 發展學生的創造力和表現力,在體育活動中培養學生合作 的能力及團結協作的精神。預...