Mengenal Kontrol Elemen HTML

Mengenal Kontrol Elemen HTML

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.

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">

Hasil :

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>

Hasil:
Kolaborasi gatewan.com dan w3schools.com memudahkan kami dalam belajar pemrograman berbasis web.. terimakasih.

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