Web-Dev-For-Beginners

33 KiB

Raw Blame History Unescape Escape

Kuis Pra-Kuliah

Pernahkah Anda mengisi formulir online dan ditolak karena format email yang salah? Atau kehilangan semua informasi saat mengklik tombol kirim? Kita semua pernah mengalami situasi yang menjengkelkan seperti itu.

Formulir adalah jembatan antara pengguna dan fungsi aplikasi Anda. Seperti protokol yang digunakan pengendali lalu lintas udara untuk memandu pesawat dengan aman ke tujuannya, formulir yang dirancang dengan baik memberikan umpan balik yang jelas dan mencegah kesalahan yang merugikan. Sebaliknya, formulir yang buruk dapat membuat pengguna pergi lebih cepat daripada komunikasi yang salah di bandara yang sibuk.

Dalam pelajaran ini, kita akan mengubah aplikasi perbankan statis Anda menjadi aplikasi interaktif. Anda akan belajar membuat formulir yang memvalidasi input pengguna, berkomunikasi dengan server, dan memberikan umpan balik yang bermanfaat. Anggap saja ini sebagai membangun antarmuka kontrol yang memungkinkan pengguna menavigasi fitur aplikasi Anda.

Pada akhirnya, Anda akan memiliki sistem login dan registrasi lengkap dengan validasi yang membantu pengguna menuju kesuksesan daripada frustrasi.

Prasyarat

Sebelum kita mulai membuat formulir, mari kita pastikan semuanya sudah diatur dengan benar. Pelajaran ini melanjutkan dari pelajaran sebelumnya, jadi jika Anda melewatkannya, sebaiknya kembali dan pastikan dasar-dasarnya sudah berfungsi terlebih dahulu.

Pengaturan yang Diperlukan

Komponen	Status	Deskripsi
Template HTML	✅ Diperlukan	Struktur dasar aplikasi perbankan Anda
Node.js	✅ Diperlukan	Runtime JavaScript untuk server
Server API Bank	✅ Diperlukan	Layanan backend untuk penyimpanan data

💡 Tip Pengembangan: Anda akan menjalankan dua server secara bersamaan – satu untuk aplikasi perbankan front-end Anda dan satu lagi untuk API backend. Pengaturan ini mencerminkan pengembangan dunia nyata di mana layanan front-end dan backend beroperasi secara independen.

Konfigurasi Server

Lingkungan pengembangan Anda akan mencakup:

Server front-end: Menyediakan aplikasi perbankan Anda (biasanya port 3000)
Server API backend: Menangani penyimpanan dan pengambilan data (port 5000)
Kedua server dapat berjalan secara bersamaan tanpa konflik

Menguji koneksi API Anda:

curl http://localhost:5000/api
# Expected response: "Bank API v1.0.0"

Jika Anda melihat respons versi API, Anda siap melanjutkan!

Memahami Formulir HTML dan Kontrol

Formulir HTML adalah cara pengguna berkomunikasi dengan aplikasi web Anda. Anggaplah mereka sebagai sistem telegraf yang menghubungkan tempat-tempat yang jauh di abad ke-19 – mereka adalah protokol komunikasi antara niat pengguna dan respons aplikasi. Ketika dirancang dengan baik, mereka menangkap kesalahan, memandu format input, dan memberikan saran yang bermanfaat.

Formulir modern jauh lebih canggih daripada input teks dasar. HTML5 memperkenalkan jenis input khusus yang secara otomatis menangani validasi email, format angka, dan pemilihan tanggal. Peningkatan ini bermanfaat baik untuk aksesibilitas maupun pengalaman pengguna seluler.

Elemen Formulir Esensial

Komponen dasar yang dibutuhkan setiap formulir:

<!-- Basic form structure -->
<form id="userForm" method="POST">
  <label for="username">Username</label>
  <input id="username" name="username" type="text" required>
  
  <button type="submit">Submit</button>
</form>

Apa yang dilakukan kode ini:

