Membuat Form Pendaftaran dengan HTML dan CSS
Website tidak hanya digunakan untuk menampilkan informasi saja, Website juga digunakan untuk mengambil informasi atau data dari pengunjung.
Salah satu cara untuk mengambil informasi dari pengunjung ialah menggunakan form. Form dalam web bisa disamakan dengan formulir di dunia nyata. Form dapat diisi, kemudian diproses dengan program tertentu.
Pada tutorial ini, kita akan belajar cara membuat form register menggunakan HTML dan CSS. tetapi hanya membuat saja ya, tidak sampai memproses datanya.
Berikut ini adalah contoh source code untuk membuat halaman register sederhana menggunakan HTML dan CSS. untuk code editor bisa menggunakan VS Code, Sublime, notepad++ dll.
- Buat file html dan simpan dengan nama register.html dan copy code dibawah ini
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: sans-serif;
background: #aec6cf;
}
h1 {
text-align: center;
/*ketebalan font*/
font-weight: 300;
}
.kotak_reg {
width: 350px;
background: white;
border-radius: 10px;
/*meletakkan form ke tengah*/
margin: 80px auto;
padding: 30px 20px;
}
label {
font-size: 11pt;
}
.form_reg {
/*membuat lebar form penuh*/
box-sizing: border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
}
.tombol_reg {
background: #779ecb;
color: white;
font-size: 11pt;
width: 100%;
border: none;
border-radius: 3px;
padding: 10px 20px;
}
</style>
</head>
<body>
<h1>Membuat Form Register Dengan HTML & CSS</h1>
<div class="kotak_">
<h1>Sign Up</h1>
<form>
<div class="container">
<label"><b>Username</b></label>
<input class="form_reg" type="text" placeholder="Username . . ." name="username" required>
<label><b>Email</b></label>
<input class="form_reg" type="email" placeholder="Email . . ." name="email" required>
<label><b>Password</b></label>
<input class="form_reg" type="password" placeholder="Password . . ." name="pass" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<button type="submit" class="tombol_reg">Sign Up</button>
</div>
</form>
</div>
</body>
</html>
Berikut adalah hasilnya :
Klik untuk demo live programnya.
Baca Juga : Membuat Form Login dengan HTML dan CSS
Comments
Post a Comment