Labkom99.com – Belajar HTML5 Berbagai Bidang Form Dengan HTML5. Belajar HTML5 tipe masukan baru dalam membuat berbagai Form Dengan HTML5. Bidang form menjadi penerima jenis data tertentu, seperti alamat Email, URL, tanggal, dll., Dan dilakukan dengan fungsi pemeriksaan dengan browser bawaan. Ini berarti Anda tidak perlu lagi menggunakan javascript untuk memverifikasinya. Jenis masukan Form Dengan HTML5 baru ini meliputi:
- Url
- Jumlah
- Jarak
- Telp
- Penanggalan
- Pencarian
- Warna
Dukungan browser Form Dengan HTML5
Tidak semua browser mendukung kolom input Form Dengan HTML5 ini. Sebuah contoh diberikan dalam pendahuluan setiap bidang masukan form di bawah ini. Jika browser Anda tidak mendukung bidang iput form, ini akan ditampilkan sebagai kotak input teks biasa.
Tipe Email Form Dengan HTML5
Jenis inputan Email digunakan untuk bidang masukan yang harus berisi alamat Email, dan dapat memverifikasi apakah inputan adalah alamat Email yang valid. Anda dapat menggunakan type=”email” untuk menentukan domain inputan sebagai Domain inputan email.
<input type="email" name="emailField"/> Berikut ini adalah hasil dari kode di atas, Anda dapat mencoba memasukkan alamat Email yang tidak valid untuk melihat efeknya.
Tips: Browser Safari iPhone mendukung jenis masukan email, dan menyesuaikannya dengan mengubah keyboard layar sentuh (tambahkan opsi @ dan .com)
Bidang URL
Jenis URL menerima string yang mewakili alamat URL, dan memverifikasi apakah string tersebut adalah alamat URL yang valid. Anda dapat menggunakan type=”url” untuk menentukan domain masukan sebagai domain masukan URL.
<input type="url" name="urlField"/> Berikut ini adalah hasil pengembalian kode di atas, Anda dapat mencoba memasukkan alamat URL yang tidak valid untuk melihat efeknya.
Tipe Nomor
Tipe Angka hanya dapat menerima data numerik, dan akan memeriksa apakah string input adalah nilai numerik yang valid. Menggunakan bidang ini pada ponsel akan memunculkan papan ketik numerik bagi pengguna untuk memilih nomor saat kotak input difokuskan. Anda dapat menggunakan type=”number” untuk menentukan bidang masukan sebagai bidang masukan Angka.
<input type="number" name="numberField"/>Berikut ini adalah hasil pengembalian kode di atas, Anda dapat mencoba memasukkan nomor yang tidak valid untuk melihat efeknya.
Atribut Tipe Nomor
Jenis Angka memiliki 3 atribut tambahan, yang dapat memengaruhi pilihan angka pengguna. 3 atribut tersebut adalah:
- min
- max
- step
min Atribut menentukan nilai minimum max yang dapat dipilih , atribut menentukan nilai maksimum yang dapat dipilih, dan step atribut menentukan interval nomor resmi saat tombol panah atas dan bawah diklik. Misalnya, jika langkah = “3”, nomor resmi adalah -3,0,3,6.
<input type="number" name="numberField"
min="10" max="20" step="2" /> Hasil yang dari oleh kode di atas adalah sebagai berikut, klik tombol panah di kotak input untuk melihat efeknya.
Tipe Range
Tipe range digunakan untuk bidang masukan yang harus berisi nilai numerik dalam kisaran tertentu. Tipe ini menggunakan bilah geser untuk memilih nilai numerik dalam range. Anda dapat type=”range” menentukan bidang masukan sebagai tipe range dengan kode dibawah ini
<input type="range" name="rangeField"/> Di bawah ini adalah hasil kembali dari kode di atas. Anda dapat mencoba menarik slider dan mengklik tombol view untuk melihat nilai yang sesuai.
Atribut Tipe Range
Tipe range memiliki 3 atribut tambahan, parameter ini digunakan untuk mengontrol range nilai yang dipilih di kelas slider.
- min
- max
- step
min Properti menetapkan nilai minimum yang max dapat dipilih , properti menetapkan nilai maksimum yang dapat dipilih, dan step properti menetapkan nilai langkah untuk setiap gerakan slider. Berikut ini contohnya:
<input type="range" name="rangeField" min="100" max="200" step="2"/>Kisaran nilai dari slider tipe Range di atas adalah antara 100-200, dan setiap kali Anda menggerakkan slider, itu meningkat atau menurun sebesar 2 range.
Tipe Telp
Tipe Telp digunakan untuk memasukkan nomor telepon. Berbeda dengan tipe angka, tipe tele bisa berisi spasi antar angka, tapi tidak bisa memasukkan huruf. Anda dapat type=”tel” menentukan kolom input sebagai tipe tel.
<input type="tel" name="telField"/> Sebagai contoh, Anda dapat memasukkan nomor telepon di kotak input, seperti 010 336699, untuk melihat perubahan bilah alamat browser.
Tipe Pencarian Form Dengan HTML5
Jenis Pencarian digunakan untuk melakukan fungsi pencarian di situs web. Jenis pencarian dapat menampilkan riwayat pencarian sebelumnya, yang ditampilkan melalui daftar drop-down.
Anda dapat menggunakan type=”search” untuk menentukan kolom input sebagai jenis pencarian.
<input type="search" name="searchField"/> Berikut ini contohnya.
Perhatikan bahwa halaman akan disegarkan setelah mengirimkan pencarian. Saat Anda melakukan pencarian yang sama lagi, Anda hanya dapat memasukkan huruf pertama dan Anda akan menemukanya.
Tipe Tanggal
Jenis Tanggal digunakan untuk memilih tahun, bulan, dan hari. Klik panah drop-down di kotak input Tanggal untuk memunculkan pemilih tanggal, dan Anda dapat memilih tanggal melaluinya. Anda juga dapat memasukkan nomor secara langsung, ini akan memeriksa apakah tanggal yang Anda masukkan adalah tanggal resmi, dan tanggal ilegal tidak dapat dimasukkan.
Anda dapat type=”date” menentukan kolom input sebagai tipe Tanggal dengan kode berikut.
<input type="date" name="dateField"/> Berikut ini contohnya. Anda dapat mencoba memasukkan tanggal secara manual atau memilih tanggal melalui pemilih tanggal.
Tipe Waktu
Jenis Waktu digunakan untuk memilih waktu. Sama seperti tipe Tanggal, Anda juga dapat langsung memasukkan nilai waktu, dan ini akan memverifikasi apakah waktu yang Anda masukkan adalah waktu yang benar. Jenis Waktu memungkinkan jam antara 0-23 dan menit antara 0-59.
Anda dapat type=”time” menentukan kolom input sebagai tipe Waktu dengan kode berikut.
<input type="time" name="timeField"/> Berikut ini adalah contoh tipe Waktu.
Tipe Bulan
Jenis bulan dapat memilih tahun dan bulan. Rentang bulan antara 1-12, dan Anda dapat memilih bulan melalui pemilih.
Anda dapat menggunakan type=”month” untuk menentukan bidang masukan sebagai jenis bulan.
<input type="month" name="monthField"/> Berikut adalah contoh tipe bulan.
Tipe Minggu
Jenis Minggu digunakan untuk memilih minggu. Nilai minggu ini bisa antara 1-53. Anda dapat memilih nilai minggu ini melalui pemilih. Mungkin ada 52 minggu atau 53 minggu dalam setahun, dan browser akan menilai berdasarkan tahun.
Anda dapat type=”week” menentukan kolom input sebagai jenis minggu.
<input type="week" name="weekField"/> Berikut ini adalah contoh tipe minggu.
Tipe Warna Form Dengan HTML5
Jenis Warna digunakan untuk memilih warna. Anda dapat type=”color” menentukan bidang masukan sebagai jenis warna dengan.
<input type="color" name="colorField"/> Berikut ini adalah contoh dari tipe Color.