Membuat wadah formulir dengan pengidentifikasi unik
Menentukan metode HTTP untuk pengiriman data
Menghubungkan label dengan input untuk aksesibilitas
Mendefinisikan tombol kirim untuk memproses formulir

Jenis Input Modern dan Atribut

Jenis Input	Tujuan	Contoh Penggunaan
`text`	Input teks umum	`<input type="text" name="username">`
`email`	Validasi email	`<input type="email" name="email">`
`password`	Entri teks tersembunyi	`<input type="password" name="password">`
`number`	Input angka	`<input type="number" name="balance" min="0">`
`tel`	Nomor telepon	`<input type="tel" name="phone">`

💡 Keuntungan HTML5 Modern: Menggunakan jenis input tertentu memberikan validasi otomatis, keyboard seluler yang sesuai, dan dukungan aksesibilitas yang lebih baik tanpa JavaScript tambahan!

Jenis Tombol dan Perilaku

<!-- Different button behaviors -->
<button type="submit">Save Data</button>     <!-- Submits the form -->
<button type="reset">Clear Form</button>    <!-- Resets all fields -->
<button type="button">Custom Action</button> <!-- No default behavior -->

Apa yang dilakukan setiap jenis tombol:

Tombol kirim: Memicu pengiriman formulir dan mengirim data ke endpoint yang ditentukan
Tombol reset: Mengembalikan semua bidang formulir ke keadaan awal
Tombol biasa: Tidak memiliki perilaku default, memerlukan JavaScript khusus untuk fungsionalitas

⚠️ Catatan Penting: Elemen <input> adalah elemen yang menutup sendiri dan tidak memerlukan tag penutup. Praktik terbaik modern adalah menulis <input> tanpa garis miring.

Sekarang mari kita buat formulir login praktis yang menunjukkan praktik formulir HTML modern. Kita akan mulai dengan struktur dasar dan secara bertahap meningkatkannya dengan fitur aksesibilitas dan validasi.

<template id="login">
  <h1>Bank App</h1>
  <section>
    <h2>Login</h2>
    <form id="loginForm" novalidate>
      <div class="form-group">
        <label for="username">Username</label>
        <input id="username" name="user" type="text" required 
               autocomplete="username" placeholder="Enter your username">
      </div>
      <button type="submit">Login</button>
    </form>
  </section>
</template>

Penjelasan tentang apa yang terjadi di sini:

Menyusun formulir dengan elemen HTML5 semantik
Mengelompokkan elemen terkait menggunakan wadah div dengan kelas yang bermakna
Menghubungkan label dengan input menggunakan atribut for dan id
Menyertakan atribut modern seperti autocomplete dan placeholder untuk UX yang lebih baik
Menambahkan novalidate untuk menangani validasi dengan JavaScript alih-alih default browser

Pentingnya Label yang Tepat

Mengapa label penting untuk pengembangan web modern:

graph TD
    A[Label Element] --> B[Screen Reader Support]
    A --> C[Click Target Expansion]
    A --> D[Form Validation]
    A --> E[SEO Benefits]
    
    B --> F[Accessible to all users]
    C --> G[Better mobile experience]
    D --> H[Clear error messaging]
    E --> I[Better search ranking]

Apa yang dicapai oleh label yang tepat:

Memungkinkan pembaca layar mengumumkan bidang formulir dengan jelas
Memperluas area yang dapat diklik (mengklik label akan memfokuskan input)
Meningkatkan kegunaan seluler dengan target sentuh yang lebih besar
Mendukung validasi formulir dengan pesan kesalahan yang bermakna
Meningkatkan SEO dengan memberikan makna semantik pada elemen formulir

🎯 Tujuan Aksesibilitas: Setiap input formulir harus memiliki label yang terkait. Praktik sederhana ini membuat formulir Anda dapat digunakan oleh semua orang, termasuk pengguna dengan disabilitas, dan meningkatkan pengalaman untuk semua pengguna.

Membuat Formulir Registrasi

Formulir registrasi memerlukan informasi yang lebih rinci untuk membuat akun pengguna yang lengkap. Mari kita buat dengan fitur HTML5 modern dan aksesibilitas yang ditingkatkan.

