Codingku change

Belajar Element HTML <input>

Elemen <input> digunakan untuk membuat kontrol interaktif pada form berbasis web.

Kontrol input form ini memungkinkan pengguna untuk memasukkan data dan berinteraksi dengan situs web atau aplikasi.

Elemen input merupakan salah satu elemen yang paling powerful dan komplek karena banyaknya kombinasi tipe input dan atribut.

Syntax

Tag <input> ditulis seperti <input> (tanpa tag penutup).

Tag ini biasanya diberi atribut type untuk menentukan tipe kontrol, dan atribut name sebagai referensi pada tag input tersebut.

Sedangkan atribut value digunakan untuk menentukan nilai default form input ini.

<input type="text" name="warna" value="hijau">

<form action="/element/input" target="_blank" method="get">
  <p><label>Nama awal: <input type="text" name="nama_awal" maxlength="100" style="width:120px;"></label></p>
  <p><label>Nama akhir: <input type="text" name="nama_akhir" maxlength="100" style="width:120px;"></label></p>
  <input type="submit" value="Submit">
</form>

Atribut form

Atribut form digunakan untuk mengaitkan elemen <input> dengan elemen form.

Untuk menggunakannya, kamu harus menentukan id form yang ingin dikaitkan dengan elemen form ini.

Pada contoh berikut, saya menempatkan semua elemen terkait form diluar elemen <input>.

Tapi saya hanya mengaitkan dua elemen form (untuk menunjukkan efek atribut form).

Nama depan saya kaitkan dengan id form, tapi nama belakang tidak saya kaitkan.

Sehingga nama belakang tidak dikirimkan dengan form tersebut.

<form action="/element/input" target="_blank" method="get" id="nama_pelanggan"></form>
<p><label>Nama awal: <input form="nama_pelanggan" type="text" name="nama_awal" maxlength="100"
      style="width:120px;"></label></p>
<p><label>Nama akhir: <input type="text" name="nama_akhir" maxlength="100" style="width:120px;"></label></p>
<input form="nama_pelanggan" type="submit" value="Kirim">

type

Menentukan jenis input formulir.

Required.

"text"

Input teks baris tunggal sederhana yang menerima semua jenis karakter

"email"

Seperti input teks, tetapi browser hanya mengizinkan input email yang valid.

Pada perangkat seluler, keyboard email akan muncul.

"number"

Seperti input teks, tetapi browser hanya membolehkan angka yang valid.

Pada perangkat seluler, papan ketik angka akan muncul.

"checkbox"

Kotak centang toggle yang memiliki pilihan dicentang atau tidak dicentang. Nilai hanya dikirimkan oleh             form jika kotak centang dicentang.

Kamu dapat membungkus kotak centang dalam label, untuk menambah area klik.

<label>
  <input type="checkbox">
  saya menerima syarat dan ketentuan yang berlaku
</label>

Perhatikan bagaimana mengklik teks mengaktifkan kotak centang.

"radio"

Needs to be used used in combination with other radio buttons, so that they are mutually exclusive.

You link radio buttons through a similar name value:

<label>
  <input type="radio" name="newsletter" value="yes">
  Yes
</label>
<label>
  <input type="radio" name="newsletter" value="no">
  No
</label>

Hanya bisa memilih salah satu pilihan saja.

"submit"

Tombol Kirim yang dipicu saat diklik atau saat menekan Enter.

name

Menentukan pengidentifikasi unik untuk input tersebut di dalam formulir. Ini memungkinkan server untuk mengakses setiap input nilai saat dikirimkan.

Required.

"first_name"

Nilai nama harus unik sesuai konteks < form > .

Hanya dapat berisi karakter alfanumerik a-z A-Z 0-9 dan beberapa karakter khusus seperti - _ ... tetapi bukan spasi.

placeholder

Menentukan teks placeholder yang tidak dapat dipilih yang hanya muncul ketika input kosong.

"e.g. alex@smith.com"

Kamu dapat memberi petunjuk pada format yang diharapkan untuk input.

Sebagai praktik terbaik, disarankan untuk memiliki label untuk menjelaskan input, dan menggunakan placeholder untuk menampilkan contoh:

<form>
  <label>Email</label><br>
  <input type="email" name="email" placeholder="e.g. alex@smith.com">
</form>

Perhatikan bagaimana placeholder lenyap pada fokus, karenanya kebutuhan untuk mempertahankan label yang terpisah.

required

Memberitahu browser bahwa input ini wajib . Membiarkannya kosong akan menampilkan peringatan.

No value required.

Kamu hanya perlu menambahkan atribut required tanpa value:

<form>
  <input type="text" required>
</form>

Browser akan menampilkan peringatan jika kamu mencoba mengirim form dengan input teks kosong.

disabled

Menonaktifkan input.

No value required.