表單

by IreneQiu

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet">

<body>

<h1>新增商品</h1>

<div class=container>

<form action="’/add-product’" method="post" >

<label for="name" class="title"><span>商品名稱:</span>
<input type="text" id="name" class="label-inner">
</label>
<br/>

<label foe="price" class="title"><span>價格:</span>
<input type="text" id="price" class="label-inner" >
</label>
<br/>

<label class="title"><span>是否免運:</span>
<label class=label-inner for="yes">是</label>
<input type="checkbox" name="fee" value="yes" id="yes" class="label-inner">
<label class=label-inner for="no">否</label>
<input type="checkbox" name="fee" value="no" id="no" class="label-inner">
</label>
<br/>

<label class="title"><span>性別:</span>
<label class="label-inner" for="male">男</label><input type="radio" name="sex" id="male">
<label class="label-inner" for="fmale">女</label><input type="radio" name="sex" id="fmale">
</label>
<br/>

<label class="title"><span>類別:</span>
<select class="label-inner">
<option value=上衣類>上衣類</option>
<option value=外套類>外套類</option>
<option value=下身類>下身類</option>
<option value=配件類>配件類</option>
</select>
</label>
<br/>

<label class="title"><span>商品備註:</span>
<textarea cols="25" row="20" class="label-inner"></textarea>
</label>

<br/>
<div class="submit">
<button type="submit" value="submit">提交</button>
</div>
</form>

</div>
</body>

CSS

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

h1{
  text-align:center;
  padding:10px;
  width:600px;
  margin:25px auto 10px auto;
  border-radius:20px;
  background-color:#5499C7 ;
  color:white;
  font-weight:500;
}

.container{
  background-color:#EB984E ;
  width:600px;
  height:350px;
  border-radius:25px;
  font-size:18px;
  display:flex;
  margin:10px auto 30px auto;
}

form{
  text-align:center;
  margin:0 auto 30px auto;
  text-align:left;
  padding:20px;
  font-weight:500;
  
}

label{
  display:block;
  padding:5px;
}


.label-inner{
  padding:3px;
  display:inline-block;
}

input{
  padding: 7px;
  border : 1px solid black;
  border-radius: 5px;
  background-color :  #fff;
  outline:none;
}

select{
  width: 80px;
  padding: 20px;
  outline:none;
  border-radius: 10px;
}

textarea{
  outline:none;
  border-radius: 5px;
}

button{
  padding:10px;
  width:100px;
  border-radius:20px;
  background-color:#5499C7 ;
  color:white;
  border:none;
  font-size:18px;
  font-weight:400;
  
}



button:hover{
  background-color:#7FB3D5;
}


.title{
  /*border:1px solid red;*/
  display:inline-block;
  margin:0 auto 0 auto;
}

.submit{
  text-align:center;
  margin:10px;
}

span{
  margin:4px;
}