<hr/>
<h2>Register</h2>
<form id="registerForm" novalidate>
  <div class="form-group">
    <label for="user">Username</label>
    <input id="user" name="user" type="text" required 
           autocomplete="username" placeholder="Choose a username">
  </div>
  
  <div class="form-group">
    <label for="currency">Currency</label>
    <input id="currency" name="currency" type="text" value="$" 
           required maxlength="3" placeholder="USD, EUR, etc.">
  </div>
  
  <div class="form-group">
    <label for="description">Account Description</label>
    <input id="description" name="description" type="text" 
           maxlength="100" placeholder="Personal savings, checking, etc.">
  </div>
  
  <div class="form-group">
    <label for="balance">Starting Balance</label>
    <input id="balance" name="balance" type="number" value="0" 
           min="0" step="0.01" placeholder="0.00">
  </div>
  
  <button type="submit">Create Account</button>
</form>

Dalam kode di atas, kita telah:

Mengorganisasi setiap bidang dalam wadah div untuk gaya dan tata letak yang lebih baik
Menambahkan atribut autocomplete yang sesuai untuk dukungan pengisian otomatis browser
Menyertakan teks placeholder yang membantu untuk memandu input pengguna
Mengatur nilai default yang masuk akal menggunakan atribut value
Menerapkan atribut validasi seperti required, maxlength, dan min
Menggunakan type="number" untuk bidang saldo dengan dukungan desimal

Menjelajahi Jenis Input dan Perilaku

Jenis input modern memberikan fungsionalitas yang ditingkatkan:

Fitur	Manfaat	Contoh
`type="number"`	Keypad numerik di seluler	Mempermudah entri saldo
`step="0.01"`	Kontrol presisi desimal	Memungkinkan sen dalam mata uang
`autocomplete`	Pengisian otomatis browser	Penyelesaian formulir lebih cepat
`placeholder`	Petunjuk kontekstual	Membimbing ekspektasi pengguna

🎯 Tantangan Aksesibilitas: Cobalah menavigasi formulir hanya menggunakan keyboard Anda! Gunakan Tab untuk berpindah antar bidang, Space untuk mencentang kotak, dan Enter untuk mengirimkan. Pengalaman ini membantu Anda memahami bagaimana pengguna pembaca layar berinteraksi dengan formulir Anda.

Memahami Metode Pengiriman Formulir

Ketika seseorang mengisi formulir Anda dan menekan kirim, data tersebut harus dikirim ke suatu tempat – biasanya ke server yang dapat menyimpannya. Ada beberapa cara berbeda untuk melakukannya, dan mengetahui mana yang harus digunakan dapat menghemat Anda dari beberapa masalah di kemudian hari.

Mari kita lihat apa yang sebenarnya terjadi ketika seseorang mengklik tombol kirim tersebut.

Perilaku Default Formulir

Pertama, mari kita amati apa yang terjadi dengan pengiriman formulir dasar:

Uji formulir Anda saat ini:

Klik tombol Register di formulir Anda
Amati perubahan di bilah alamat browser Anda
Perhatikan bagaimana halaman memuat ulang dan data muncul di URL

Perbandingan Metode HTTP

graph TD
    A[Form Submission] --> B{HTTP Method}
    B -->|GET| C[Data in URL]
    B -->|POST| D[Data in Request Body]
    
    C --> E[Visible in address bar]
    C --> F[Limited data size]
    C --> G[Bookmarkable]
    
    D --> H[Hidden from URL]
    D --> I[Large data capacity]
    D --> J[More secure]

Memahami perbedaannya:

Metode	Kasus Penggunaan	Lokasi Data	Tingkat Keamanan	Batas Ukuran
`GET`	Query pencarian, filter	Parameter URL	Rendah (terlihat)	~2000 karakter
`POST`	Akun pengguna, data sensitif	Body permintaan	Lebih tinggi (tersembunyi)	Tidak ada batas praktis

Memahami perbedaan mendasar:

