Mana sintaks html yang benar untuk membuat kotak centang?

Question

Pertemuan ini adalah pertemuan ke-4 kami tentang Formulir HTML. Pada pertemuan sebelumnya kita telah membahas tentang pengenalan dasar form, macam-macam atribut tag form, dan macam-macam elemen form

Pada kesempatan kali ini kita akan membahas lebih detail tentang atribut

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

4 yang ada pada elemen

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

5

Berbagai Jenis Masukan

Seperti yang kita ketahui, dalam membangun form HTML, kita bisa menggunakan berbagai elemen

Seperti dalam kasus elemen

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

_5,

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

7,

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

8, dan seterusnya

Namun, yang perlu kita ketahui lebih dalam adalah. elemen

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

_5 sendiri memiliki banyak jenis isian

Berikut ini adalah daftar jenis elemen input menurut abjad

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

_0

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

_1

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

_2

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

_3

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

_4

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

_5

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

_6

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

_7

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

_8

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

_9

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

_0

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

_1

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

_2

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

_3

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

_4

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

_5

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

_6

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

_7

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

_8 - ini adalah default

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

_9

<form>
  <label for="isian-url">Masukkan alamat ig anda!</label> <br>
  <input
    id="isian-url"
    type="url"
    name="instagram"
  >

  <br><br>

  <button>Submit</button>
</form>

0

<form>
  <label for="isian-url">Masukkan alamat ig anda!</label> <br>
  <input
    id="isian-url"
    type="url"
    name="instagram"
  >

  <br><br>

  <button>Submit</button>
</form>

1

Bagi saya pribadi yang sudah belajar HTML lebih dari 5 tahun yang lalu, kebanyakan dari jenis-jenis di atas adalah “hal baru”. Dan melihat perkembangan dunia web yang semakin kompleks, tidak menutup kemungkinan di tahun-tahun mendatang jenis input dalam HTML akan semakin meningkat.

Catatan. terkadang tidak semua tipe didukung oleh semua browser

Jenis teks

Tipe pertama adalah tipe

<form>
  <label for="isian-url">Masukkan alamat ig anda!</label> <br>
  <input
    id="isian-url"
    type="url"
    name="instagram"
  >

  <br><br>

  <button>Submit</button>
</form>

2. Tipe ini adalah tipe paling dasar dalam

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

5, bahkan tanpa mendefinisikan atribut

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

4, browser akan memilih tipe ini sebagai default

Fungsi dari tipe

<form>
  <label for="isian-url">Masukkan alamat ig anda!</label> <br>
  <input
    id="isian-url"
    type="url"
    name="instagram"
  >

  <br><br>

  <button>Submit</button>
</form>

_2 adalah mengambil isian berupa teks

Contoh

<label for="nama">Nama</label> <br>
<input id="nama" type="text">

Hasil keluaran

Jenis surel

Jenis input berikutnya adalah jenis email

Tipe ini memiliki fitur validasi dimana jika isian kita tidak berupa format email yang valid, maka form tidak bisa disubmit

Perhatikan contoh berikut

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

Hasil keluaran

Jika kita menekan tombol diatas sedangkan value atau nilai dari inputan tidak dalam format email, maka browser akan memberikan peringatan dan form tidak akan bisa disubmit.

Jenis kata sandi

Berikutnya adalah ketik

<form>
  <label for="isian-url">Masukkan alamat ig anda!</label> <br>
  <input
    id="isian-url"
    type="url"
    name="instagram"
  >

  <br><br>

  <button>Submit</button>
</form>

6. Jenis ini akan mengubah semua karakter yang kita ketik menjadi karakter bintang

<form>
  <label for="isian-url">Masukkan alamat ig anda!</label> <br>
  <input
    id="isian-url"
    type="url"
    name="instagram"
  >

  <br><br>

  <button>Submit</button>
</form>

7

Perhatikan contoh berikut

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

Hasil keluaran

Jenis nomor

Berikutnya adalah ketik

<form>
  <label for="isian-url">Masukkan alamat ig anda!</label> <br>
  <input
    id="isian-url"
    type="url"
    name="instagram"
  >

  <br><br>

  <button>Submit</button>
</form>

_8. Jenis ini membatasi input pengguna hanya untuk karakter numerik. Sehingga user tidak bisa mengisi karakter huruf, karakter putih, dll

Plus. browser akan menambahkan dua tombol ke atas dan ke bawah untuk mengubah nomor isian

Perhatikan contoh berikut

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

_

Hasil keluaran

Catatan. selain mengklik tombol atas dan bawah, kita juga dapat menggunakan tombol navigasi atas dan bawah pada keyboard untuk mengubah angka

Beberapa atribut untuk tipe ________26______8

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

_0 - menentukan jumlah minimum

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

