技能目標

  掌握表格的基本用法

  掌握表單的用法

  掌握CSS的高階選擇器的用法

表格的基本結構  <table>

 行             <tr>

 列             

 單元格         <td>

表格的基本語法

 <table border=1px>

    <tr>               這裡表示1行有2列

       <td>單元格1</td>

       <td>單元格2</td>

    </tr>

 </table>

表格的跨行和跨列

 <table width="100%" border="1">

   <tr>

     <td colspan="3">學院成線</td>   跨列

   </tr>

   <tr>

     <td rowspan="2">白楊</td>      跨行

     <td>語文</td>

     <td>98</td>

   </tr>

五行三列

<table border=”1”>

  <tr>

     <td colspan=”3”>三年級五班學院的語文成績和數學成績

  </tr>

  <tr>

     <td rowspan=”2”>白楊</td>

     <td>語文</td>

     <td>98</td>

  </tr>

  <tr>

     <td>數學</td>

     <td>96</td>

  </tr>

  <tr>

     <td rowspan=”2”>楊晨</td>

     <td>語文</td>

     <td>92</td>

  </tr>

  <tr>

     <td>數學</td>

     <td>100</td>

  </tr>

</table>

表單是用來蒐集使用者資料

表單的應用場景

 表單在網頁中的應用有哪些？

  註冊、登入

  個人資訊記錄

  ....

表單的基本結構

表單元素：單選框，複選框，按鈕，文字框，密碼框，提交按鈕...等

Action=”” 提交到該網站的伺服器進行處理，檢測使用者是否存在...等

Action=”#”提交給本頁面

Method=”post”表單資料以post提交

<form method=”get” action=”#”>

  使用者名稱：<input type="text" name=”username”><br/>

  密碼：<input type="password" name=”password”><br/>

  <input type="submit">  此處顯示的是一個"提交"按鈕，若要改按鈕內的值則加屬性value="登入"

</form>

填寫使用者名稱和密碼按提交後，執行後呈現這樣的效果：

結論：以get方式提交，表單的資料能通過位址列獲得。因此資料提交會不安全

若method=”post”,填寫使用者名稱和密碼按提交後則效果為

結論：以post方式提交，表單資料並不是通過位址列來傳遞的，因此表單資料是安全的

第一點是表單資料的安全，第二點是當表單資料過多的時候，例如需要註冊時用到”性別”、”愛好”等，若以“get”方式提交，則位址列會呈現一大長串的資料，但位址列會有位元組數限制，存在有些表單資料沒傳到的情況，出現數據不完整的情況。

So，在真正做表單提交的時候，post方式更常用，在與後臺互動JavaScript等時通常用get

1、表單元素還有哪些屬性？

2、還有哪些常用表單元素

表單元素

<input type="text" name="fname" value="text">

       型別         名稱          值

這裡的name，將來通過這個名稱拿到對應的值

這裡的value，指的是文字框預設的內容

Check複選框   radio單選框   reset重置按鈕  file檔案框

愛好：<input type="checkbox" name="hobby" value="1"/>吃

      <input type="checkbox" name="hobby" value="2"/>喝

      <input type="checkbox" name="hobby" value="3"/>嫖

      <input type="checkbox" name="hobby" value="4"/>賭

上傳檔案：<input type="file" name=”file”/>

重置<input type="reset"/>   變為表單的初始狀態並不等於清空(例如：我原先在type=”text”還加上一個value=”請輸入使用者名稱”)

<input type="image" src="img/1.jpg"/>   定義影象形式的提交按鈕，src指的是影象的路徑

<input type=”button” >  普通的按鈕並且框裡面什麼東西都沒有，點選後無任何行為（可通過位址列看看字尾是否有多加的資料），要使按鈕框裡有內容，在加入value屬性

Size 指的是元素的寬度，即文字框或密碼框的長度

而maxlength指的是內容限制的長度，即文字內容的長度

Checked=”checked”   這裡前提條件是type為radio或checkbox時，然後這個選項導致網頁的初始狀態已經顯示了那個預設選項。

注意：

1、<input type="radio"/>男<input type="radio"/>女

如果單單上面這行是起不了單選框的作用，即男 女都可以選，要想達到互斥的效果，這個時候需要給標籤在加一個name屬性

<input type="radio" name=”sex”/>男<input type="radio" name=”sex”/>女

2、當type的屬性值是checkbox時，value的值是日後傳輸給資料庫的，伺服器拿到的是你選擇的選項就比如是1和2（你選擇了吃和喝）與當type的屬性值是text時，value的值是顯示預設的文字內容不同的

 列表框應用於下拉選項的，例：你所在的年級，選項有大一、大二、大三

 <select name="名稱" size="行數">

 <option value="值" selected="selected">

  ...

 </option>

 <option value="值">...</option>

 </select>

Select標籤代表列表框 selected=”selected”代表預設選中項（比如填寫的這個居多，方便）option代表選項

多行文字域，例如應用在籤網頁的協議 我同意、個人簡介

 <textarea name="showText" cols="x" rows="y">

          文字內容

 </textarea>

 textarea代表多行文字域，cols代表顯示的列數，rows代表顯示的行數

注意：多行文字域的”文字內容”和<input type=”text” value=”文字內容”>中的文字內容位置不一致

 表單的高階應用

 隱藏域

   type="hidden"

   只讀

   readonly="readonly"

 禁用

   disabled="disabled"

<input type=”hidden”> 一般用於動態網頁，運用在什麼地方呢？

使用者名稱：<input type=”text” value=”請輸入使用者名稱” readonly=”readonly”>

  這裡滑鼠點選後無游標沒辦法修改

<input type=”submit” value=”登入” disabled=”disabled”>

  這裡網頁的初始狀態，這個按鈕是灰色的不可點選狀態，當填寫完這個頁面內容，這個狀態還是灰色的。要想使其變為可點選狀態，要用到JavaScript指令碼與HTML相結合。

什麼是表單語義化

 1、符合W3C標準

 2、語義化的標籤

 3、結構合理、程式碼簡潔

簡而言之，每一個標籤都有自己的含義、範圍，選擇最合適的標籤搭配最合適的事

<input type="radio" name="sex" id="man"/><lable for="man">男</label>

  這句話的效果是單擊字“男”前面的圓圈或單擊字“男”都能使圓圈勾選