GET: Menambahkan data formulir ke URL sebagai parameter query (cocok untuk operasi pencarian)
POST: Menyertakan data dalam body permintaan (penting untuk informasi sensitif)
Batasan GET: Batas ukuran, data terlihat, riwayat browser yang persisten
Keuntungan POST: Kapasitas data besar, perlindungan privasi, dukungan unggahan file

💡 Praktik Terbaik: Gunakan GET untuk formulir pencarian dan filter (pengambilan data), gunakan POST untuk registrasi pengguna, login, dan pembuatan data.

Mengonfigurasi Pengiriman Formulir

Mari kita konfigurasikan formulir registrasi Anda untuk berkomunikasi dengan benar dengan API backend menggunakan metode POST:

<form id="registerForm" action="//localhost:5000/api/accounts" 
      method="POST" novalidate>

Apa yang dilakukan konfigurasi ini:

Mengarahkan pengiriman formulir ke endpoint API Anda
Menggunakan metode POST untuk transmisi data yang aman
Menyertakan novalidate untuk menangani validasi dengan JavaScript

Menguji Pengiriman Formulir

Ikuti langkah-langkah ini untuk menguji formulir Anda:

Isi formulir registrasi dengan informasi Anda
Klik tombol "Create Account"
Amati respons server di browser Anda

Apa yang harus Anda lihat:

Browser mengarahkan ke URL endpoint API
Respons JSON berisi data akun baru Anda
Konfirmasi server bahwa akun berhasil dibuat

🧪 Waktu Eksperimen: Cobalah mendaftar lagi dengan nama pengguna yang sama. Respons apa yang Anda dapatkan? Ini membantu Anda memahami bagaimana server menangani data duplikat dan kondisi kesalahan.

Memahami Respons JSON

Ketika server memproses formulir Anda dengan sukses:

{
  "user": "john_doe",
  "currency": "$",
  "description": "Personal savings",
  "balance": 100,
  "id": "unique_account_id"
}

Respons ini mengonfirmasi:

Membuat akun baru dengan data yang Anda tentukan
Memberikan pengidentifikasi unik untuk referensi di masa depan
Mengembalikan semua informasi akun untuk verifikasi
Menunjukkan penyimpanan data di database berhasil

Penanganan Formulir Modern dengan JavaScript

Pengiriman formulir tradisional menyebabkan halaman memuat ulang sepenuhnya, mirip dengan bagaimana misi luar angkasa awal memerlukan reset sistem lengkap untuk koreksi jalur. Pendekatan ini mengganggu pengalaman pengguna dan kehilangan status aplikasi.

Penanganan formulir dengan JavaScript bekerja seperti sistem panduan berkelanjutan yang digunakan oleh pesawat luar angkasa modern – membuat penyesuaian waktu nyata tanpa kehilangan konteks navigasi. Kita dapat mencegat pengiriman formulir, memberikan umpan balik langsung, menangani kesalahan dengan baik, dan memperbarui antarmuka berdasarkan respons server sambil mempertahankan posisi pengguna dalam aplikasi.

Mengapa Menghindari Muat Ulang Halaman?

sequenceDiagram
    participant User
    participant SPA
    participant Server
    
    User->>SPA: Submits form
    SPA->>Server: AJAX request
    Server-->>SPA: JSON response
    SPA->>User: Updates interface
    
    Note over User,SPA: No page reload!

Manfaat penanganan formulir dengan JavaScript:

Mempertahankan status aplikasi dan konteks pengguna
Memberikan umpan balik langsung dan indikator pemuatan
Memungkinkan penanganan kesalahan dan validasi dinamis
Menciptakan pengalaman pengguna yang mulus seperti aplikasi
Memungkinkan logika kondisional berdasarkan respons server

Beralih dari Formulir Tradisional ke Modern

Tantangan pendekatan tradisional:

Mengalihkan pengguna dari aplikasi Anda
Kehilangan status dan konteks aplikasi saat ini
Memerlukan muat ulang halaman penuh untuk operasi sederhana
Memberikan kontrol terbatas atas umpan balik pengguna

Keuntungan pendekatan JavaScript modern:

