Belajar HTML5 Berbagai Bidang Form Dengan HTML5


Labkom99.com - Belajar HTML5 tipe masukan baru dalam membuat berbagai bentuk form. 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 baru ini meliputi:

  • Email

  • Url

  • Jumlah

  • Jarak
  • Telp
  •  Penanggalan

  • Pencarian

  • Warna

 

Dukungan browser

Tidak semua browser mendukung kolom input form 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

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

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

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.


 

Atribut Baru

HTML5 juga menyediakan satu set atribut baru untuk field input form.

 

Autofocus

autofocus Properti memungkinkan Anda menentukan bidang masukan mana yang akan difokuskan secara otomatis setelah halaman dimuat. Hanya satu bidang masukan yang dapat menyetel atribut ini di halaman.

 

autofocus Atribut dapat digunakan pada bidang masukan form apa pun. Di bawah ini adalah contoh kode.


<input type="text" name="comboBoxField" autofocus>     

 

Placeholder

Placeholder Atribut dapat menyediakan string placeholder untuk bidang masukan form untuk menggambarkan peran bidang masukan. Saat pengguna mulai mengetik, teks placeholder ini akan hilang.

 

placeholder Penggunaan atribut adalah sebagai berikut:


<input type="text" name="textField" placeholder="ini adalah placeholder">   

 

Hasil kembalian dari kode diatas adalah sebagai berikut:


 

Required 

Required Atribut tersebut menunjukkan bahwa nilai atribut tertentu harus diberikan. Artinya required, kolom input dengan atribut tertentu tidak boleh kosong, jika tidak, form tidak dapat dikirim. required Penggunaan atribut adalah sebagai berikut:

 

Perhatikan bahwa atribut ini tidak harus memberikan nilai apa pun, cukup isi satu atribut.


<input type="text" name="textField" required>    

 

Multiple

Multiple Atribut menunjukkan bahwa kolom input ini dapat memasukkan beberapa nilai. Misalnya, kolom email input dapat berisi beberapa alamat email, yang dapat dipisahkan dengan koma.

 

multiple Atribut juga dapat digunakan dengan domain unggahan file ( type="file"), yang memungkinkan pengguna mengunggah banyak file.

 

Pattern

Pattern Atribut memungkinkan Anda menentukan pola ekspresi reguler, dan teks yang dimasukkan saat ini harus sesuai dengan pattern ekspresi reguler. Berikut ini contohnya:


<input type="text" name="textField" pattern="[A-Z][0-9]">   

 

Dalam contoh di atas,  ekspresi pattern reguler adalah bahwa huruf pertama adalah huruf apa pun di AZ, dan nomor berikut adalah angka apa pun dari 0-9.

 

Berikut adalah hasil yang dikembalikan. Anda dapat memasukkan string yang tidak berada dalam ekspresi pattern reguler di atas untuk melihat hasilnya.


 

Sintaks ekspresi reguler di sini pada dasarnya sama dengan sintaks ekspresi reguler JavaScript, tetapi ini akan menyiratkan satu ^ sebelum ekspresi dan satu $ setelah ekspresi. Kedua simbol ini akan cocok dengan karakter awal dan akhir input.

 

Autocomplete

Autocomplete Atribut akan dimasukkan secara otomatis. Biasanya daftar drop-down digunakan untuk meminta pengguna memasukkan teks yang mungkin dimasukkan.

 

Min + Max

min Dan max atribut digunakan untuk membatasi masukan dari suatu bidang masukan. number Gunakan minimumdan di kolom input maximum untuk membatasi nomor yang dimasukkan. date Gunakan minimum dan di lapangan maximum untuk membatasi entri tanggal.

 

Anda tidak harus menggunakan mindan maxatribut pada saat yang sama , mereka dapat digunakan secara terpisah.

 

Step

Step Atribut digunakan untuk mengatur ukuran step. Misalnya, number atau range panjang langkah nilai berubah saat menggeser slider setelah setiap klik pada panah.

 

step Atribut juga dapat digunakan di date, menyetel nilainya agar any digunakan untuk menyesuaikan waktu, seperti mili detik.

 

Form

Form Atribut digunakan untuk mengaitkan bidang masukan dengan singkatan form, atribut tidak bertumpuk. Berikut ini contohnya:


<form id="theForm">
    <input type="text" >
</form>
     
<input type="range" form="theForm" 


Perhatikan bahwa range bidang di atas berada di luar form, form="theForm" dan terkait dengan form. Browser akan memperlakukan range bidang tersebut sebagai bagian dari form.

Komentar