HTML Control memungkinkan kita untuk memanage elemen baku HTML seperti text input boxes, drop-down list, buttons, dll. Dapat juga digunakan untuk mengatur interaksi dengan user, seperti saat login, kita bisa mengontrol agar password yang diinputkan tidak seperti ditelanjangi.
Mengenal Kontrol Elemen HTML
Anda tidak perlu cemas, istilah/komponen yang masih asing dan belum sempat diulas di sini, akan dijelaskan secara khusus di KAMUS HTML.
1. Kontrol Text
Digunakan untuk mengatur text box. Sintaksnya:
<input type="text" [atribut]>
| Atribut | Keterangan |
|-----------|-------------------------------------------------------------------------------------------------------------|
| Name | Nama dari control text |
| Size | Ukuran dari control text |
| Value | Text yang tertulis pada control text |
| Maxlength | Panjang Maksimal karakter yang diijinkan |
| Style | Pengaturan style/gaya/css secara inline di elemen html, propertinya bisa berupa font, border, positon, dll. |
| Dir | Pengaturan arah text dari control text, seperti rtl (right to left) atau sebaliknya ltr (left to right) |
Contoh:
<p dir="rtl">Write this text right-to-left!</p>
Run >>
2. Kontrol Password
Ini termasuk seni merahasiakan (enkripsi) dengan begitu, user tidak perlu khawatir passwordnya diintip temannya yang jail.
Contoh:
<input type="password" name="anonimous" maxlength="10">
3. Kontrol Area
Digunakan untuk menyediakan ruang tulis yang lebih besar daripada kontrol text. Sintaksnya:
<textarea [atribut]>
..text Anda..
</textarea>
| Atribut | Keterangan |
|-----------|---------------------------------------------------------------------------------------------------------|
| Name | Nama dari control text area |
| Value | Nilai dari control text area |
| Maxlength | Panjang Maksimal karakter yang diijinkan |
| Rows | Julmlah baris text area |
| Cols | Jumlah kolom text area |
| Dir | Pengaturan arah text dari control text, seperti rtl (right to left) atau sebaliknya ltr (left to right) |
Contoh:
<textarea rows="4" cols="50">
Kolaborasi gatewan.com dan w3schools.com memudahkan kami dalam belajar pemrograman berbasis web.. terimakasih.
</textarea>
4. Kontrol Image
Digunakan untuk mengatur detail gambar.
| Atribut | Keterangan |
|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Align | Meratakan teks di sekeliling gambar |
| Alt | Alternatif text untuk gambar. Seketika text ini tidak akan ditampilkan, kecuali saat kursor berada diatas gambar. |
| Border | Batas tepi untuk gambar |
| Height | Mengatur ketinggian gambar |
| Width | Mengatur lebar gambar |
| Hspace | Mengatur batas (margin) horizontal gambar |
| Vspace | Mengatur batas (margin) vertical gambar |
| Ismap | Adalah atribut boolean yang bersifat server-side, berguna untuk mengatur gambar sebagai image-map. Artinya ketika gambar diklik, maka koordinat klik akan dikirim ke server sebagai query string URL. Koordinat disitu bukanlah koordinat geographic ya, tapi koordinat berdasarkan bidang gambar. Note: Atribut ismap diperbolehkan hanya jika < img > adalah keturunan dari unsur < a > dengan atribut href valid. |
| Usemap | Adalah atribut boolean yang bersifat client-side, berguna menggatur gambar sebagai image-map. Atribut usemap dikaitkan dengan elemen < map > yang dilengkapi atribut name, sehingga membentuk relasi antara < img > dengan < map >. Note: Atribut usemap tidak dapat digunakan jika < img > adalah keturunan dari elemen < a > atau < button >. |
| Name | Nama control image |
| Src | Untuk menelusuri lokasi file gambar yang digunakan |
Contoh:
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
Run>>
