Learn_HTML_TryForm

for Learning book demo use

by Loki Jiang

HTML

<fieldset>
  <legend>表單介紹</legend>
  <form method="post" enctype="multipart/form-data">
    <table width="100%">
      <tr>
        <td width="100">帳號：</td>
        <td><input type="text" name="id" placeholder="請輸入帳號" /></td>
      </tr>
      <tr>
        <td>密碼：</td>
        <td><input type="password" name="pw" placeholder="請輸入密碼" /></td>
      </tr>

      <tr>
        <td>性別：</td>
        <td>
          <!-- name需相同，表示同一組單選，checked為預設勾選選項 -->
          <input type="radio" name="gender" value="男" />男
          <input type="radio" name="gender" value="女" checked />女
        </td>
      </tr>
      <tr>
        <td>興趣：</td>
        <td>
          <!-- name需相同，表示同一組複選，checked為預設勾選選項 -->
          <input type="checkbox" name="like" value="拍照" />拍照
          <input type="checkbox" name="like" value="看書" />看書
          <input type="checkbox" name="like" value="唱歌" />唱歌
          <input type="checkbox" name="like" value="寫網頁" checked />寫網頁
          <input type="checkbox" name="like" value="逛街" checked />逛街
        </td>
      </tr>
      <tr>
        <td>出生年份：</td>
        <td>
          <select name="select">
            <option value="1980">1980</option>
            <option value="1990">1990</option>
            <option value="2000" selected>2000</option>
            <option value="2010">2010</option>
          </select>
          年
        </td>
      </tr>
      <tr>
        <td width="100">上傳檔案：</td>
        <td><input type="file" name="upload" /></td>
      </tr>
      <tr>
        <td>留言訊息：</td>
        <td><textarea name="msg" cols="50" rows="5"></textarea></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input type="submit" value="送出" />
          <input type="reset" value="重置" />
        </td>
      </tr>
    </table>
  </form>
</fieldset>