html code
<!DOCTYPE html>
<html>
<head>
<title>會員表單</title>
<meta charset="UTF-8">
<!-- 響應式網站 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Boostrap 導入程式 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- CSS連結 -->
<link rel="stylesheet" href="form.css">
</head>
<body>
<div class="container">
<form action="">
<h1> 會員資料表單 </h1>
<hr>
<!-- 第一列 -->
<div class="row">
<div class="col-sm-12">
<label>請輸入帳號</label>
<input type="text" placeholder="帳號" class="form-control" required>
</div>
</div>
<br>
<!-- 第二列 -->
<div class="row">
<div class="col-sm-6">
<div class="form-floating">
<input type="password" class="form-control" placeholder="密碼">
<label>請輸入密碼</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-floating">
<input type="password" class="form-control" placeholder="確認密碼">
<label>請確認密碼</label>
</div>
</div>
</div>
<br>
<hr>
<!-- 第三列 -->
<div class="row">
<div class="col-sm-3">
<label>姓名</label>
<input type="text" placeholder="姓名" class="form-control" required>
</div>
<div class="col-sm-9">
<label>Email</label>
<input type="text" placeholder="Email" class="form-control" required>
</div>
</div>
<br>
<!-- 第四列 -->
<div class="row">
<div class="col-sm-4">
<label>生日</label>
<input type="date" placeholder="生日" class="form-control" required>
</div>
<div class="col-sm-4">
<label>手機號碼</label>
<input type="number" placeholder="手機號碼" class="form-control" required>
</div>
<div class="col-sm-4">
<label>家用電話</label>
<input type="number" placeholder="家用電話" class="form-control" required>
</div>
</div>
<br>
<!-- 第五列 -->
<div class="row">
<div class="col-sm-6">
<label>學歷</label>
<select class="form-select">
<option selected>請選擇</option>
<option >國中</option>
<option >高中</option>
<option >大學</option>
</select>
</div>
<div class="col-sm-6">
<label>性別</label>
<div class="col-sm-12">
<lable>男性</lable>
<input type="radio">
<lable>女性</lable>
<input type="radio">
</div>
</div>
</div>
<br>
<!-- 第六列 -->
<div class="row">
<div class="col-sm-6">
<label>請輸入驗證碼</label>
<input type="text" placeholder="驗證碼" class="form-control" required>
</div>
<div class="col-sm-6">
<div class="col-sm-12">
<img src="images/code.png" width=100px; height=50px>
<a href="#" class="btn btn-success">新的圖片</a>
</div>
</div>
</div>
<br>
<hr>
<!-- 第七列 -->
<div class="row">
<div class="col-sm-12">
<input type="checkbox">
<label>我已閱讀，並同意隱私政策</label>
</div>
</div>
<!-- 第八列 -->
<div class="row">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary">
送出
</button>
</div>
</div>
</form>
</div>
</body>
</html>
css code
body{
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,0.6754901789817489) 0%, rgba(248,1,247,0.6110644086736257) 25%, rgba(185,17,190,0.7091037098433124) 80%, rgba(3,2,3,0.6586834562926733) 100%);
}
.container{
background-color:gray;
padding:50px;
margin-top:50px;
margin-bottom:50px;
opacity: 0.9;
}
h1{
text-align: center;
color:rgb(21, 21, 21);
padding:10px;
}
label{
color:black;
font-size:22px;
}
.btn-success{
background-color:blueviolet;
}
.btn-primary{
background-color:blueviolet;
width:100%;
font-size:30px;
padding:10px;
}
.container .row input{
font-size:22px;
color:blue;
border:1px solid blue;
}