lesson 5 practice

Form build

by Pansen

HTML

<!DOCTYPE html>
<html>
   <body>
      <div class="container">
         <h1>商品後台</h1>
         <hr />
         <form action=" /add-product" method="post">
            <div>
               <label for="product_name">商品名稱：</label>
               <input type="text" name="product_name" id="product_name" placeholder="請輸入產品名稱">
            </div>
            
            <div>
               <label class="btn" for="upload_img">上傳圖片：</label>
               <input id="upload_img"  type="file">
            </div>
            
            <div>
               <label for="product_price">產品價格：</label>
               <input type="text" name="product_price" id="product_price" placeholder="請輸入商品價格">
            </div>
            
            <div>
               <label for="product_type">產品類別：</label>
               <select name="product_type">
                  <option value="">--請選擇產品類別--</option>
                  <option value = "shirt">上衣類</option>
                  <option value = "jacket">外套類</option>
                  <option value = "pants">下身類</option>
                  <option value = "accessory">配件類</option>
               </select>
            </div>
            
            <div>
               <label for="comments">產品備註：</label>
               <textarea name="comments" id="comments" rows="5" cols="30"  placeholder="備註"></textarea>
            </div>
            
            <hr />
            
            <div>
               <label for="gender">性別：</label>
               <input type="radio" name="gender" value="male">男
               <input type="radio" name="gender" value="female">女
            </div>
            
            <div>
               <label for="freight">是/否免運：</label>
               <input type="checkbox" name="freight" value="yes">是
               <input type="checkbox" name="freight" value="no">否
            </div>
            
            <div>
               <button type="submit">送出</button>
            </div>
            
         </form>
   ...

CSS

* {
   padding: 0;
   margin: 15px;
   box-sizing: border-box;
}

body {
   background-color: #CAC8C8;
}

div {
   display: block;
   align-items: left;
}

h1 {
   font-size: 30px;
}

.container {
   background: white;
   padding: 10px 20px;
   border-radius: 50px;
}

#comments {
   vertical-align: top;
}