昨天介紹完HTML表單常用的元件，今天我們就來時做一個吧~
我找了一個申請表作為範例，一起來將此表格做成表單
今天先來做表格的第一部分，光是第一部份就打了147行呢(汗

▲檔案:青年創業及啟動金貸款創業貸款申請表▲

還記得一開始怎麼做嗎?不記得的話可以到第二天的部份去看呦~ 手把手從VScode上手

這裡開頭不一樣的是，我將title改為檔案名，也新增網頁頁籤的icon

    <title>青年創業及啟動金貸款創業貸款申請表</title>
    <link rel="icon" href="https://i.imgur.com/aGlsnZ9.png"

icon可以使用任何繪圖軟體製作，大小建議是 16*16
如果不想自己做，可以找圖至此網頁
另外herf放的網址可以至圖片轉url將圖片轉換url

我們到 執行並偵錯(ctrl+shift+D)

按下去~將將~你的網頁跑出來了~這是目前沒有body的狀態

當我們打好第一部分的body...
將將將將將~~

啊~會不會覺得施了甚麼魔法~
當然沒有囉~是用我們昨天學到的技術，
然後經歷了??這個過程才完成這份表單的第一部分

既然是手把手教學
讓我們一起從頭開始做吧!

首先，我們先來把表單標題打上去

<h1>青年創業及啟動金貸款創業貸款申請表</h1> 
<h4> (申請金額 100 萬元以下適用)</h4>

還記得表單從什麼開始嗎? 沒錯! form 開始
<form action="" method="post">...</form>

那這邊我建了一個表格 < table >

• Table表格 < table >
• < tr > table row 表格列
• < th > table heading 表格開頭
• < td > table data 表格資料
  table部分不知道有沒有人跟我一樣一開始都搞不清楚什麼是"欄"什麼"列"
  後來我想到一個記憶方法跟大家分享可以記成:

係樹懶(C豎欄)
一直睡看起來
很累R(橫列R)
有沒有記起來了呢?

那我們把表格開頭打上去 "一、申請資料"

           <tr>
                <th>一、申請資料</th>
                <hr/>
            </tr>

這邊 <hr/> 是一條水平線

下一個Row放第一部份的 "一、申請人類別"

<tr>
     <td>
          <label>一、申請人類別:</label>
     </td>
     <td>
          <input type="radio" id="business" name="category" value="business">
          <label for="business">事業體</label>
          <input type="radio" id="principal" name="category" value="principal">
          <label for="principal">事業體之負責人</label>  
     </td>
</tr>

再不斷新增下一個 Row，用到的都是我們一起在第三天學到的元件

            <tr>
                <td>
                    <label for="person">二、負責人:</label>
                </td>
                <td>
                    <input type="text" id="person" name="person" minlength="2" maxlength="50">
                </td>
            </tr>

這是第二部分要輸入負責人，用文字輸入
在這邊我設定了文字至少要2個字 minlength="2"，最多50個字maxlength="50"

在下一個Row 三、事業體名稱 中，我使用下拉的選單
並且新增了 required 做為必選題

        <tr>
            <td>
                <label for="entity">三、事業體名稱:</label> 
            </td>
            <td>
                <select name="entity" id="entity" required>
                    <option value="CoLtd">股份有限公司</option>
                    <option value="limitedCompany">有限公司</option>
                    <option value="partner">合夥</option>
                    <option value="solo">獨資</option>
                    <option value="other">其他</option>
                </select>    
            </td>
        </tr>

接下來的四、五、六都是複合題，可以自己先試試挑戰看看，再來參考我打的歐XD

<tr>
    <td>
        <label>四、申請背景:</label>
    </td>
    <td>
        <input type="radio" id="bThis" name="background" value="bThis">
        <label for="bthis">曾獲貸本項貸款，獲貸金融機構：</label>
        <input type="text" id="bThis" name="background">
        <label>已全數清償：</label>
        <input type="radio" id="repayYes" name="repay" value="yes">
        <label for="repayYes">是</label>
        <input type="radio" id="repayNo" name="repay" value="no">
        <label for="repayNo">否</label>
        <br>
        <input type="radio" id="bOther" name="background" value="bOther">
        <label for="bOther">曾獲貸其他政府辦理之創業貸款：</label>
        <input type="text" id="bOther" name="background">
    </td>
</tr>

<tr>
    <td>
        <label>五、所獲技術、<br>獎項及輔導資源<br>(含事業體或申請人)：</label> 
        </td>
        <td>
        <input type="checkbox" id="resource" name="resource1" value="bGet">
        <label for="resource">曾獲貸其他政府辦理之創業貸款：</label>
        <textarea name="resource"  id="resource1"  placeholder="請輸入曾獲貸其他政府辦理之創業貸款。"></textarea>
        <br>
        <input type="checkbox" id="resource" name="resource2" value="bAwards">
        <label for="resource">曾獲相關獎項：</label>
        <textarea name="resource"  id="resource2"  placeholder="請輸入曾獲相關獎項。"></textarea>
        <br>
        <input type="checkbox" id="resource" name="resource3" value="bAwards">
        <label for="resource">經政府立案之育成機構輔導： </label>
        <textarea name="resource"  id="resource3"  placeholder="請輸入經政府立案之育成機構輔導。"></textarea>
    </td>
</tr>

<tr>
    <td>
        <label>六、本次申請之<br>貸款用途與金額：</label>
    </td>
    <td>
        <input type="radio" id="reserve" name="use" value="reserve">
        <label for="reserve">準備金及開辦費：</label>
        <input type="number" id="reserve" name="use" placeholder="新臺幣">
        <label>元，</label>
        <input type="number" id="reserve" name="use" value="reyear"=>
        <label>年</label>
        <input  type="number" id="reserve" name="use" value="reyear1" placeholder="含本金寬限期">
        <label>年。</label>
        <br>
        <input type="radio" id="turnover" name="use" value="turnover">
        <label for="turnover">週轉性支出：</label>
        <input type="number" id="turnover" name="use" placeholder="新臺幣">
        <label>元，</label>
        <input type="number" id="turnover" name="use" value="reyear"=>
        <label>年</label>
        <input  type="number" id="turnover" name="use" value="reyear1" placeholder="含本金寬限期">
        <label>年。</label>
        <br>
        <label>用途:</label>
        <input type="radio" id="costs1" name="use" value="costs1">
        <label for="costs1">水電燃料費</label>
        <input type="radio" id="costs2" name="use" value="costs2">
        <label for="costs2">薪資費用</label>
        <input type="radio" id="costs3" name="use" value="costs3">
        <label for="costs3">營業租金</label>
        <input type="radio" id="costs4" name="use" value="costs4">
        <label for="costs4">購料費用</label>
        <input type="radio" id="costs5" name="use" value="costs5">
        <label for="costs5">其他：</label>
        <input type="text" id="costs5" name="use">
        <br>
        <input type="radio" id="capital" name="use" value="turnover">
        <label for="capital">資本性支出：</label>
        <input type="number" id="capital" name="use" placeholder="新臺幣">
        <label>元，</label>
        <input type="number" id="capital" name="use" value="reyear"=>
        <label>年</label>
        <input  type="number" id="capital" name="use" value="reyear1" placeholder="含本金寬限期">
        <label>年。</label>
        <br>
        <label for="costs6">所購置機器設備：</label>
        <input type="text" id="costs6" name="use">
    </td>
</tr>

明天再繼續完成我們的HTML表單~