Terkadang website dibuat tidak hanya digunakan untuk memberikan informasi kepada pengunjung. Tetapi kadang website digunakan untuk mendapatkan data dan informasi seperti data seperti nama atau pun email, yang nanti digunakan oleh user untuk login atau pun masuk dan mengakses website tersebut.
Cara Membuat Form Pendaftaran Dengan HTML dan CSS
Kali ini kita akan membuat form pendaftaran sederhana menggunakan HTML dan CSS yang sangat mudah.
1. Sebelum membuat form pendaftaran, kita akan membuat file index.html
silahkan ketikan kode dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Input</title>
</head>
<body>
<div class="container">
<div class="row align-items-stars">
<div class="col">
<div class="card" style="width: 100%;">
<div class="card-body">
<h5 class="card-title text-center">Sign Up</h5>
<form action="" method="post" class="row">
<div class="col-md-6">
<label class="form-label">First name</label>
<input type="text" class="form-control" required>
</div>
<div class="col-md-6">
<label class="form-label">Surname</label>
<input type="text" class="form-control" required>
</div>
<div class="col-md-12">
<label class="form-label">Mobile number or email address</address></label>
<input type="text" class="form-control" required>
</div>
<div class="col-md-12">
<label class="form-label">New password</label>
<input type="password" class="form-control" required>
</div>
<div class="col-md-12">
<label class="form-label">City</label>
<input type="text" class="form-control" required>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-color">Sign Up</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2. Setelah selesai menyalin kode di atas, kita akan menambahkan file cssnya dengan nama file style.css sebelum itu kita akan menambahkan kode dibawah terlebih dahulu:
<link rel="stylesheet" href="style.css">Sekarang kita akan membuat file style.css, silahkan salin kode dibawah ini.
body {
margin: 0;
padding-top: 50px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: black;
background-image: linear-gradient(to right , #E43D40, #74BDCB);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
.container {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.align-items-stars {
align-items: flex-start !important;
}
.row {
display: flex;
flex-wrap: wrap;
margin-top: 1px;
margin-right: 1px;
margin-left: 1px;
}
.row>* {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: 1.5rem * .5;
padding-left: 1.5rem * .5;
margin-top: 0;
}
.col {
flex: 1 0 0%;
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border-radius: .25rem;
border: 1px solid rgba(0, 0, 0, .125);
}
form {
margin-bottom: 0rem;
}
.card-body {
flex: 1 1 auto;
padding: 1rem 1rem;
}
div {
display: block
}
*,
::after,
::before {
box-sizing: border-box;
}
.text-center {
text-align: center !important;
}
.card-title {
margin-bottom: 1.5rem;
margin-top: .5rem;
}
.h5,
h5 {
font-size: 1.25rem;
}
.form-label {
margin-bottom: .5rem;
}
label {
display: inline-block;
margin-top: 10px;
}
.form-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color : #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
button,
input {
margin: 2;
font-family: inherit;
}
.btn-color {
color: #fff;
background-color: #5bb0ba;
border-color: #5bb0ba;
}
.btn {
display: inline-block;
cursor: pointer;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
-moz-user-select: none;
border: 1px solid transparent;
margin-top: 30px;
font-size: 1rem;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn:hover {
background-color: #e43d40;
}
.form-control:hover {
border: 1px solid #e43d40;
}
input:focus {
background-color: #fbe7c6;
}
@media (min-width: 768px) {
.col-md-6 {
flex: 0 0 auto;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
width: 50%;
margin-left: 0px;
padding-right: 5px;
}
.col-md-12 {
flex: 0 0 auto;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
width: 100%;
padding-right: 5px;
}
}
@media (min-width:576px) {
.container {
max-width: 540px
}
}
@media (min-width:768px) {
.container {
max-width: 720px
}
}
@media (min-width:992px) {
.container {
max-width: 960px
}
}
@media (min-width:1200px) {
.container {
max-width: 1140px
}
}
@media (min-width:1400px) {
.container {
max-width: 1320px
}
}
Setelah selesai maka akan muncul hasil seperti gambar dibawah ini:
Tutorial lebih lanjut:
Post a Comment