1 <META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">
2 <html>
3 <head>
4 <title>一日十行-PHP教學1</title>
5 </head>
6 <body>
7 頁面內容第一行<br>
8 頁面內容第二行<p>
9 </body>
10 </html>
今天我們要加入的內容是以棕色的字體來標示的，我們直接學寫表單，不過，原檔案裡面的文字斷行範例的說明，也就是
.
.
.
7 頁面內容第一行<br>
8 頁面內容第二行<p>
.
.
這2行我們先刪掉，那只是做例子解說用的，今天只有6行，但是要解釋的東西不少，所以今天的原始碼總共會有14行，原始碼如下：
1 <META HTTPEQUIV="Content-Type" CONTENT="text/html;CHARSET=big5">
2 <html>
3 <head>
4 <title>一日十行-PHP教學2</title>
5 </head>
6 <body>
7 <table>
8 <tr><td colspan="2" align="center">寫入設定檔</td></tr>
9 <tr><td>資料庫管理員名稱</td><td><input type="text"></td></tr>
10 <tr><td>資料庫管理員密碼</td><td><input type="text"></td></tr>
11 <tr><td colspan="2" align="center"><input type="submit" value="送出"></td></tr>
12 </table>
13 </body>
14 </html>
藍色的部分我們就不再說明了，我們來說明今天的棕色部分。
棕色第1行（7行）的<table>和棕色最後1行（12行）的</table>是成對的標籤，這個標籤標示了在這一對標籤裡的部分是「表格」的意思，是告訴瀏覽器：「這裡開始到那裡之間有一個表格喔！」
第8行的<tr>和這一行最後面的</tr>這兩個標籤包起來的部份是一「列」的意思，在第9、10、11行的開頭和結尾也都可以看得到，也就是說這個表格有幾列，就會有幾組<tr>和</tr>的標籤，這樣理解乎？
很多人「列」和「欄」分不清楚，那是因為我們中文還有個「行」的概念也可以用在表格上，在面對表格時，我們先忘記「行」吧，表格只有「列」和「欄」，我下面如果提到「行」，就是指要你去看原始碼的「第幾行」，OK？如果你還是搞不太清楚列和欄怎麼分，就打開你的Word，插入一個表格，他就會問你要插入的表格是幾欄、幾列，你不必改預設值插入看看，應該會有一個二列五欄的表格呈現在畫面上，你看了大概就清楚哪個是欄哪個是列了。
....我不放心，看來還是做一下範例好了....下面這個表格就是二列三欄，瞭解哪個是「列」哪個是「欄」了嗎：
| 第一列第一欄 | 第一列第二欄 | 第一列第三欄 |
| 第二列第一欄 | 第二列第二欄 | 第二列第三欄 |
剛剛已經說過列要怎麼用標籤標出來，但是一個表格不管大小，都必須有「列」和「欄」的交叉結構才能成立，即使只有一列一欄，也要把那個欄給標示出來，而「一個欄」的標示標籤用的是<td>和</td>這一組標籤標出來的範圍。
先讓我們看第9行，這一列有兩欄，所以用了兩組的<td>和</td>標籤，在標籤之中就是欄的空間，可以放入文字、圖片、表單等要呈現的東西，第10行也是一樣，也就是說，一列二欄的寫法是：<tr><td>第一欄內容</td><td>第二欄內容</td></tr>。如果是一列三欄則是<tr><td>第一欄內容</td><td>第二欄內容</td><td>第三欄內容</td></tr>。這樣瞭解了嗎？
這兩列的原始碼寫法比較沒問題。可是我們回頭看第8行和第11行的原始碼，在;<td>這個標籤裏面還寫了一些其他的參數：「colspan="2" align="center"」在其中，這是什麼意思呢？
colspan="2"是表示這一個欄位和下方〈或上方〉的欄位排在一起時，這一個欄位會跨兩欄的範圍，也就是合併兩欄的欄位，使用這個參數的時候多練習一下，如果合併的欄位數設錯了，表格會看起來怪怪的，例如這個表格只有兩欄，可是你設成了colspan="3"，也就是合併了三欄，版面可能就會很詭異了，你可以試試看做一個多一點欄位的表格，然後有的合併兩欄，有的合併三欄甚至四欄來實驗一下。
跨兩欄的情況就像這樣：
| 第一列的一欄跨兩欄 | |
| 第二列第一欄 | 第二列第二欄 |
有關這個表格，最後說明一下跟在colspan="2"後面的align="center"這個參數，「align」在表格欄位的標籤之中是拿來指定這個欄位裡的文字、圖片、控制按鈕等東西在這個欄位裡的垂直位置，後面設成了「center」就是置中的意思，同理，如果要靠左對齊，就寫成「align="left"」當然，要靠右的話則是「align="right"」了。
表格的部分目前已經說完了，以後還會加入其他的參數，例如表格的邊線、顏色、底色等等，一樣，秉持著一日十行系列的精神，遇到時再來解釋。
接下來要講的是第9行和第10行的「<input type="text">」和第11行的「<input type="submit" value="送出">」這三個標籤。
這三個標籤叫做「表單標籤」，表單標籤必須靠程式的配合才會有作用，今天我們還沒講到程式部分，只是先做這個面板出來，晚一點我們會講到如何呼叫出讓這些表單標籤發揮作用的程式，先了解怎麼做表單。先來看前面兩個「<input type="text">」標籤，表單是用來蒐集資訊用的東西，如果要讓人家輸入文字，就用「input type="text"」這個標籤來做一個文字輸入框，後面一定得跟些參數的，但是我們明天再說，今天先學怎麼用表單標籤來做文字輸入框和下面要教的提交按鈕。
這就是可以輸入文字的文字輸入框：
第11行有沒有看到那個標籤也是一樣為「input type」開頭？這也是表單標籤，這一行裡寫的是「input type="submit"」，是用來製作提交表單各欄位輸入內容的「按鈕」〈比對一下雙引號裡的，做文字輸入框用的是「text」，而這裡是做按鈕用的「submit」，看出來不一樣了吧？！〉，在「input type="submit"」後頭會跟一個參數「value="送出"」，這是你要按鈕上面險是什麼字，例如你不是想要做一個 這樣的按鈕，而是想做一個 這樣的按鈕，那你就寫成<input type="submit" value="沒錯我已經完全寫好了！">即可。
今天的課程到此，雖然只有多6行，說明卻比昨天還多，仔細讀，多出來的部分請不要偷懶用複製、貼上的方式加到昨天的檔案裡，耐心一點一個字一個字打吧！這樣你如果出錯了，才會花心思去想哪裡有問題，也才真正學得起來。一樣，檔案寫好以後存檔，今天就按直接存檔就可以了，和昨天一樣打開來看看今日的成果如何，似乎看起來稍微鳥鳥的，按了送出按鈕也沒反應〈當然！〉，沒關係，慢慢的我們把它做起來就不鳥了。
下課！
沒有留言:
張貼留言