_1 - tentukan jumlah maksimum

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

_2 - menentukan kelipatan (nilai yang tidak cocok dengan kelipatan tidak dapat dimasukkan, dan default atribut ini adalah

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

3)

Contoh penggunaan atribut

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

2

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

Hasil keluaran

jenis URL

Berikutnya adalah tipe

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

5. Seperti namanya, tipe ini akan memvalidasi entri apakah itu sesuai dengan format url yang valid atau tidak. Jika tidak sesuai, maka formulir tidak akan dapat diserahkan

Perhatikan contoh berikut

<form>
  <label for="isian-url">Masukkan alamat ig anda!</label> <br>
  <input
    id="isian-url"
    type="url"
    name="instagram"
  >

  <br><br>

  <button>Submit</button>
</form>

Hasil keluaran

Jenis telepon

Ketik

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

_6 merupakan input untuk memasukkan nomor telepon. Namun, yang perlu diperhatikan adalah bahwa tipe

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

6 tidak sama dengan tipe

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

8 atau tipe

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

5 yang secara otomatis memvalidasi input pengguna

Pada tipe

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

_6 kita masih harus menentukan pola nomor telepon yang kita inginkan secara manual. Hal ini dikarenakan nomor telepon di berbagai negara memiliki format yang berbeda-beda

Perhatikan contoh berikut

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

Hasil keluaran

Pada contoh diatas isian baru akan dikatakan valid jika untuk format seperti ini

1234-1234-1234
0837-3021-3222
dan seterusnya

Jenis tanggal

Jenis masukan selanjutnya yang bisa kita gunakan adalah jenis

<label for="isian-tanggal-lahir">Tanggal Lahir</label> <br>
<input
  id="isian-tanggal-lahir"
  name="tanggal_lahir"
  type="date"
>

1

Jenis ini akan menampilkan

<label for="isian-tanggal-lahir">Tanggal Lahir</label> <br>
<input
  id="isian-tanggal-lahir"
  name="tanggal_lahir"
  type="date"
>

_2 tergantung pada browser dan juga OS. Tampilan pemilih tanggal di Windows akan berbeda dengan di Mac OS, begitu juga dengan pemilih tanggal di Android akan berbeda dengan iOS

Perhatikan contoh berikut

<label for="isian-tanggal-lahir">Tanggal Lahir</label> <br>
<input
  id="isian-tanggal-lahir"
  name="tanggal_lahir"
  type="date"
>

Hasil keluaran

Kita juga dapat memanfaatkan atribut

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

_0 dan

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

1 untuk menetapkan tanggal minimum dan tanggal maksimum

Nilai

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

0 dan

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

1 ditulis dengan format.

<label for="isian-tanggal-lahir">Tanggal Lahir</label> <br>
<input
  id="isian-tanggal-lahir"
  name="tanggal_lahir"
  type="date"
>

7

Selain itu, kita juga bisa mengatur tanggal menggunakan atribut

<label for="isian-tanggal-lahir">Tanggal Lahir</label> <br>
<input
  id="isian-tanggal-lahir"
  name="tanggal_lahir"
  type="date"
>

8 dengan format yang sama

Perhatikan contoh berikut

<label for="isian-1">Tanggal Awal</label> <br>
<input
  id="isian-1"
  name="tanggal_awal"
  type="date"
  min="2021-01-01"
  value="2021-02-20"
>

<br><br>

<label for="isian-2">Tanggal Akhir</label> <br>
<input
  id="isian-2"
  name="tanggal_awal"
  type="date"
  min="2021-12-31"
>

Hasil keluaran

Ketik datetime-local

Jenis input berikutnya adalah

<label for="isian-tanggal-lahir">Tanggal Lahir</label> <br>
<input
  id="isian-tanggal-lahir"
  name="tanggal_lahir"
  type="date"
>

_9

Jenis ini akan menampilkan pemilih tanggal + pemilih waktu. Jadi tidak hanya tanggalnya saja, kita juga bisa memilih jamnya

Kita ubah saja kode sebelumnya dari tipe

<label for="isian-tanggal-lahir">Tanggal Lahir</label> <br>
<input
  id="isian-tanggal-lahir"
  name="tanggal_lahir"
  type="date"
>

1 menjadi

<label for="isian-tanggal-lahir">Tanggal Lahir</label> <br>
<input
  id="isian-tanggal-lahir"
  name="tanggal_lahir"
  type="date"
>

9

<label for="isian-waktu-bayar">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu-bayar"
  name="waktu_pembayaran"
  type="datetime-local"
>

Hasil keluaran

Dan untuk menetapkan nilai default, kita dapat menggunakan atribut

