JSFiddle - React, Tailwind, and code Playground

by hannahtest190619

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <title>CH5.表單</title>
 <meta charset="UTF-8">
</head>
<body>
  <fieldset>
   <legend><strong>日本連線商品</strong></legend>
     <form action="/add-product" method="post">
       <p>商品名稱:
       <input type="text"></p>
       <p>
       類別:
       <select name="category">
        <option value="top">上衣類</option>
        <option value="bottom">下身類</option>
        <option value="coat">外套類</option>
        <option value="accessory">配件類</option>
       </select>
       </p>
       <p>價格:
       <input type="text"></p>
       <p>
       是否免運費:
       <input type="radio" name="freeshipping" velue="yes">是
       <input type="radio" name="freeshipping" velue="no">否
       </p>
       <p>宅配:
        <input type="checkbox" name="ship" value="7-11">7-11
        <input type="checkbox" name="ship" value="全家">全家
         <input type="checkbox" name="ship" value="萊爾富">萊爾富
        <input type="checkbox" name="ship" value="黑貓宅急便">黑貓宅急便
       </p>
       <p>商品備註:</p>
       <textarea name="remark" rows="10" cols="60">
       </textarea>
       <br><br>
       <input type="submit" value="送出">
       
     </form>
     </fieldset>
</body>
</html>

CSS

body {
  width: 80%;
  margin: 0px auto;
}
fieldset {
  background-color: #bfc9db;
  border: 2px solid #ada8a8;
}
legend {
  font-size: 24px;
  letter-spacing: 5px;
  color: #080465;
}
form {
  margin-left: 20px;
}