Melanjutkan dari posting sebelumnya yaitu Mengenal Tag Input, jika sebelumnya adalah tentang input dan typenya, kali ini akan sedikit membahas serta dengan contoh penggunaan beberapa atribut yang lain dalam tag <input/> terkait dalam membuat sebuah form.
Beberapa atribut yang di maksud, yang juga telah tercantumkan pada postingan sebelumnya antara lain:
Hasilnya adalah:
Contoh di atas menjelaskan, panjang maksimal karakter/maxlength dari bidang input Pengguna adalah "10", dan maxlength pada bidang inputPassword adalah "8".
Atribut ini akan berfungsi dengan baik jika disertakan pada input type text dan input type Password.
Hasilnya adalah:
Atribut checked berfungsi untuk menentukan unsur input terpilih pada saat suatu halaman WEB di buka.
Atribut ini akan berfungsi dengan baik pada input type checkbox dan type radio.
Hasilnya adalah:
Atribut disabled memungkinkan sebuah/beberapa pilihan dalam unsur input akan menjadi tidak aktif dalam kondisi tertentu.
Atribut ini akan berfungsi dengan baik pada input type checkbox dan type radio
Tag <input> menentukan bentuk field bidang input yang akan ditampilkan dalam sebuah formulir. Dan dalam penggunaanya, tag <input> ini tidak mengharuskan tag pembuka dan penutupnya secara terpisah, <input> dan </input>. Cukup dengan satu elemen yang merupakan pembuka sekaligus penutupnya, yaitu dengan memberi tanda slash (/) di akhir sebelum tanda (>), sehingga menjadi <input/>.
Beberapa atribut untuk tag input antara lain:
type
Untuk menentukan tampilan bidang input. Nilai yang dapat digunakan antara lain adalah:
"text" (standar) =>
"checkbox" =>contoh
"radio" => contoh.
"password" =>
"submit" =>
"file" =>
"image".
name
Berfungsi untuk mengidentifikasi formulir pada saat setelah dikirim ke server. Atribut ini tidak mempengaruhi pada tampilan, nilai yang digunakan adalah bisa di isi apapun.
value
Untuk memberikan nilai pada type input terkait. Nilainya adalah bisa diisi apapun.
size
Untuk menentukan lebar bidang. Nilai yang diperlukan adalah, "di isi angka"
maxlength
Untuk menentukan jumlah maksimal karakater yang dapat dimaksukan. Atribut ini hanya untuk disertakan pada type "text" atau "password"
disabled
Berfungsi untuk menon-aktifkan bidang input dalam kondisi tertentu. Nilai yang digunakan adalah "disabled"
checked
Untuk menentukan pilihan standar yang tampilkan pada saat browser dibuka. Atribut ini untuk disertakan pada input type "checkbox" dan "radio".
Nilai yang digunakan adalah "checked".
src
Untuk menentukan lokasi gambar yang digunakan sebagai tombol submit. Dan tentunya, atribut ini untuk disertakan pada input type "image".
Nilai yang digunakan adalah, "Diisi URL".
Berikut ini adalah beberapa contoh, bagaimana cara kerja tag <input/> dengan menggunakan atribut type dalam membuat sebuah formulir.
Tag <form> mendefinisikan sebuah formulir yang berfungsi untuk menerima masukan data dari pengguna. Dalam pemrosesan dari sebuah formulir, adalah diperlukan bahasa pemrograman tertentu seperti javascript, php, ataupun asp.
Dan dalam penggunaanya, tag <form> akan disisipi dengat tag <input> yang berfungsi untuk menampilkan bentuk/type input dari formulir tersebut. Beberapa type input yang dimaksud antara lain, chekbox, radio, submit, text, dan password. Silahkan baca Mengenal Elemen Input.
Dan, gabungan antara tag< form> dan <input> juga masih dapat dikombinasikan dengan tag yang lain seperti select/option, textarea, dan fieldset/legend.. Sehingga akan membentuk tampilan form yang berbeda. Step by step, terlebih dahulu kali ini akan sedikit mengulas tentang tag <form>.
Atribut standar untuk tag <form> antara lain:
action
Untuk menentukan lokasi penerimaan input data yang dikirim. Nilai yang digunakan adalah berupa URL.
method
Untuk menentukan cara bagaimana data input dari pengguna akan dikirim. Nilai yang digunakan yakni, "get" dan "post" .
Contoh sederhana dalam penggunaanya adalah sebagai berikut:
Karena tag <form> tidak berfungsi untuk mempengaruhi pada tampilan, maka hasil yang ditampilkan pada contoh diatas adalah karena fungsi dari tag <input>.
Dan juga, tidak akan menunjukan hasil apapun (eror) karena tidak dilengkapi dengan bahasa-bahasa terkait dengan pemrosesanya. Untuk melihat beberapa contoh sederhana dalam membuat formulir dengan tampilan yang berbeda dengan menggunakan elemen yang berbeda pula, silahkan klik beberapa link di bawah ini:
Untuk membuat daftar pilihan drop-down adalah dengan menggunakan tag <select> dan <option>.
Drop-down itu seperti apa?
Daftar pilihan dengan gaya jatuh ke bawah, kurang lebih tampilanya sederhananya adalah seperti ini:
Pada umumnya, tampilan daftar pilihan drop-down akan dibarengi dengan tampilan prosesornya. Dan untuk menampilkan "pemrosesnya", tag yang diperlukan adalah <form> dan <input>.
Contoh tampilannya kurang lebih akan jadi seperti ini:
Oleh karena disini sedang membahas tentang bahasa HTML yang terkait dengan tampilan, maka pada contoh diatas tidak akan menghasilkan apapun jika di klik pada "Beli Sekarang". Diperlukan bahasa lain diluar HTML untuk dapat memrosesnya, yaitu PHP ataupun Javascript (saya sendiri masih belum banyak mengetahui).
Tag <select>
Atribut yang digunakan antara lain:
disabled
Untuk menampilkan daftar pilihan dalam kondisi tidak aktif. Nilainya adalah, "disabled"
multiple
Untuk menampilkan jumlah item yang akan ditampilkan dalam daftar , harus di ikuti dengan atribut "size".
Nilai untuk multiple adalah "multiple".
name
Tidak mempengaruhi pada tampilan, berfungsi untuk dapat dikenali oleh bahasa pemrosesnya.
size
Untuk menentukan jumlah pilihan yang akan ditampilkan. Nilainya, "angka".
Sesuai dengan pengalaman saya sendiri, atribut ini tidak menampilkan sebagaimana mestinya pada browser ponsel, namun tampak jelas pada browser operamini.
Contoh berikutnya dengan atribut "multiple" dan "size"
Jika ditulis:
Baik pada browser operamini, kurang maksimal pada browser ponselku .
Tag <option>
Atribut yang di gunakan antara lain:
disabled
Untuk item daftar, dalam kondisi tertentu akan menjadi tidak aktif.
Selected
Untuk menentukan item yang akan muncul pada tampilan standar.
Value
Tidak mempengaruhi apapun dalam tampilan, atribut ini sangat penting terkait dengan pemrosesan daftar yang akan di kirim ke server. Dan tentunya adalah dengan menggunakan bahasa lain diluar HTML.
