此篇接續介紹口袋餐廳頁面的靜態 html 架構。

(1) html 程式碼
畫面示意圖請參考前一篇。介面開發的技巧如下：

• 導覽（nav）架構請參考「Day8-試試Vue3-會員登入後轉跳主頁」模板，就不再贅述。
• 口袋餐廳頁面主要由兩個表單組成，選單樣式設計參考 bootstrap5 表格文件。
  • 表單元素的下拉選單，選項可以先參考餐廳 API 中的第一筆資料做固定內容。試著顯示出最終渲染的資料結果，屆時著手編寫 JavaScript 時再回頭修改。
  • 整體表單排版方面參考 bootstrap5 表格底下的排版 (Layout)，讓欄位標籤和輸入框位置更符合理想畫面。
• 為提升使用者體驗，表單標籤 <label for="type"></label> 搭配 <input id="type"> 或 <select id="type"> 時，標籤的屬性 for 與 輸入欄位的屬性 id 名稱要一致。使用者點擊標籤名稱時會跳到輸入框，此時就可直接進行輸入或選取動作。

「口袋餐廳」挑選出的資料為該會員所有，其他會員無法瀏覽。挑完的資料會紀錄在新增的會員餐廳 API 後續會再說明。

<template>
  <div class="container">
    <ul class="nav main-nav mb-5">
      ...
    </ul>
    <section class="row mb-4">
      <div class="col"></div>
      <div class="col-4">
        <img src="https://images.unsplash.com/photo-1603481502506-275d81ffcdef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80" alt="關於喜愛的圖" class="img-fluid"/>
      </div>
      <div class="col-4">
        <form>
          <h1 class="mb-4 text-center">新增口袋餐廳</h1>
          <div class="row g-2 mb-3">
            <label for="type" class="col-sm-3 col-form-label">品牌受眾</label>
            <select name="品牌受眾" id="type" class="form-select col-sm">
              <option value="全部受眾" selected>請選擇品牌受眾</option>
              <option value="學生族群">學生族群</option>
            </select>
          </div>
          <div class="row g-2 mb-3">
            <label for="res-name" class="col-sm-3 col-form-label">品牌名稱</label>
            <select name="品牌名稱" id="res-name" class="form-select col-sm">
              <option value="全部品牌" selected>請選擇品牌名稱</option>
              <option value="有點義式麵">有點義式麵</option>
            </select>
          </div>
          <div class="row g-2 mb-3">
            <label for="address" class="col-sm-3 col-form-label">地址</label>
            <input class="form-control col-sm" type="text" placeholder="台北市大安區師大路39巷" disabled id="address">
          </div>
          <div class="d-flex justify-content-end">
            <button class="btn btn-lg btn-primary mb-4" type="submit">加入口袋</button>
          </div>
        </form>
      </div>
      <div class="col"></div>
    </section>
    <section class="mb-4">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">品牌受眾</th>
            <th scope="col">品牌名稱</th>
            <th scope="col">地址</th>
            <th scope="col" class="table-warning">動作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>學生族群</td>
            <td>有點義式麵</td>
            <td>台北市大安區師大路39巷</td>
            <td class="table-warning">
              <button>移除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
  </div>
</template>