<label for="isian-tanggal-lahir">Tanggal Lahir</label> <br>
<input
  id="isian-tanggal-lahir"
  name="tanggal_lahir"
  type="date"
>

8 dengan format.

<label for="isian-1">Tanggal Awal</label> <br>
<input
  id="isian-1"
  name="tanggal_awal"
  type="date"
  min="2021-01-01"
  value="2021-02-20"
>

<br><br>

<label for="isian-2">Tanggal Akhir</label> <br>
<input
  id="isian-2"
  name="tanggal_awal"
  type="date"
  min="2021-12-31"
>

3 (dalam waktu UTC)

Jadi misal kita mau setting default valuenya menjadi 17 Agustus 2021 jam 7 WIB, maka kita bisa tulis seperti ini

<label for="isian-1">Tanggal Awal</label> <br>
<input
  id="isian-1"
  name="tanggal_awal"
  type="date"
  min="2021-01-01"
  value="2021-02-20"
>

<br><br>

<label for="isian-2">Tanggal Akhir</label> <br>
<input
  id="isian-2"
  name="tanggal_awal"
  type="date"
  min="2021-12-31"
>

4

Contoh

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

0

Hasil keluaran

Penting. padahal hasilnya di tampilkan jam 01. 00 AM, tetapi format waktu ________63______3 adalah waktu UTC. Jadi jika dikonversi ke waktu WIB (UTC+7), hasilnya menjadi jam 07. 00 pagi

Jenis waktu

Jenis masukan selanjutnya adalah jenis masukan ________63______6, jenis ini akan membuat kolom isian berupa pilihan jam

Perhatikan contoh berikut

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_1

Hasil keluaran

Jenis bulan

Tipe selanjutnya adalah tipe

<label for="isian-1">Tanggal Awal</label> <br>
<input
  id="isian-1"
  name="tanggal_awal"
  type="date"
  min="2021-01-01"
  value="2021-02-20"
>

<br><br>

<label for="isian-2">Tanggal Akhir</label> <br>
<input
  id="isian-2"
  name="tanggal_awal"
  type="date"
  min="2021-12-31"
>

_7, berfungsi untuk membuat kolom untuk diisi bulan

Perhatikan contoh berikut

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_2

Hasil keluaran

Jenis minggu

Hampir sama dengan tipe input

<label for="isian-1">Tanggal Awal</label> <br>
<input
  id="isian-1"
  name="tanggal_awal"
  type="date"
  min="2021-01-01"
  value="2021-02-20"
>

<br><br>

<label for="isian-2">Tanggal Akhir</label> <br>
<input
  id="isian-2"
  name="tanggal_awal"
  type="date"
  min="2021-12-31"
>

_7, hanya tipe input

<label for="isian-1">Tanggal Awal</label> <br>
<input
  id="isian-1"
  name="tanggal_awal"
  type="date"
  min="2021-01-01"
  value="2021-02-20"
>

<br><br>

<label for="isian-2">Tanggal Akhir</label> <br>
<input
  id="isian-2"
  name="tanggal_awal"
  type="date"
  min="2021-12-31"
>

9 yang digunakan untuk mengambil kota dalam setahun

Jadi minggu pertama di bulan Januari adalah minggu 1

Sedangkan minggu kedua di bulan Februari adalah minggu ke-5 dan seterusnya

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_3

Hasil keluaran

Catatan. sampai artikel ini ditulis, belum ada tipe input

<label for="isian-waktu-bayar">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu-bayar"
  name="waktu_pembayaran"
  type="datetime-local"
>

0, itu karena kita bisa menggunakan tipe data

<form>
  <label for="isian-url">Masukkan alamat ig anda!</label> <br>
  <input
    id="isian-url"
    type="url"
    name="instagram"
  >

  <br><br>

  <button>Submit</button>
</form>

8 menggunakan atribut

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

0 dan

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

1, misalnya.

<label for="isian-waktu-bayar">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu-bayar"
  name="waktu_pembayaran"
  type="datetime-local"
>

4 dan

<label for="isian-waktu-bayar">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu-bayar"
  name="waktu_pembayaran"
  type="datetime-local"
>

5

Jenis radio

Selanjutnya kolom isian dengan tipe

<label for="isian-waktu-bayar">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu-bayar"
  name="waktu_pembayaran"
  type="datetime-local"
>

6. Ini adalah kolom isian tipe opsi di mana kami dapat menawarkan beberapa opsi kepada pengguna. Tapi hanya satu pilihan yang bisa dipilih

Perhatikan contoh berikut

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_4

Hasil keluaran

Pada pilihan di atas, kita hanya bisa memilih salah satu saja

Yang perlu diperhatikan adalah bahwa atribut

<label for="isian-waktu-bayar">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu-bayar"
  name="waktu_pembayaran"
  type="datetime-local"
>

