Halo semuanya kembali lagi di mandankoding.com, kali ini kita akan berbagi kode tentang Form Pendaftaran menggunakan HTML dan CSS. Untuk tutorial ini kita akan membahas tentang Cara Membuat Form Pendaftaran Dengan HTML dan CSS. Sebelum kita mulai tentunya kita harus memahami dulu apa itu HTML dan CSS, silahkan baca juga tutorial tentang:
![Cara Membuat Form Pendaftaran Dengan HTML dan CSS](https://mandankoding.com/wp-content/uploads/2022/09/ezgif.com-gif-maker-6.gif)
Apa Itu FORM?
Form adalah suatu bagian dari dokumen pada website yang dapat di isikan oleh pengguna untuk memberikan informasi tertentu yang di minta oleh website. Form sendiri banyak di gunakan di sebuah website seperti Form Login, Form input data diri, dan Juga Form Pendaftaran.
Dalam Form pendaftaran penggunakan akan mengisikan beberapa isian, salah satunya seperti Email dan Password, dan password itu sendiri akan di gunakan untuk login ke dalam suatu wesite.
Dalam pembahasan ini kita akan membuat Form Pendaftaran yang sederhana, pertama ita membuat file HTML dengan nama index.html
.
<!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> <link rel="stylesheet" href="style.css"> </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">Last name</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>
Setelah itu kita akan menambahkan kode CSS kedalam kode HTML kita, agar tampilannya terlihat lebih menarik, dengan nama file style.css
, dan 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 } }
Output:
![Cara Membuat Form Pendaftaran Dengan HTML dan CSS](https://mandankoding.com/wp-content/uploads/2022/09/ezgif.com-gif-maker-6.gif)
Itulah sedikit penjelasan dari kami dalan berbagi kode Cara Membuat Form Pendaftaran Dengan HTML dan CSS.
Selamat Belajar, semoga bermanfaat🎉🎉
Tinggalkan Balasan