金魚也能學會寫網頁-表格與表單

2021-08-04

2022-03-14

一開始只是興趣使然，寫了一篇關於網頁框架的簡單筆記，不過幾經思考後，還是想把它寫成網頁相關的系列筆記，希望在忘了一些東西時，能有個地方可以快速找回記憶。☺️

💡 Hint: 以下筆記內容所使用的作業系統為"Windows 10"

📝 製作表格

基本結構(2欄1列):

<table>
    <tr>
        <td>第一欄</td>
        <td>第二欄</td>
    </tr>
</table>

表格結構圖:

📓 基本構成元素

元素	說明
`<table></table>`	表示整個表格的區塊
`<tr></tr>`	表示橫欄
`<th></th>`	表示欄位標題
`<td></td>`	表示直欄

📓 實際的例子

<table border='1'>
    <tr>
        <th>姓名:</th>
        <td>王小明</td>
    </tr>
    <tr>
        <th>性別:</th>
        <td>男</td>
    </tr>
    <tr>
        <th>年齡:</th>
        <td>10</td>
    </tr>
    <tr>
        <th>身分:</th>
        <td>學生</td>
    </tr>
</table>

暫時加上 border 屬性(表格框線)，以便確認顯示結果。

📝 設定表單區塊

製作表單時，必須要以<form>~</form>宣告整個表單區塊。<form>~</form>之間的範圍，就是在按下傳送按鈕後，實際會傳送到主機的範圍。

📓 `<form>`元素基本語法

1	<form id="表單名稱" action="資料接收端的路徑" method='資料傳送方式'></form>

id屬性: 識別資料來自哪個表單
action屬性: 資料接收端的路徑(多半是網站主機上的程式)
method屬性: 資料傳送方式，可設定為 get(將資料當作URL的一部份進行傳送) 或 post(將資料當作文件文本傳送)

<form id="entryform" action="#" method="post">
    <table border='1'>
        <tr>
            <th>姓名:</th>
            <td>王小明</td>
        </tr>
        <tr>
            <th>性別:</th>
            <td>男</td>
        </tr>
        <tr>
            <th>年齡:</th>
            <td>10</td>
        </tr>
        <tr>
            <th>身分:</th>
            <td>學生</td>
        </tr>
    </table>
</form>

📝 製作表單

<input>元素適用於輸入資料的元素，依據 type 屬性的不同可產生不同種類的輸入欄位。

<select>元素可用來製作下拉式選單，選項則以 option 元素撰寫

📓 加入文字欄位

設定 type=“text”

1	<input type="text" name="欄位名稱">

實例:

<form id="entryform" action="#" method="post">
    <table border='1'>
        <tr>
            <th>姓名:</th>
            <td><input type="text" name="欄位名稱"></td>
        </tr>
    </table>
</form>

📓 加入多行文字輸入方塊

<textarea>是用來輸入多行文字的元素
rows、cols 屬性的值分別代表輸入方塊顯示時的橫列數與每列字數，但實際輸入資料可以超過列數限制
輸入區塊的大小，會隨著不同瀏覽器而有所不同，可以用之後介紹的 CSS 指定尺寸

1	<textarea name="欄位名稱" rowa="顯示的橫列數" cols="顯示的每列字數">

實例:

<form id="entryform" action="#" method="post">
    <table border='1'>
        <tr>
            <th>意見回饋:</th>
            <td><textarea name="feedback" rowa="4" cols="40"></textarea></td>
        </tr>
    </table>
</form>

📓 加入下拉式選單

option 元素中的 value 屬性，用來指定實際傳送到主機的值
設定預選的選項，則在 option 元素上加上 selected 即可

<select name="欄位名稱">
<option value="傳送資料值">選項顯示文字</option>
...
</select>

實例:

<form id="entryform" action="#" method="post">
    <table border='1'>
        <tr>
            <th>居住縣市:</th>
            <td>
            <select>
            <option value="select">請選擇</option>
            <option value="台北">台北</option>
            <option value="台中">台中</option>
            <option value="高雄">高雄</option>	
            </select>
            </td>
        </tr>
    </table>
</form>

📓 加入單選方塊

設定 type=“radio”
name 屬性必須被設定為相同名稱，讓使用者只能選擇其中一個
有要預設勾選的項目，可以在項目上加上 checked

1	<input type="radio" name="資料群組名稱" value="資料傳送值">

實例:

<form id="entryform" action="#" method="post">
    <table border='1'>
        <tr>
            <th>性別:</th>
            <td>
            <input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女
            </td>
        </tr>
    </table>
</form>

📓 加入多選方塊

設定 type=“checkbox”
每個選項的 name 屬性值不可相同
要預設勾選的項目，可以在選項加上 checked

1	<input type="checkbox" name="資料名稱" value="資料傳送值">

實例:

<form id="entryform" action="#" method="post">
    <table border='1'>
        <tr>
            <th>喜好:</th>
            <td>
            <input type="checkbox" name="like1" value="滷蛋">滷蛋
            <input type="checkbox" name="like2" value="荷包蛋">荷包蛋
            <input type="checkbox" name="like3" value="糖心蛋">糖心蛋
            </td>
        </tr>
    </table>
</form>

📓 加入檔案上傳按鈕

設定 type=“file” 可產生將檔案上傳到主機的按鈕
按鈕型式依照瀏覽器不同而有所差異

1	<input type="file" name="資料名稱">

實例:

<form id="entryform" action="#" method="post">
    <table border='1'>
        <tr>
            <th>照片:</th>
            <td><input type="file" name="photo"></td>
        </tr>
    </table>
</form>

📓 加入清除重填、送出按鈕

設定 type=“reset” 可產生清除重填按鈕
設定 type=“submit” 可產生送出按鈕
修改 value 屬性值可以變更按鈕顯示文字

1	<input type="按鈕種類" value="按鈕顯示文字">

實例:

<form id="entryform" action="#" method="post">
    <table border='1'>
        <tr>
            <td>
                <input type="reset" value="清除重填">
            </td>
            <td>
                <input type="submit" value="提交">
            </td>
        </tr>
    </table>
</form>

🚀 BONUS: 好用的表單屬性

autofocus 屬性: 網頁開啟時，自動將游標停在指定的表單元件上。

1	<input type="text" name="example" autofocus>

每個網頁中只能設定一個 autofocus 屬性。

autocomplete 屬性: 依照以前輸入過的內容自動輸入。沒有設定時，預設 autocomplete=“on”，關閉自動輸入則設定為 off。

1	<input type="text" name="example" autocomplete="off">

placeholder 屬性: 在表單元件中顯示簡短的輸入提示，幫助使用者輸入。

1	<input type="text" name="example" placeholder="輸入文字">

required 屬性: 在表單元件上設定這個屬性，表示它是一個"必填"欄位。

<form id="entryform" action="#" method="post">
    <table border='1'>
        <tr>
            <th>性別:</th>
            <td>
            <input type="radio" name="sex" value="男" required>男
            <input type="radio" name="sex" value="女" required>女
            </td>
        </tr>
        <tr>
            <td>
                <input type="reset" value="清除重填">
            </td>
            <td>
                <input type="submit" value="提交">
            </td>
        </tr>
    </table>
</form>

技術類文章