<aside> 💡

Form跟Modal是未來Web程式設計常用的元件，雖然這學期可能用不到，未來需要的時候可以參考。

</aside>

Form

以第五週的表單(fee.html):

<!DOCTYPE html>
<html>
  <body>
    <form action="" method="post">
      <fieldset>
        <legend>個人資料</legend>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" size="10" placeholder="請輸入姓名" 
        maxlength="10" required /><br/>
        <label for="phone">手機(0999-999-999):</label>
        <input type="tel" id="phone" name="phone" pattern="0[0-9]{3}-[0-9]{3}-[0-9]{3}"><br/>
        <label for="class">班級：</label>
        <select id="class" name="class" required>
          <option value="資管一甲">資管一甲</option>
          <option value="資管一乙">資管一乙</option>
          <option value="資管二甲">資管二甲</option>
          <option value="資管二乙">資管二乙</option>
          <option value="其他">其他</option>
        </select><br/>
        <label for="introduction">自我介紹：</label><br/>
        <textarea id="introduction" name="introduction" rows="5" cols="30"
        placeholder="請輸入自我介紹" maxlength="100" required></textarea><br/>
      </fieldset>
      <fieldset>
        <legend>費用</legend>
        <label>會費：</label>
        <input type="radio" id="MembershipFee_1" name="membershipFee" value=1 />
        <label for="withMembershipFee">繳交</label>
        <input type="radio" id="MembershipFee_0" name="membershipFee" value=0 /> 
        <label for="withoutMembershipFee">不繳交</label><br/>
        <label>活動：</label>
        <input type="checkbox" id="program_0" name="program[]" value=0 />
        <label for="program_0">一日資管營</label>
        <input type="checkbox" id="program_1" name="program[]" value=1 />
        <label for="program_1">迎新茶會</label>
        <input type="checkbox" id="program_2" name="program[]" value=2 />
        <label for="program_2">迎新宿營</label>
        <br/>
      </fieldset>
      <input type="submit" value="送出" />
      <input type="reset" value="清除" />
    </form>
</html>

套用bootstrap

我們以freelance為例，套用bootstrap，首先，加上style:

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>費用表單</title>
    **<link rel="stylesheet" href="css/styles.css" />**
  </head>

接下來，套用bootstrap的樣式，最簡單的就是按鈕:

      <input class="btn btn-primary" type="submit" value="送出" />
      <input class="btn btn-secondary" type="reset" value="清除" />

image.png

Form Control

接下來，input先套上「form-control」

        <label for="name">姓名：</label>
        <input **class="form-control"** type="text" id="name" name="name" size="10" placeholder="請輸入姓名" 
        maxlength="10" required /><br/>
        <label for="phone">手機(0999-999-999):</label>
        <input class="form-control" type="tel" id="phone" name="phone" pattern="0[0-9]{3}-[0-9]{3}-[0-9]{3}"><br/>

image.png

Select

        <select **class="form-select"** id="class" name="class" required>
          <option value="資管一甲">資管一甲</option>
          <option value="資管一乙">資管一乙</option>
          <option value="資管二甲">資管二甲</option>
          <option value="資管二乙">資管二乙</option>
          <option value="其他">其他</option>
        </select><br/>

image.png