lesson5

https://codelove.tw/@howtomakeaturn/post/vx8Lgx

by j437437

HTML

<head>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css' rel='stylesheet'/>
</head>
<body>
  <h1>管理者後台</h1>
  <hr>
  <h2>新增產品</h2>
  <div class="build-product">
    <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 for="product_price">產品價格</label>
        <input type="number" min="0" name="product_price" id="product_price" placeholder="請輸入產品價格">
      </div>
      <div>
        <label for="product_description">產品備註</label>
        <textarea class="input-style" rows="8" cols="60" name="product_description" id="product_description" placeholder="請輸入產品備註"></textarea>
      </div>
      <hr>
      <div>
        <label for="product_deliveryfee">是否免運</label>
        <input type="checkbox" id="roduct_deliveryfee" name="freeDelivery" value="false">是
      </div>
        <div>
        <label>性別分類</label>
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
      </div>
      <div>
      <label for="">產品類別</label>
        <select name = "category">
          <option value="" selected>請選擇產品分類</option>
          <option value = "shirt">上衣類</option>
          <option value = "jacket">外套類</option>
          <option value = "pants">下身類</option>
          <option value = "accessory">配件類</option>
        </select>
      </div>
      <div>
        <label class="btn" for="upload_img">上傳圖片
          <input id="upload_img" style="display:none;" type="file">
          <i class="fa-solid fa-images"></i>
        </label>
    </div>
      <hr>
      <div>
       <button type="submit">新增產品</button>
       </div>
    </form>
  </div>
</body>

CSS

*{
  padding: 0;
  margin: 15px;
}

body{
  background-color: #F0F0F0; 
}

.build-product{
background-color: #fff; 
}

div{
  display: flex;
  align-items: center;
}
label{
  color: #003060;
  font-weight: bold;
  margin-right: 10px;
}
form input,textarea,select {
  padding: 5px;
  margin-left: 20px;
  margin-right: 5px;
}

button {
  font-size: 15px;
  padding: 10px;
  background-color: #003060;
  color: #fff;
  border-radius: 5px;
  border: white;
  cursor: pointer;
}
.btn{
  font-size: 15px;
  padding: 2px 30px;
  background-color: #8E8E8E;
  color: #fff;
  border-radius: 3px;
  border: white;
  cursor: pointer;
}
.btn:hover{
  background-color: #4F4F4F;
}

JavaScript

https://jsfiddle.net/j437437/Lobvgfqk/87/#