Contoh Coding Form Registrasi yang Responsif

Membuat Input Data Pengguna

Buat input nama dan email dengan label yang terhubung melalui pasangan atribut for dan id:

<div class="col-md-6">
  <label for="fullName" class="form-label">Nama lengkap</label>
  <input id="fullName" name="full_name" class="form-control"
    autocomplete="name" minlength="3" maxlength="80" required>
  <div class="invalid-feedback">Nama minimal 3 karakter.</div>
</div>

<div class="col-md-6">
  <label for="email" class="form-label">Email</label>
  <input id="email" name="email" type="email" class="form-control"
    autocomplete="email" maxlength="120" required>
  <div class="invalid-feedback">Masukkan alamat email yang valid.</div>
</div>

Nomor WhatsApp ditampilkan dengan awalan negara:

<div class="input-group has-validation">
  <span class="input-group-text">+62</span>
  <input id="phone" name="phone" type="tel" class="form-control"
    inputmode="numeric" pattern="[0-9]{9,13}" required
    placeholder="81234567890">
  <div class="invalid-feedback">
    Gunakan 9–13 angka tanpa spasi dan awalan 0.
  </div>
</div>

Aturan nomor tersebut merupakan format contoh Indonesia. Backend tetap perlu menormalisasi dan memvalidasi nomor berdasarkan kebutuhan aplikasi.