Menjaga pengguna tetap dalam aplikasi Anda
Mempertahankan semua status dan data aplikasi
Memungkinkan validasi dan umpan balik waktu nyata
Mendukung peningkatan progresif dan aksesibilitas

Menerapkan Penanganan Formulir dengan JavaScript

Mari kita mengganti pengiriman formulir tradisional dengan penanganan event JavaScript modern:

<!-- Remove the action attribute and add event handling -->
<form id="registerForm" method="POST" novalidate>

Tambahkan logika registrasi ke file app.js Anda:

// Modern event-driven form handling
function register() {
  const registerForm = document.getElementById('registerForm');
  const formData = new FormData(registerForm);
  const data = Object.fromEntries(formData);
  const jsonData = JSON.stringify(data);
  
  console.log('Form data prepared:', data);
}

// Attach event listener when the page loads
document.addEventListener('DOMContentLoaded', () => {
  const registerForm = document.getElementById('registerForm');
  registerForm.addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission
    register();
  });
});

Penjelasan tentang apa yang terjadi di sini:

Mencegah pengiriman formulir default menggunakan event.preventDefault()
Mengambil elemen formulir menggunakan seleksi DOM modern
Menarik data formulir menggunakan API FormData yang kuat
Mengonversi FormData ke objek biasa dengan Object.fromEntries()
Men-serialisasi data ke format JSON untuk komunikasi server
Mencatat data yang diproses untuk debugging dan verifikasi

Memahami API FormData

API FormData menyediakan penanganan formulir yang kuat:

// Example of what FormData captures
const formData = new FormData(registerForm);

// FormData automatically captures:
// {
//   "user": "john_doe",
//   "currency": "$", 
//   "description": "Personal account",
//   "balance": "100"
// }

Keuntungan API FormData:

Pengumpulan komprehensif: Menangkap semua elemen formulir termasuk teks, file, dan input kompleks
Kesadaran tipe: Menangani berbagai jenis input secara otomatis tanpa pengkodean khusus
Efisiensi: Menghilangkan pengumpulan bidang manual dengan satu panggilan API
Adaptabilitas: Mempertahankan fungsionalitas saat struktur formulir berkembang

Membuat Fungsi Komunikasi Server

Sekarang mari kita buat fungsi yang kuat untuk berkomunikasi dengan server API Anda menggunakan pola JavaScript modern:

async function createAccount(account) {
  try {
    const response = await fetch('//localhost:5000/api/accounts', {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: account
    });
    
    // Check if the response was successful
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    console.error('Account creation failed:', error);
    return { error: error.message || 'Network error occurred' };
  }
}

Memahami JavaScript asinkron:

sequenceDiagram
    participant JS as JavaScript
    participant Fetch as Fetch API
    participant Server as Backend Server
    
    JS->>Fetch: fetch() request
    Fetch->>Server: HTTP POST
    Server-->>Fetch: JSON response
    Fetch-->>JS: await response
    JS->>JS: Process data

Apa yang dicapai oleh implementasi modern ini:

Menggunakan async/await untuk kode asinkron yang mudah dibaca
Menyertakan penanganan kesalahan yang tepat dengan blok try/catch
Memeriksa status respons sebelum memproses data
Mengatur header yang sesuai untuk komunikasi JSON
Memberikan pesan kesalahan yang rinci untuk debugging
Mengembalikan struktur data yang konsisten untuk kasus sukses dan kesalahan

Kekuatan Modern Fetch API

Keunggulan Fetch API dibandingkan metode lama:

Fitur	Manfaat	Implementasi
Berbasis Promise	Kode async yang bersih	`await fetch()`
Kustomisasi permintaan	Kontrol penuh HTTP	Headers, metode, body
Penanganan respons	Parsing data yang fleksibel	`.json()`, `.text()`, `.blob()`
Penanganan kesalahan	Penangkapan kesalahan yang komprehensif	Blok Try/catch

🎥 Pelajari Lebih Lanjut: Tutorial Async/Await - Memahami pola JavaScript asinkron untuk pengembangan web modern.

