Belajar HTML5 Berbagai Bidang Form Dengan HTML5

Belajar HTML5 Berbagai Bidang Form Dengan HTML5

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>     

Read More

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 Form Dengan HTML5

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 Form Dengan HTML5

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 Form Dengan HTML5

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 Dengan HTML5

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

<formid="theForm"><inputtype="text"></form><inputtype="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.

 

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *