Membuat Form HTML Bagian 2 Elemen Form

Pada tutorial sebelumnya tentang pembuatan Form di HTML, sudah di bahas tentang membuat form dan menggunakan atribut form HTML. Baca : Membuat Form Pada Website dengan HTML #1

Untuk melanjutkan mengikuti tutorial ini saya sarankan untuk membaca tutorial sebelumnya.

Element Form HTML

Element Form HTML mendefinisikan jenis formulir yang digunakan untuk mengumpulkan input dari pengguna/pengunjung website. Element form HTML juga sering disebut dengan HTML Form Controls. Berikut ini beberapa jenis Element Form HTML:

Element Input <input>

Element <input> adalah elemen form yang paling banyak digunakan, element input dapat ditampilkan dalam beberapa cara, tergantung pada type atribut yang dimasukkan.

Format penulisan element <input> :

Beberapa tipe input yang dapat digunakan antara lain:

  • <input type=”button”> – Untuk membuat tombol yang dapat di klik.
  • <input type=”checkbox”>  – Untuk membuat inputan berupa pilihah (checklist), pengunjung dapat memilih lebih dari satu.
  • <input type=”color”> – untuk menampilkan pilihan warna.
  • <input type=”date”> – untuk menampilkan inputan berupa pilihan tanggal.
  • <input type=”datetime-local”> – untuk menampilkan inputan berupa pilihan tanggal dan jam.
  • <input type=”email”> – digunakan untuk field input yang harus berisi alamat e-mail.
  • <input type=”file”> – digunakan untuk menampilkan fitur pilih file dan tombol “Browse” untuk mengunggah file.
  • <input type=”hidden”> – untuk menampilkan bidang inputan yang disembunyikan.
  • <input type=”image”> – menampilkan gambar yang dapat di klik.
  • <input type=”month”> – memungkinkan pengunjung web dapat memilih bulan dan tahun.
  • <input type=”number”> – mendefinisikan numerik field input (inputan berupa angka)
  • <input type=”password”> – menampilkan bidang inputan seperti text namun pada inputan karakter disembunyikan dengan simbol.
  • <input type=”radio”> – menampilkan bidang inputan berupa pilihan, dan pengguna hanya diperbolehkan memilih 1 pilihan.
  • <input type=”range”> – mendefinisikan kontrol untuk memasukkan nomor yang nilainya dapat dikontrol (seperti kontrol slider). Ranger default adalah 0 sampai 100. Namun, kalian dapat mengatur pembatasan nomor dengan atribut min, max dan step.
  • <input type=”reset”>  – digunakan untuk membuat tombol yang berfungsi untuk mengosongkan nilai yang telah diinputkan di form.
  • <input type=”search”>  – digunakan untuk menampilkan bidang input seperti text field.
  • <input type=”submit”> – untuk membuat tombol yang berfungsi untuk memproses form.
  • <input type=”tel”>  – untuk menampilkan bidang input nomor telepon.
  • <input type=”text”> – untuk menampilkan bidang inputan berupa teks 1 baris.
  • <input type=”time”> – untuk menampilkan bidang inputan berupa jam (time).
  • <input type=”url”> – untuk menampilkan bidang inputan berupa URL.
  • <input type=”week”>  – untuk menampilkan bidang inputan yang memungkinkan pengguna memilih minggu (week) pada bulan dan tahun.

Contoh Penggunaan Element Input <input>

Hasil dari contoh kode di atas dapat kalian lihat seperti gambar di bawah ini.

Hasil Latihan Penggunaan Elemen Input

Hasil Latihan Penggunaan Elemen Input

 

Element Select <select>

Element <select> digunakan untuk mendefinisikan bidang inputan form dalam bentuk pilihan drop-down. Di dalam elemen <select> dapat berisi atribut seperti name, class dll. Untuk menampilkan pilihan di dalam drop-down select kita membutuhkan elemen <option>.

Contoh Penggunaan Element Select <select>

Hasilnya akan terlihat seperti ini.

Hasil Element Select Form HTML

Hasil Element Select Form HTML

 

Element Textarea <textarea>

Element Textarea <textarea> digunakan untuk mendefinisikan field input multi-line (textarea).

Contoh Penggunaan:

Kode Hasil

Demikian tutorial cara Membuat Form HTML Bagian 2 Elemen Form, jika ada yang perlu ditanyakan dilahkan mengisi kolom komentar. Terus pantau postingan blog SolusiLain.Com atau berlangganan supaya mendapatkan update postingan atau tutorial baru dari SolusiLain.Com.

Mungkin Anda juga menyukai

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *