form

by 000dd

HTML

<!DOCTYPE html>
<html>
   <body>
      <div class="white">
      
      <h1>商品管理後台</h1>
      <hr/>
      <form action="/add-product" method="post">

          <p>商品名稱:
          <input type="text" name="product" placeholder="請輸入商品名稱">
          </p>
        
          <p>價格:
          <input type="text" name="price" placeholder="請輸入商品價格">
          </p>
          
          <p>商品類別:
          <select name="商品類別">
              <option selected disabled >--請選擇商品類別--</option>          
              <option>上衣類</option>
              <option>下身類</option>
              <option>外套類</option>
              <option value="3">配件類</option>
          </select>
          </p>
          
          <p>性別:
          <input type="radio" name="gender" value="male"> 男
          <input type="radio" name="gender" value="female"> 女
          </p>
          
          <p>是/否免運費:
          <input type="checkbox" name="freight" value="yes"> 是
          <input type="checkbox" name="freight" value="no"> 否
          </p>
          
          <p>商品備註: </p>
          <p><textarea name="comments" rows="5" cols="20">備註</textarea></p>
          
          <p><input type="submit" value="送出資料"></p>
          
      </form>
      </div>
   </body>
</html>

CSS

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

body{
  background-image: linear-gradient(-225deg, #ece3fd 0%, #f8ffe6 100%);
  background-image: linear-gradient(to top, #bda8ed 0%, #f5fed6 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1{
  font-size: 25px;
}
.white{
  background: white;
  padding: 10px 20px;
  box-shadow: 0 9px 50px hsla(20, 67%, 75%, 0.31); 
  border-radius: 20px;
}