# Semantik

# Formulir

Saat membuat formulir, kamu dapat menggunakan elemen-elemen berikut: <form>, <label>, <input>, <textarea>, and <button>

Label biasanya ditempatkan di atas atau di sebelah kiri:

<form action="/lokasiPengumpulanData" method="post" autocomplete="on">
  <div v-for="isi in IsiFormulir" :key="isi.id" class="isi-formulir">
    <label :for="isi.id">{{ isi.label }}: </label>
    <input :type="isi.tipe" :id="isi.id" :name="isi.id" v-model="isi.nilai" />
  </div>
  <button type="submit">Kirim</button>
</form>

1
2
3
4
5
6
7

See the Pen Simple Form by Maria (@mlama007) on CodePen.

Perhatikan bagaimana kamu dapat menyertakan autocomplete="on"pada elemen formulir dan ini akan berlaku untuk semua masukan (input) dalam formulirmu. Kamu juga dapat menyetel nilai atribut autocomplete (opens new window) yang berbeda-beda untuk setiap masukan.

# Label

Berikan label untuk mendeskripsikan tujuan dari semua kontrol formulir; dengan cara menghubungkan for dan id:

<label for="nama">Nama</label>
<input type="text" name="nama" id="nama" v-model="nama" />

1
2

See the Pen Form Label by Maria (@mlama007) on CodePen.

Jika kamu memeriksa elemen tersebut di dalam alat pengembang chrome-mu dan membuka tab aksesibilitas di dalam tab elemen, kamu akan melihat bagaimana masukan mendapatkan namanya dari label:

Alat Pengembang Chrome menampilkan nama masukan dari label

Peringatan:

Meskipun kamu mungkin pernah melihat label yang membungkus bidang masukan seperti ini:

<label>
  Nama:
  <input type="text" name="nama" id="nama" v-model="nama" />
</label>

1
2
3
4

Pengaturan label secara eksplisit dengan id yang cocok lebih didukung oleh teknologi pendukung.

# aria-label

Kamu juga dapat memberi masukan dengan nama yang dapat diakses dengan aria-label (opens new window).

<label for="nama">Nama</label>
<input
  type="text"
  name="nama"
  id="nama"
  v-model="nama"
  :aria-label="namaLabel"
/>

1
2
3
4
5
6
7
8

See the Pen Form ARIA label by Maria (@mlama007) on CodePen.

Jangan ragu untuk memeriksa elemen tersebut di Alat Pengembang Chrome untuk melihat bagaimana nama yang dapat diakses telah berubah:

Alat Pengembang Chrome menampilkan masukan dengan nama yang dapat diakses dari aria-label

# aria-labelledby

Penggunaan aria-labelledby (opens new window) mirip dengan aria-label, yaitu mengharapkan jika digunakan teks label terlihat di layar. aria-labelledby dipasangkan ke elemen lain dengan menggunakan id dan kamu dapat menghubungkan beberapa id:

<form
  class="demo"
  action="/lokasiPengumpulanData"
  method="post"
  autocomplete="on"
>
  <h1 id="tagihan">Tagihan</h1>
  <div class="isi-formulir">
    <label for="nama">Nama:</label>
    <input
      type="text"
      name="nama"
      id="nama"
      v-model="nama"
      aria-labelledby="tagihan nama"
    />
  </div>
  <button type="submit">Kirim</button>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

See the Pen Form ARIA labelledby by Maria (@mlama007) on CodePen.

Alat Pengembang Chrome menampilkan masukan nama yang dapat diakses dari aria-labelledby

# aria-describedby

aria-describedby (opens new window) digunakan dengan cara yang sama seperti aria-labelledby, yaitu mengharapkan memberikan deskripsi dengan informasi tambahan yang mungkin diperlukan pengguna. Ini dapat digunakan untuk mendesripsikan kriteria untuk masukan apapun

<form
  class="demo"
  action="/lokasiPengumpulanData"
  method="post"
  autocomplete="on"
>
  <h1 id="tagihan">Tagihan</h1>
  <div class="isi-formulir">
    <label for="nama">Nama Lengkap:</label>
    <input
      type="text"
      name="nama"
      id="nama"
      v-model="nama"
      aria-labelledby="tagihan nama"
      aria-describedby="deskripsiNama"
    />
    <p id="deskripsiNama">Mohon sebutkan nama depan dan nama belakang.</p>
  </div>
  <button type="submit">Kirim</button>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

See the Pen Form ARIA describedby by Maria (@mlama007) on CodePen.

Kamu dapat melihat deskripsinya dengan memeriksa Alat Pengembang Chrome:

Alat Pengembang Chrome menampilkan masukan nama yang dapat diakses dari aria-labelledby dan deskripsi dengan aria-describedby

# Placeholder

Hindari menggunakan placeholder karena dapat membingunkan banyak pengguna.

Salah satu masalah placeholder adalah mereka tidak memenuhi kriteria kontras warna (opens new window) secara default; memperbaiki kontras warna membuat placeholder terlihat seperti data yang sudah terisi sebelumnya di bidang masukan. Melihat pada contoh berikut, kamu dapat melihat bahwa placeholder Last Name yang memenuhi kriteria kontras warna tampak seperti data yang sudah terisi sebelumnya:

See the Pen Form Placeholder by Maria (@mlama007) on CodePen.

Cara terbaik adalah memberikan semua informasi yang dibutuhkan pengguna untuk mengisi formulir di luar masukan apapun.

# Instruksi

Saat menambahkan instruksi untuk bidang masukan kamu, pastikan untuk menyambungkannya kapada masukan. Kamu dapat memberikan petunjuk tambahan dan bind beberapa id ke dalam suatu aria-labelledby (opens new window). Ini memungkinkan desain yang lebih fleksibel.

<fieldset>
  <legend>Menggunakan aria-labelledby</legend>
  <label id="label-tanggal" for="tanggal">Tanggal Sekarang:</label>
  <input
    type="date"
    name="tanggal"
    id="tanggal"
    aria-labelledby="label-tanggal instruksi-tanggal"
  />
  <p id="instruksi-tanggal">MM/DD/YYYY</p>
</fieldset>

1
2
3
4
5
6
7
8
9
10
11

Selain itu, kamu juga dapat melampirkan petunjuk ke masukan dengan aria-describedby (opens new window):

<fieldset>
  <legend>Menggunakan aria-describedby</legend>
  <label id="tanggal-lahir" for="tanggal-lahir">Tanggal Lahir:</label>
  <input
    type="date"
    name="tanggal-lahir"
    id="tanggal-lahir"
    aria-describedby="instruksi-tanggal-lahir"
  />
  <p id="instruksi-tanggal-lahir">MM/DD/YYYY</p>
</fieldset>

1
2
3
4
5
6
7
8
9
10
11

See the Pen Form Instructions by Maria (@mlama007) on CodePen.

# Menyembunyikan Konten

Biasanya tidak disarankan untuk menyembunyikan label secara visual, meskipun masukan memiliki nama yang dapat diakses. Namun, jika fungsionalitas masukan dapat dipahami dengan konten di sekitarnya, maka kita dapat menyembunyikan label secara visual.

Mari kita lihat bidang pencarian ini:

<form role="search">
  <label for="cari" class="disembunyikan-secara-visual">Cari: </label>
  <input type="text" name="cari" id="cari" v-model="cari" />
  <button type="submit">Cari</button>
</form>

1
2
3
4
5

Kita dapat melakukan ini karena tombol pencarian akan membantu pengguna dengan kemampuan visual untuk mengidentifikasi maksud dari bidang input tersebut.

Kita dapat menggunakan CSS untuk menyembunyikan elemen secara visual tetapi membuatnya tetap tersedia untuk teknologi pendukung:

.disembunyikan-secara-visual {
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  height: 1px;
  width: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
}

1
2
3
4
5
6
7
8
9
10
11

See the Pen Form Search by Maria (@mlama007) on CodePen.

# aria-hidden="true"

Menambahkan aria-hidden="true" akan menyembunyikan elemen dari teknologi pendukung tetapi membiarkannya tersedia secara visual kepada pengguna lain. Jangan gunakan pada elemen yang dapat difokuskan, gunakanlah hanya pada elemen dekoratif, duplikat, atau konten rahasia.

<p>Ini tidak tersembunyi dari pembaca layar.</p>
<p aria-hidden="true">Ini tersembunyi dari pembaca layar.</p>

1
2

# Tombol

Saat menggunakan tombol di dalam formulir, kamu dapat mengatur jenis untuk mencegah pengiriman formulir. Kamu juga dapat menggunakan masukan untuk membuat tombol:

<form action="/lokasiPengumpulanData" method="post" autocomplete="on">
  <!-- Buttons -->
  <button type="button">Batal</button>
  <button type="submit">Kirim</button>

  <!-- Input buttons -->
  <input type="button" value="Batal" />
  <input type="submit" value="Kirim" />
</form>

1
2
3
4
5
6
7
8
9

See the Pen Form Buttons by Maria (@mlama007) on CodePen.

# Gambar Fungsional

Kamu dapat menggunakan teknik ini untuk membuat gambar fungsional.

Bidang masukan

Gambar-gambar ini akan berperan sebagai tombol dengan tipe kirim pada formulir

<form role="search">
  <label for="cari" class="hidden-visually">Cari: </label>
  <input type="text" name="cari" id="cari" v-model="cari" />
  <input
    type="image"
    class="btnImg"
    src="https://img.icons8.com/search"
    alt="Cari"
  />
</form>

1
2
3
4
5
6
7
8
9
10

Ikon

<form role="search">
  <label for="ikon-pencarian" class="disembunyikan-secara-visual">Cari: </label>
  <input
    type="text"
    name="ikon-pencarian"
    id="ikon-pencarian"
    v-model="ikon-pencarian"
  />
  <button type="submit">
    <i class="fas fa-search" aria-hidden="true"></i>
    <span class="disembunyikan-secara-visual">Cari</span>
  </button>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13

See the Pen Functional Images by Maria (@mlama007) on CodePen.

← Dasar Standar →