7 dari setiap tombol radio harus memiliki nilai yang sama dalam satu set pilihan. Dalam contoh di atas, kami memiliki 2 set opsi, oleh karena itu ada 2 nama. ________67______8 dan

<label for="isian-waktu-bayar">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu-bayar"
  name="waktu_pembayaran"
  type="datetime-local"
>

9

Jenis kotak centang

Berikutnya adalah jenis input kotak centang atau daftar periksa. Bedanya dengan radio, kita bisa memilih lebih dari satu pilihan dalam satu set pilihan

Mari ubah semua

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_00 di kode sebelumnya menjadi

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

01

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_5

Inilah hasilnya

Pada contoh diatas kita dapat memilih (centang) semua pilihan yang tersedia. 😂

Jenis file

Selanjutnya adalah input type

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_02, type ini akan membuat tombol "Browser" pada browser. Dan ketika tombol di klik maka browser akan menampilkan jendela baru (untuk pengguna desktop) untuk mengambil file, ada juga untuk Android dan iOS, browser akan membuka file explorer atau aplikasi sejenis

Perhatikan contoh berikut

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_6

Hasil keluaran

Kita dapat menambahkan atribut

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_03 untuk mengatur file apa saja yang dapat diunggah. Misalkan kita hanya ingin mengizinkan file gambar seperti

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

04,

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

05 atau

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

06, maka atribut

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

03 akan terlihat seperti ini

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_7

Hasil keluaran

Contoh

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_03 untuk file lainnya

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_09 - file pdf

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_10 - untuk file

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

11 atau

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

12

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_13 - untuk file

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

14 atau

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

15

dan seterusnya

Catatan. Validasi file di atas hanya terjadi di sisi klien, dan kita masih harus memvalidasi file yang diunggah di sisi server

Jenis rentang

Berikutnya adalah jenis input

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_16, yaitu jenis isian berupa slider. Kita bisa menemukannya di pengaturan volume

Perhatikan contoh berikut

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_8

Hasil keluaran

Rentang nilai default untuk tipe

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_16 adalah 0 hingga 100. Kita dapat menggantinya menggunakan atribut

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

0 dan

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

1

Jenis warna

Selanjutnya adalah input type

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_20, type ini akan memunculkan color picker ketika di klik

Perhatikan contoh berikut

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_9

Hasil keluaran

Jenis pencarian

Tipe selanjutnya adalah tipe

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_21, tipe ini tidak memiliki ciri khusus tertentu. Ini mirip dengan teks biasa tetapi jika kita mengetik sesuatu, maka tombol x akan muncul di sisi kanan input

Perhatikan contoh berikut

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

0

Hasil keluaran

Kirim jenis

Jenis masukan selanjutnya adalah jenis

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_22

Ini adalah

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

_5 yang ditampilkan dalam bentuk tombol. Jika tombol ini diklik, formulir akan dikirimkan dan browser akan mulai mengirim data

Perhatikan contoh berikut

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

_1

Hasil keluaran

Atur ulang jenis

Berikutnya adalah tipe

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

_24. Tipe ini akan mengembalikan status atau data dari form ke nilai awalnya

Jika nilai awal input kosong, maka ketika direset akan kembali kosong. Namun jika nilai awal sudah diisi dengan sesuatu, maka ketika di reset data akan kembali seperti yang telah di setting sebelumnya

Perhatikan contoh berikut

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

_2

Hasil keluaran

Coba ubah isi dari input diatas, lalu klik tombol reset

Tipe tersembunyi

Last but not least adalah jenis input

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

25. Seperti namanya, jenis input ini tidak akan menampilkan input apa pun di halaman web. Namun nama dan nilai dari kolom input tetap akan dikirimkan ke server pada saat penyerahan

Perhatikan contoh berikut

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

_3

Hasil keluaran

Satu-satunya yang muncul adalah tombol kirim, bukan?

Kode Program Lengkap

Bagi anda yang ingin mendapatkan kode program lengkapnya silahkan kunjungi repositori html-dasar di github

Jangan lupa kasih ⭐⭐

Pertemuan Lanjutan

Insya Allah pada pertemuan selanjutnya kita akan membahas atribut apa saja yang terdapat pada elemen input

Apa elemen HTML yang benar untuk membuat kotak centang?

Tag Input type checkbox berfungsi untuk membuat kotak centang atau isi kotak isian dengan mencentang kotak.

Tag HTML mana yang benar untuk membuat kotak centang?

type='checkbox' adalah deklarasi untuk input ini dalam bentuk kotak centang

Apa itu kotak centang HTML?

Membuat Kotak centang di HTML – Checkbox adalah salah satu komponen di html . Checkbox digunakan untuk memilih beberapa jawaban dari sebuah pertanyaan.