Konsep utama untuk komunikasi server:

Fungsi async memungkinkan penghentian eksekusi untuk menunggu respons server
Kata kunci await membuat kode asinkron terlihat seperti kode sinkron
Fetch API menyediakan permintaan HTTP berbasis promise yang modern
Penanganan kesalahan memastikan aplikasi Anda merespons dengan baik terhadap masalah jaringan

Menyelesaikan Fungsi Registrasi

Mari kita gabungkan semuanya dengan fungsi registrasi yang lengkap dan siap produksi:

async function register() {
  const registerForm = document.getElementById('registerForm');
  const submitButton = registerForm.querySelector('button[type="submit"]');
  
  try {
    // Show loading state
    submitButton.disabled = true;
    submitButton.textContent = 'Creating Account...';
    
    // Process form data
    const formData = new FormData(registerForm);
    const jsonData = JSON.stringify(Object.fromEntries(formData));
    
    // Send to server
    const result = await createAccount(jsonData);
    
    if (result.error) {
      console.error('Registration failed:', result.error);
      alert(`Registration failed: ${result.error}`);
      return;
    }
    
    console.log('Account created successfully!', result);
    alert(`Welcome, ${result.user}! Your account has been created.`);
    
    // Reset form after successful registration
    registerForm.reset();
    
  } catch (error) {
    console.error('Unexpected error:', error);
    alert('An unexpected error occurred. Please try again.');
  } finally {
    // Restore button state
    submitButton.disabled = false;
    submitButton.textContent = 'Create Account';
  }
}

Implementasi yang ditingkatkan ini mencakup:

Memberikan umpan balik visual selama pengiriman formulir
Menonaktifkan tombol submit untuk mencegah pengiriman duplikat
Menangani kesalahan yang diharapkan maupun tidak terduga dengan baik
Menampilkan pesan sukses dan kesalahan yang ramah pengguna
Mereset formulir setelah registrasi berhasil
Mengembalikan status UI terlepas dari hasilnya

Menguji Implementasi Anda

Buka alat pengembang browser Anda dan uji registrasi:

Buka konsol browser (F12 → tab Console)
Isi formulir registrasi
Klik "Buat Akun"
Amati pesan konsol dan umpan balik pengguna

Yang seharusnya Anda lihat:

Status loading muncul di tombol submit
Log konsol menunjukkan informasi rinci tentang proses
Pesan sukses muncul saat pembuatan akun berhasil
Formulir mereset secara otomatis setelah pengiriman berhasil

🔒 Pertimbangan Keamanan: Saat ini, data dikirim melalui HTTP, yang tidak aman untuk produksi. Dalam aplikasi nyata, selalu gunakan HTTPS untuk mengenkripsi transmisi data. Pelajari lebih lanjut tentang keamanan HTTPS dan mengapa ini penting untuk melindungi data pengguna.

Validasi Formulir yang Komprehensif

Validasi formulir mencegah pengalaman yang mengecewakan karena menemukan kesalahan hanya setelah pengiriman. Seperti sistem redundansi di Stasiun Luar Angkasa Internasional, validasi yang efektif menggunakan beberapa lapisan pemeriksaan keamanan.

Pendekatan optimal menggabungkan validasi tingkat browser untuk umpan balik langsung, validasi JavaScript untuk pengalaman pengguna yang lebih baik, dan validasi sisi server untuk keamanan dan integritas data. Redundansi ini memastikan kepuasan pengguna dan perlindungan sistem.

Memahami Lapisan Validasi

graph TD
    A[User Input] --> B[HTML5 Validation]
    B --> C[Custom JavaScript Validation]
    C --> D[Client-Side Complete]
    D --> E[Server-Side Validation]
    E --> F[Data Storage]
    
    B -->|Invalid| G[Browser Error Message]
    C -->|Invalid| H[Custom Error Display]
    E -->|Invalid| I[Server Error Response]

Strategi validasi multi-lapisan:

