| CARVIEW |
Select Language
HTTP/2 200
date: Sat, 11 Oct 2025 15:25:58 GMT
content-type: text/html; charset=UTF-8
server: cloudflare
x-frame-options: DENY
x-content-type-options: nosniff
x-xss-protection: 1;mode=block
vary: accept-encoding
cf-cache-status: DYNAMIC
content-encoding: gzip
set-cookie: _csrf-frontend=e189f28d16fe2f19371668ba2fd7e20dbb0984c4d5e1baca7ffe15ea3b90755aa%3A2%3A%7Bi%3A0%3Bs%3A14%3A%22_csrf-frontend%22%3Bi%3A1%3Bs%3A32%3A%22nJ1ErI6B8K-L7nRbqoA8LMYfLZV57glY%22%3B%7D; HttpOnly; Path=/
cf-ray: 98cf5f88195dcb77-BLR
Template Praktek Frontend Halaman Registrasi - Pastebin.com
SHARE
TWEET
Template Praktek Frontend Halaman Registrasi
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="id">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Template Praktek Form Registrasi</title>
- <!-- Bagian CSS untuk Styling Halaman -->
- <style>
- /* Mengatur font dasar dan warna background untuk seluruh halaman */
- body {
- font-family: /* ISI DI SINI: contoh -> sans-serif */;
- background-color: /* ISI DI SINI: contoh -> #f0f2f5 */;
- /* Mengatur agar form berada di tengah halaman */
- display: /* ISI DI SINI: contoh -> flex */;
- justify-content: /* ISI DI SINI: contoh -> center */;
- align-items: /* ISI DI SINI: contoh -> center */;
- height: /* ISI DI SINI: contoh -> 100vh */;
- }
- /* Memberi style pada container yang membungkus form */
- .form-wrapper {
- background-color: /* ISI DI SINI: contoh -> white */;
- padding: /* ISI DI SINI: contoh -> 30px */;
- border-radius: /* ISI DI SINI: contoh -> 8px */;
- box-shadow: /* ISI DI SINI: contoh -> 0 2px 4px rgba(0, 0, 0, 0.1) */;
- width: /* ISI DI SINI: contoh -> 350px */;
- }
- /* Mengatur judul form */
- h2 {
- text-align: /* ISI DI SINI: contoh -> center */;
- color: /* ISI DI SINI: contoh -> #333 */;
- }
- /* Mengatur jarak antar elemen di dalam form */
- .input-group {
- margin-bottom: /* ISI DI SINI: contoh -> 15px */;
- }
- /* Mengatur tampilan label */
- label {
- display: /* ISI DI SINI: contoh -> block */;
- margin-bottom: /* ISI DI SINI: contoh -> 5px */;
- color: /* ISI DI SINI: contoh -> #555 */;
- }
- /* Mengatur tampilan kotak input */
- input {
- width: /* ISI DI SINI: contoh -> 100% */;
- padding: /* ISI DI SINI: contoh -> 10px */;
- border: /* ISI DI SINI: contoh -> 1px solid #ccc */;
- border-radius: /* ISI DI SINI: contoh -> 4px */;
- box-sizing: /* ISI DI SINI: contoh -> border-box */;
- }
- /* Memberi highlight saat kotak input di-klik */
- input:focus {
- outline: /* ISI DI SINI: contoh -> none */;
- border-color: /* ISI DI SINI: contoh -> #007bff */;
- }
- /* Mengatur tampilan tombol */
- button {
- width: /* ISI DI SINI: contoh -> 100% */;
- padding: /* ISI DI SINI: contoh -> 10px */;
- background-color: /* ISI DI SINI: contoh -> #007bff */;
- color: /* ISI DI SINI: contoh -> white */;
- border: /* ISI DI SINI: contoh -> none */;
- border-radius: /* ISI DI SINI: contoh -> 4px */;
- cursor: /* ISI DI SINI: contoh -> pointer */;
- font-size: /* ISI DI SINI: contoh -> 16px */;
- }
- /* Mengubah warna tombol saat cursor di atasnya */
- button:hover {
- background-color: /* ISI DI SINI: contoh -> #0056b3 */;
- }
- /* Mengatur tampilan pesan error atau sukses */
- #message-area {
- text-align: /* ISI DI SINI: contoh -> center */;
- margin-top: /* ISI DI SINI: contoh -> 15px */;
- font-weight: /* ISI DI SINI: contoh -> bold */;
- }
- </style>
- </head>
- <body>
- <div class="form-wrapper">
- <h2>Registrasi Akun Baru</h2>
- <form id="simple-form">
- <div class="input-group">
- <label for="username">Username:</label>
- <input type="text" id="username" name="username">
- </div>
- <div class="input-group">
- <label for="email">Email:</label>
- <input type="email" id="email" name="email">
- </div>
- <div class="input-group">
- <label for="password">Password:</label>
- <input type="password" id="password" name="password">
- </div>
- <div class="input-group">
- <button type="submit">Daftar sekarang</button>
- </div>
- </form>
- <p id="message-area"></p>
- </div>
- <!-- Bagian JavaScript untuk Interaktivitas -->
- <script>
- // 1. Pilih elemen HTML yang kita butuhkan
- const form = document.getElementById('simple-form');
- const messageArea = document.getElementById('message-area');
- // 2. Tambahkan 'event listener' ke form.
- form.addEventListener('submit', function(event) {
- // Mencegah form mengirim data secara default (agar halaman tidak refresh)
- event.preventDefault();
- // 3. Ambil nilai dari setiap input field
- const username = form.elements.username.value;
- const email = form.elements.email.value;
- const password = form.elements.password.value;
- // 4. Lakukan validasi sederhana
- // Cek apakah salah satu field masih kosong
- if (username === '' || email === '' || password === '') {
- // Jika ada yang kosong, tampilkan pesan error
- messageArea.textContent = /* ISI DI SINI: pesan error, contoh -> 'Semua field harus diisi!' */;
- messageArea.style.color = /* ISI DI SINI: warna untuk pesan error, contoh -> 'red' */;
- } else {
- // Jika semua sudah terisi, tampilkan pesan sukses
- messageArea.textContent = /* ISI DI SINI: pesan sukses, contoh -> 'Registrasi berhasil!' */;
- messageArea.style.color = /* ISI DI SINI: warna untuk pesan sukses, contoh -> 'green' */;
- // Kosongkan kembali form setelah berhasil
- form.reset();
- }
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
-
✅⭐ Make huge profits on trading ✅ NEVER SEEN...
JavaScript | 5 sec ago | 0.24 KB
-
⭐✅ MAKE $2500 IN 15 MIN⭐⭐⭐ 6
JavaScript | 11 sec ago | 0.24 KB
-
⭐⭐⭐GMAIL Logs (2FA disabled)⭐⭐
Java | 13 sec ago | 0.10 KB
-
⭐✅ Marketplace Glitch ✅ Working ✅ NEVER SEEN...
JavaScript | 15 sec ago | 0.24 KB
-
⭐✅ Exploit 2500$ in 15 Minutes⭐⭐⭐ E
JavaScript | 22 sec ago | 0.24 KB
-
✅⭐ Make $2500 in 15 minutes ✅ NEVER SEEN BEFO...
JavaScript | 24 sec ago | 0.24 KB
-
Free Crypto Method (NEVER SEEN BEFORE)⭐⭐ M
JavaScript | 33 sec ago | 0.24 KB
-
⭐✅ Trading Profit Method ✅ NEVER SEEN BEFORE...
JavaScript | 43 sec ago | 0.24 KB
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