Validasi HTML5: Pemeriksaan berbasis browser langsung
Validasi JavaScript: Logika kustom dan pengalaman pengguna
Validasi server: Pemeriksaan keamanan dan integritas data akhir
Peningkatan progresif: Berfungsi bahkan jika JavaScript dinonaktifkan

Atribut Validasi HTML5

Alat validasi modern yang tersedia:

Atribut	Tujuan	Contoh Penggunaan	Perilaku Browser
`required`	Kolom wajib	`<input required>`	Mencegah pengiriman kosong
`minlength`/`maxlength`	Batas panjang teks	`<input maxlength="20">`	Menegakkan batas karakter
`min`/`max`	Rentang numerik	`<input min="0" max="1000">`	Memvalidasi batas angka
`pattern`	Aturan regex kustom	`<input pattern="[A-Za-z]+">`	Mencocokkan format tertentu
`type`	Validasi tipe data	`<input type="email">`	Validasi format spesifik

Styling Validasi CSS

Buat umpan balik visual untuk status validasi:

/* Valid input styling */
input:valid {
  border-color: #28a745;
  background-color: #f8fff9;
}

/* Invalid input styling */
input:invalid {
  border-color: #dc3545;
  background-color: #fff5f5;
}

/* Focus states for better accessibility */
input:focus:valid {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

input:focus:invalid {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

Apa yang dicapai oleh isyarat visual ini:

Batas hijau: Menunjukkan validasi berhasil, seperti lampu hijau di pusat kendali
Batas merah: Menandakan kesalahan validasi yang membutuhkan perhatian
Sorotan fokus: Memberikan konteks visual yang jelas untuk lokasi input saat ini
Gaya konsisten: Membangun pola antarmuka yang dapat dipelajari pengguna

💡 Tips Profesional: Gunakan pseudo-class CSS :valid dan :invalid untuk memberikan umpan balik visual langsung saat pengguna mengetik, menciptakan antarmuka yang responsif dan membantu.

Menerapkan Validasi yang Komprehensif

Mari tingkatkan formulir registrasi Anda dengan validasi yang kuat yang memberikan pengalaman pengguna yang luar biasa dan kualitas data yang baik:

<form id="registerForm" method="POST" novalidate>
  <div class="form-group">
    <label for="user">Username <span class="required">*</span></label>
    <input id="user" name="user" type="text" required 
           minlength="3" maxlength="20" 
           pattern="[a-zA-Z0-9_]+" 
           autocomplete="username"
           title="Username must be 3-20 characters, letters, numbers, and underscores only">
    <small class="form-text">Choose a unique username (3-20 characters)</small>
  </div>
  
  <div class="form-group">
    <label for="currency">Currency <span class="required">*</span></label>
    <input id="currency" name="currency" type="text" required 
           value="$" maxlength="3" 
           pattern="[A-Z$€£¥₹]+" 
           title="Enter a valid currency symbol or code">
    <small class="form-text">Currency symbol (e.g., $, €, £)</small>
  </div>
  
  <div class="form-group">
    <label for="description">Account Description</label>
    <input id="description" name="description" type="text" 
           maxlength="100" 
           placeholder="Personal savings, checking, etc.">
    <small class="form-text">Optional description (up to 100 characters)</small>
  </div>
  
  <div class="form-group">
    <label for="balance">Starting Balance</label>
    <input id="balance" name="balance" type="number" 
           value="0" min="0" step="0.01" 
           title="Enter a positive number for your starting balance">
    <small class="form-text">Initial account balance (minimum $0.00)</small>
  </div>
  
  <button type="submit">Create Account</button>
</form>

Memahami validasi yang ditingkatkan:

Menggabungkan indikator kolom wajib dengan deskripsi yang membantu
Menyertakan atribut pattern untuk validasi format
Memberikan atribut title untuk aksesibilitas dan tooltip
Menambahkan teks bantuan untuk memandu input pengguna
Menggunakan struktur HTML semantik untuk aksesibilitas yang lebih baik

Aturan Validasi Lanjutan

Apa yang dicapai oleh setiap aturan validasi:

Kolom	Aturan Validasi	Manfaat Pengguna
Nama Pengguna	`required`, `minlength="3"`, `maxlength="20"`, `pattern="[a-zA-Z0-9_]+"`	Memastikan pengidentifikasi yang valid dan unik
Mata Uang	`required`, `maxlength="3"`, `pattern="[A-Z$€£¥₹]+"`	Menerima simbol mata uang umum
Saldo	`min="0"`, `step="0.01"`, `type="number"`	Mencegah saldo negatif
Deskripsi	`maxlength="100"`	Batas panjang yang wajar

Menguji Perilaku Validasi

Coba skenario validasi ini:

Kirimkan formulir dengan kolom wajib kosong
Masukkan nama pengguna yang kurang dari 3 karakter
Coba karakter khusus di kolom nama pengguna
Masukkan jumlah saldo negatif

Yang akan Anda amati:

Browser menampilkan pesan validasi bawaan
Perubahan gaya berdasarkan status :valid dan :invalid
Pengiriman formulir dicegah hingga semua validasi lolos
Fokus otomatis berpindah ke kolom pertama yang tidak valid

Validasi Sisi Klien vs Sisi Server

graph LR
    A[Client-Side Validation] --> B[Instant Feedback]
    A --> C[Better UX]
    A --> D[Reduced Server Load]
    
    E[Server-Side Validation] --> F[Security]
    E --> G[Data Integrity]
    E --> H[Business Rules]
    
    A -.-> I[Both Required]
    E -.-> I

Mengapa Anda membutuhkan kedua lapisan:

Validasi sisi klien: Memberikan umpan balik langsung dan meningkatkan pengalaman pengguna
Validasi sisi server: Memastikan keamanan dan menangani aturan bisnis yang kompleks
Pendekatan gabungan: Menciptakan aplikasi yang kuat, ramah pengguna, dan aman
Peningkatan progresif: Berfungsi bahkan ketika JavaScript dinonaktifkan

🛡️ Pengingat Keamanan: Jangan pernah hanya mengandalkan validasi sisi klien! Pengguna jahat dapat melewati pemeriksaan sisi klien, jadi validasi sisi server sangat penting untuk keamanan dan integritas data.

Tantangan Agen GitHub Copilot 🚀

Gunakan mode Agen untuk menyelesaikan tantangan berikut:

Deskripsi: Tingkatkan formulir registrasi dengan validasi sisi klien yang komprehensif dan umpan balik pengguna. Tantangan ini akan membantu Anda berlatih validasi formulir, penanganan kesalahan, dan meningkatkan pengalaman pengguna dengan umpan balik interaktif.

Prompt: Buat sistem validasi formulir lengkap untuk formulir registrasi yang mencakup: 1) Umpan balik validasi real-time untuk setiap kolom saat pengguna mengetik, 2) Pesan validasi kustom yang muncul di bawah setiap kolom input, 3) Kolom konfirmasi kata sandi dengan validasi pencocokan, 4) Indikator visual (seperti tanda centang hijau untuk kolom valid dan peringatan merah untuk kolom tidak valid), 5) Tombol submit yang hanya aktif ketika semua validasi lolos. Gunakan atribut validasi HTML5, CSS untuk styling status validasi, dan JavaScript untuk perilaku interaktif.

Pelajari lebih lanjut tentang mode agen di sini.

🚀 Tantangan

Tampilkan pesan kesalahan di HTML jika pengguna sudah ada.

Berikut adalah contoh tampilan halaman login akhir setelah sedikit penyesuaian gaya:

Kuis Pasca-Kuliah

Kuis pasca-kuliah

Tinjauan & Studi Mandiri

Para pengembang telah menjadi sangat kreatif dalam upaya membangun formulir mereka, terutama terkait strategi validasi. Pelajari berbagai alur formulir dengan melihat CodePen; bisakah Anda menemukan beberapa formulir yang menarik dan menginspirasi?

Tugas

Atur gaya aplikasi bank Anda

Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis dapat mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini.

33 KiB Raw Blame History Unescape Escape

Membangun Aplikasi Perbankan Bagian 2: Membuat Formulir Login dan Registrasi