Selasa, 28 April 2015

Tag HTML dan atributnya

Pengertian istilah TAG, ATRIBUT dan VALUE dalam HTML

Mungkin istilah TAG, ATRIBUT dan VALUE dalam HTML agak terlupakan, karena kebanyakan teman-teman yang sedang belajar membuat web sekarang lebih dimanjakan oleh editor web visual yang sangat praktis dan instan. Berikut ini saya coba mengingatkan kembali tentang 3 istilah dasar tersebut agar pemahaman serta penggunaan HTML lebih mudah.
Sekarang mungkin sudah kurang trend lagi jika belajar membuat web harus menghafal perintah-perintah HTML yang lumayan banyak, lebih menyulitkan lagi perintah tersebut tidak dalam bahasa lokal sehingga sulit diingat secara detail ejaanya. Saya pribadi kadang juga kesulitan jika menuliskan kode html, apalagi dengan ejaan yang agak sulit di ucapkan seperti height yang kadang tertulis terbalik hurufnya menjadi heigth, atau width yang kadang tertulis widht dan perintah lainya.
Saya iseng melakukan searching di google dengan menggunakan 2 kunci berbeda, yaitu : daftar perintah HTML dan daftar TAG HTML, dan jumlah pencarianya lumayan signifikan yaitu :
daftar perintah HTML
About 4,470,000 results
daftar TAG HTML
About 1,080,000 results
Yang artinya, banyak informasi tentang HTML lebih dikaitkan dengan kata perintah ketimbang tag. Dari situ saya menyimpulkan bahwa orang yang belajar HTML lebih familiar dengan kata perintah ketimbang tag. Bener atau tidak buktikan sendiri dengan menanyai teman disamping anda.

TAG

Adalah penandaan yang dikenali oleh browser sebagai suatu instruksi untuk memformat tulisan, gambar, link, tabel, atau objek pada sebuah tampilan dokumen HTML.
TAG biasanya dituliskan berpasangan, yang maksudnya adalah memberitahukan kepada browser dimana posisi awal dan posisi akhir sebuah format dokumen.
Contoh penggunaan TAG yang sering digunakan :

Tag HTML	Fungsi
<font></font>	Mengubah jenis, warna, ukuran tulisan
<b></b> atau <strong></strong>	Teks tebal
<i> </i> atau <em></em>	Teks miring
<u> </u>	Teks garis bawah
<pre></pre>	Preformatted teks
<h1></h1>	Heading 1
<h2></h2>	Heading 2
<h3> </h3>	Heading 3
<sub></sub>	Subscript
<sup></sup>	Superscript
<ol><li></li></ol>	Penomoran
<ul><li></li></ul>	Bullet
<marquee></marquee>	Teks Berjalan

Banyak lagi TAG lainya.
Apakah ada TAG yang tidak berpasangan? Jawabanya ADA. Apa Saja?

Tag HTML	Fungsi
<br />	Berpindah baris
<hr />	Membuat garis horizontal
<img ... />	Memasukkan gambar
<meta .../>	Menyisipkan informasi halaman

Mungkin ada yang lainya..

ATRIBUT

Atribut dalam HTML adalah perintah yang disisipkan/ditempelkan pada TAG utama yang tujuanya adalah mengatur bentuk/gaya tampilan sebuah objek. Contoh penggunaan atribut yang ditempelkan pada H1 :

<h1 align="center">Saya Belajar Tag HTML</h1>

Anda lihat diatas, kita membuat tulisan dengan tampilan heading 1 (judul) dan kemudian ditempelkan atribut align yang fungsinya mengatur letak horizontal di layar.
Sebuah TAG boleh menggunakan lebih dari 1 atribut yang relevan. Contoh :

<font size="3" face="arial" color="red">Merdeka atau Mati</font>

Contoh TAG font diatas menggunakan atribut size (ukuran) dan face(jenis huruf) dan color(warna tulisan).
Yang saya maksud relevan adalah, sebuah TAG tidak bisa diberikan atribut diluar kemampuanya. Contoh : TAG font tidak bisa ditempelkan atribut align, karena : font adalah bentuk huruf bukan format tulisan, sebaliknya seperti itu, h1 tidak bisa diberi atribut face karena h1 adalah format tulisan bukan bentuk huruf. Trus bagaimana jika ingin menggabung keduanya?? Biasanya dituliskan dengan cara :

<h1><font face="arial">Saya belajar Tag</font></h1>

VALUE

Value adalah nilai yang diberikan pada sebuah atribut. Value ada beberapa jenis, bisa value text seperti left, right, center, red, blue, bisa juga angka 1, 2, 3, bisa juga bentuk pixel : 100, 200, atau bentuk persen 100%, 30%, ada juga yang bentuk hexa seperti warna yang ditulis color="#000" dll.
Untuk value juga harus relevan, tidak bisa sembarangan. Contoh : align (ini untuk mengatur posisi) tidak boleh ditulis align="1" atau sebaliknya size="center".
Catatan :
Jika kita mengikuti perkembangan TAG HTML memang kadang sedikit membingungkan apalagi sekarang perbendaharaan TAG sudah bertambah dengan hadirnya HTML5, ditambah lagi dengan dukungan CSS. Tapi TAG-TAG yang lama masih berlaku dengan baik, walaupun dari segi penulisan sudah tidak efisien lagi karena sekarang sudah digantikan dengan penggunaan CSS yang bisa lebih mudah dan sempurna.

- See more at: http://www.zainalhakim.web.id/posting/pengertian-istilah-tag-atribut-value-html.html#sthash.21pgyrqp.dpuf

TAG HTML	DESKRIPSI
<html></html>	Baris paling atas dari setiap file HTML
<head></head>	Informasi umum dari sebuah halaman web
<title></title>	Judul halaman. Terdapat pada head
<body></body>	Settingan atribut untuk seluruh dokumen
<b></b>	Teks tebal
<i> </i>	Teks miring
<u> </u>	Teks garis bawah
<pre></pre>	Preformatted teks / contoh teks
<h1></h1>	Header 1
<h2></h2>	Header 2
<h3> </h3>	Header 3
<sub></sub>	Subscript
<sup></sup>	Superscript
<font></font>	Mengubah gaya suatu huruf
<img>	Menampilkan sebuah gambar
<blockquote></blockquote>	Digunakan untuk mengatur text dan gambar dalam suatu tag
<ol></ol>	Ordered List (digunakan dengan <li>)
<ul></ul>	Unordered List (digunakan dengan <li>)
<li>	Elemen List
<dd></dd>	Daftar definisi
<dt>	Definisi term
<dd>	Definisi deskripsi
<br>	Ganti baris
<hr>	Garis horizontal
<center></center>	Menengahkan elemen
<table></table>	Membuat table
<form></form>	Mengatur elemen dari form
<textarea></textarea>	Membuat Text Area untuk input text dengan length yang lebih besar dari input text.
<tbody></tbody>	Format yang berlaku bagi cell yang diapit tag
<input type=>	Variasi dari tipe elemen input dalam form
<colgroup></colgroup>	Format yang berlaku bagi kolom
<th></th>	Header(kepala tabel). Otomatis ke tengah dan tebal
<td></td>	Membuat kolom
<marquee> </marquee>	tulisan berjalan atau bergerak pada halaman web anda
<big> </big>	Membuat tulisan menjadi besar
small></small>	Membuat tulisan menjadi kecil
<u> </u>	Membuat tulisan menjadi miring
<hn> </hn>	Untuk menuliskan judul suatu paragraf atau lebih dikenal sebagai heading
<address></address>	Mendefinisikan informasi kontak untuk penulis/pemilik dokumen
<blink></blink>	Membuat teks berkedip
<del></del>	Untuk memberi garis tengah pada teks/mencoret teks
<embed></embed>	Digunakan untuk memasukkan file video atau file musik
<acronym></acronym>	Mendefinisikan akronim
<abbr></abbr>	Digunakan untuk menguraikan satu ungkapan yang disingkat
<applet></applet>	Digunakan untuk memasukan file java kedalam dokumen HTML
<bdo></bdo>	Digunakan untuk menimpa arah teks
<caption></caption>	Membuat caption pada table
<kbd></kbd>	Mendefinisikan teks yang di input dari keyboard
<map></map>	Mendefinisikan client-side peta gambar
<samp></samp>	Mendefinisikan contoh keluaran dari program komputer
<xmp></xmp>	Mendefinisikan preformatted text, fungsi tag ini sama dengan tag <pre>
<tt></tt>	Mendefinisikan teletype text
<thead></thead>	Untuk mengelompokkan isi header di dalam sebuah tabel
<strong></strong>	Membuat teks tebal, fungsi tag ini sama dengan tag <b>

B. Atribut-atribut yang terdapat dalam Tag HTML

HTML Attributes atau atribut HTML adalah suatu informasi tambahan yang bisa disertakan pada suatu elemen HTML. Suatu elemen dapat memiliki atribut. Atribut ini memberikan informasi tambahan tentang elemen yang bersangkutan. Atribut selalu digunakan pada awal tag / start tag. Cara mendefinisikan atribut dengan memberikan informasi name dan valuedari suatu elemen, seperti name=”value”.

· Tag <body> digunakan menampilkan desain layout halaman web. Tab <BODY> sendiri memiliki kelengkapan atribut di antaranya:

ü BGCOLOR, berfungsi untuk menampilkan warna latar halaman

o Contoh pemakaian :

o <BODY BGCOLOR=RED> … </BODY>

ü BACKGROUND, berfungsi untuk menentukan file gambar/image dijadikan sebagai background halaman.

o Contoh :

o <BODY BACKGROUND=”C:\data\latar.jpg”> … </BODY>

ü TEXT, berfungsi untuk mengubah warna tulisan/teks dalam dokumen secara menyeluruh.

ü LINK, berfungsi untuk menentukan warna link dalam dokumen yang belum pernah dikunjungi (belum pernah diklik)

ü ALINK, berfungsi untuk menentukan warna link dalam dokumen yang aktif.

ü VLINK, berfungsi untuk menentukan warna link dalam dokumen yang telah terkunjungi.

· Tag <p>

Tag ini berfungsi untuk memformat paragraph/alinea. Adapun kelengkapan atribut-atribut dari tag ini adalah:

ü ALIGN, yang berfungsi untuk menentukan perataan teks paragraph secara rata kiri (LEFT), rata kanan (RIGHT) atau rata tengah (CENTER).

Contoh pemakaian:

<P ALIGN=RIGHT>Ini adalah teks yang ditulis dalam paragraph dengan perataan

teks rata kanan</P>

· Tag <hr>

Tag ini berfungsi untuk mendefinisikan garis horisontal dokumen.

Sedangkan atribut-atribut yang didukung meliputi:

ü SIZE, untuk menentukan ketebalan garis (dalam ukuran piksel)

Contoh pemakaian :

ü COLOR, digunakan untuk menentukan warna garis. Warna garis dapat diisi dengan RED, GREEN, BLUE, YELLOW dll, atau dengan memanfaatkan warna dalam bentuk Hexadesimal seperti : #00FF00 untuk wana hijau, #FF0000 untuk warna merah dsb.

ü WIDTH, digunakan untuk menentukan lebar garis (dalam satuan piksel atau persenatase). Contoh :

<HR WIDTH=450> atau

ü NOSHADE, untuk menghilangkan efek tiga dimensi garis.

Contoh pemakaian :

· Tag <hn>, dimana n=1,2,3,4,5,6

Berfungsi untuk mendefinisikan header (kepala/judul) dokumen.

Atribut-atribut yang dimiliki yaitu:

ü ALIGN, yang digunakan untuk menentukan perataan teks header terhadap dokumen. Nilainya yaitu: LEFT, CENTER dan RIGHT.

· Tag <font>, untuk memformat font digunakan tag <FONT>, adapun yang dipengaruhi oleh tag ini meliputi ukuran, jenis dan warna font. Atribut-atribut yang dapat dipakai untuk mengatur ketiga hal tersebut yaitu :

ü SIZE, digunakan untuk menentukan ukuran font.

ü COLOR, digunakan untuk menentukan warna font.

ü FACE, digunakan untuk menentukan jenis atau bentuk font. Misal jenis font

ü dapat dipakai yaitu : Arial, Verdana, Times New Romans, Courier dll.

· Tag <img> digunakan untuk menampilkan gambar, berikut merupakan atribut dari tag <img> :

ü SRC, yang berfungsi untuk menentukan lokasi direktori gambar. Contoh

ü pemakaiannya :

ü ALT, yang berfungsi untuk menentukan keterangan gambar jika gambar gagal

ü tampil.

ü WIDTH, yang berfungsi untuk menentukan lebar gambar (dalam satuan pixel)

ü HEIGHT, yang berfungsi untuk menentukan tinggi gambar (dalam satuan pixel).

ü BORDER, yang berfungsi untuk menentukan ketebalan bingkai gambar.

ü ALIGN, untuk menentukan perataan gambar terhadap dokumen. (Nilainya :

ü LEFT dan RIGHT).

· Tag <a> digunakan untuk mendefinisikan link, berikut merupakan atributnya :

ü HREF, digunakan untuk menentukan lokasi tujuan dari yang ditunjuk oleh link.

Alamat tujuannya dapat berupa path-direktori atau alamat URL.

Contoh penggunaan :

<A HREF=”http://www.yahoo.co.id”>Yahoo Indonesia</A>

ü NAME, digunakan untuk mendefinisikan anchor (Keterangan: Anchor adalah satu bagian dari dokumen yang ditandai untuk dijadikan sebagai tujuan dari link). Untuk mendefinisikan link yang menuju alamat anchor digunakan symbol

karakter ‘#’. Contoh : Seumpama didefinisikan sebuah anchor dengan nama

“pertama” pada halaman “dokumen.html”.

· Tag <table> digunakan untuk memmbuat table di dalam HTML, berikut merupakan atribunya :

ü BORDER, digunakan untuk menentukan ketebalan bingkai table.

ü BGCOLOR, digunakan untuk menentukan warna latar table/baris/sel.

ü BACKGROUND, digunakan untuk menentukan file gambar dijadikan sebagai latar table/baris/sel.

ü ALIGN, berfungsi untuk menentukan perataan table secara horisontal terhadap dokumen atau perataan teks pada baris atau sel secara horisontal.

ü VALIGN, berfungsi untuk menentukan perataan secara vertical terhadap teks pada baris dan sel.

ü WIDTH, digunakan untuk menentukan lebar table/sel (dalam satuan pixel atau persentase)

ü HEIGHT, digunakan untuk menentukan tinggi table atau baris (dalam satuan pixel atau persentase)

ü CELLPADDING, berfungsi untuk menentukan kerapatan teks dengan bingkai table.

ü CELLSPACING, berfungsi untuk menentukan kerapatan antar sel.

ü ROWSPAN, berfungsi untuk menggabungkan beberapa sel baris menjadi satu sel.

ü COLSPAN, berfungsi untuk menggabungkan beberapa sel kolom menjadi satu sel.

· Tag <form> berfungsi sebagai obyek penampung (container) bagi obyek-obyek lainnya. Atribut-atribut yang dimiliki FORM adalah sebagai berikut:

ü NAME, berfungsi untuk mendefinisikan nama obyek form.

ü METHOD, dipergunakan untuk menentukan cara pengolahan data yang

inputkan dalam form.

ü ACTION, digunakan untuk menentukan lokasi/alamat file (program server)

yang akan mengolah data isian form. Nilai yang dapat diisikan meliputi :

POST dan GET.

· Obyek <SELECT> merupakan komponen FORM yang berbentuk daftar pilihan menyerupai COMBOBOX dan LISTBOX. Atribut-atribut yang dimiliki di antaranya yaitu :

ü NAME, digunakan untuk memberi identitas pada obyek SELECT.

ü SIZE, digunakan untuk menentukan jumlah item pilihan yang ditampilkan pada obyek.

ü MULTIPLE, digunakan untuk menentukan item pilihan dapat dipilih lebih dari satu.

· Untuk mendefinisikan item-item pilihan pada komponen SELECT digunakan tag <OPTION>, dimana tag ini memiliki kelengkapan atribut seperti berikut ini :

ü VALUE, digunakan untuk menentukan identitas tiap item dalam komponen.

ü SELECTED, digunakan untuk menentukan item yang terpilih secara default.

· Tag <INPUT> memiliki berbagai macam atribut yang dapat digunakan menentukan bentuk-bentuk input:

ü NAME, berfungsi untuk menentukan nama obyek input

ü TYPE, berfungsi untuk menentukan jenis input, nilai yang dapat

dipasangkan yaitu:

· TEXT, digunakan untuk menentukan bentuk kotak teks satu baris.

o PASSWORD, digunakan untuk menentukan bentuk input kotak password.

· RADIO, digunakan untuk menentukan bentuk input daftar pilihan, dimana item yang dapat pilih hanya satu item saja.

· CHECKBOX, digunakan untuk menentukan bentuk input daftar pilihan, dimana item yang dapat dipilih bisa lebih dari satu item.

· SUBMIT, digunakan untuk menentukan bentuk input tombol yang memiliki fungsi untuk memicu data dalam form diproses.

· RESET, digunakan untuk menentukan bentuk input tombol yang memiliki fungsi data dalam form akan direset.

· BUTTON, digunakan untuk menampillkan bentuk input tombol yang mana fungsi tombol tersebut belum ditentukan.

· HIDDEN, untuk menentukan bentuk input tersembunyi (tidak ditampilkan secara eksplisit dalam dokumen)

ü VALUE,

· untuk jenis input TEXT dan PASSWORD

digunakan untuk menentukan nilai dalam kotak teks

· untuk jenis input RADIO dan CHECKBOX

berfungsi untuk memberi identitas tiap pilihan item

o untuk jenis item SUBMIT, RESET dan BUTTON

berfungsi untuk menentukan judul tombol.

ü SIZE (hanya untuk tipe input TEXT dan PASSWORD)

Berfungsi untuk menentukan ukuran lebar kotak teks.

ü MAXLENGTH (hanya untuk tipe input TEXT dan PASSWORD)

Berfungsi untuk menentukan kapasitas maksimal teks yang dapat

Diinputkan

ü CHECKED (hanya untuk tipe input RADIO dan CHECKBOX)

Berfungsi untuk memberi tanda terhadap item yang terpilih secara default.

Tag dan atribut pembuatan form html

Pada tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form) anda telah mempelajari cara membuat form sederhana di dalam HTML. Dalam penggunaannya, HTML masih memiliki banyak tag dan atribut yang dapat digunakan untuk membuat form yang lebih kompleks. Dalam 10 tutorial khusus tentang pembuatan form HTML ini, anda dapat mempelajari lebih dalam tentang tag dan atribut pembuatan form HTML, mulai dari tag input type text, checkbox, radio,sampai type file, image dan hidden. Diharapkan dengan 10 tutorial Pembuatan Form HTML ini, anda bisa menguasai penggunaan form di dalam HTML. Tag pertama yang akan kita pelajari dalam Tutorial Form HTML ini adalah tentang fungsi dan cara penggunaan tag label. ________________________________________ Fungsi tag label Dalam Pembuatan Form HTML Tag label dalam HTML berfungsi sebagai pelengkap keterangan untuk beberapa objek form seperti radio ataucheckbox. Selain memberikan keterangan, tag label juga memudahkan penggunan dalam memasukkkan data (membuat form menjadi user friendly). Secara tampilan, tag label tidak akan berpengaruh apa-apa di dalam form (kecuali anda mengubahnya menggunakanCSS). Sehingga tanpa atau dengan tag label, anda tidak akan melihat perbedaannya. Untuk memahami kegunaan tag label, silahkan jalankan contoh kode form HTML berikut ini: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 Belajar Tag Label HTML

Jadwal kegiatan saya sekarang:

Dari contoh kode form HTML diatas, saya membuat 3 isiancheckbox sederhana. Ketika kita “mencheklist” salah satu dari checkbox tersebut, cara yang paling banyak digunakan adalah dengan men-klik kotak putih pada checkboxtersebut. Namun kotak checkbox tersebut cukup kecil, dan akan sedikit menyulitkan untuk mengklik-nya. Salah satu cara agar lebih mudah bagi kita (dan juga bagi pengguna) untuk memilih checkbox tersebut adalah jika pengisian checkbox bisa dilakukan dengan men-klik tulisan keterangan dari checkbox tersebut. Untuk keperluan inilah tag label digunakan. ________________________________________ Cara Penggunaan tag label HTML Terdapat 3 cara penggunaan tag label. Cara pertama dan juga paling sederhana adalah dengan memasukkan atau “mengurung” seluruh tag input checkbox kedalam tag label seperti kode berikut ini: 1 2 3 4 Saya sedang belajar HTML Dengan memasukkan seluruh tag input checkbox dan keterangannya ke dalam tag label, maka kita bisa men-kliktulisan keterangan dari checkbox, dan secara otomatis checkbox tersebut akan terisi. Silahkan anda langsung mengubah kode kita sebelumnya, dan tambahkan tag label. Cara kedua untuk menggunakan tag label adalah menggunakan atribut “for”. Dengan menggunakan atribut for ini, maka kita tidak harus memasukkan seluruh tag input ke dalam tag label. Berikut contoh penggunaannya: 1 2 Saya sedang belajar CSS Perhatikan bahwa tag label diletakkan setelah tag input checkbox. Di dalam tag label ini terdapat sebuah atribut for, yang nilainya adalah id dari tag input. Didalam contoh ini saya membuat atribut id=”belajarcss” di dalam tag input checkbox. Sehingga dalam pembuatan labelnya, saya memberikan nilai atribut for=”belajarcss”. Cara ketiga untuk penggunaan tag label adalah dengan menggabungkan kedua cara diatas. Perhatikan contoh berikut: 1 2 3 4 Saya sedang belajar pemograman di Duniailkom Di dalam contoh tersebut saya menggabungkan penggunaan atribut for untuk tag label, namun juga “mengurung” tag input checkbox dengan tag label. Sebagai contoh utuh dari form kita, berikut adalah contoh form sebelumnya dengan tambahan tag label: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Belajar Tag Label HTML

Jadwal kegiatan saya sekarang:

Silahkan anda mencoba menjalankan kode tersebut, dan jika anda men-klik tulisan keterangan dari checkbox, maka secara langsung kotak checkbox akan berisi. Hal seperti ini akan lebih memudahkan user dalam mengisi form yang kita rancang. Di dalam beberapa referensi, anda disarankan menggunakan cara penulisan tag label yang kedua, yakni dimana kita memisahkan tag label dari tag input, dan menggunakan atribut for sebagai “pengikat” label. Dengan cara ini, form akan lebih fleksibel. ________________________________________ Demikian tutorial kita kali ini mengenai Fungsi dan Cara Penggunaan Tag Label dalam pembuatan form HTML. Menggunakan tag label untuk merancang form akan memudahkan user dalam mengisi form yang dibuat. Berikutnya dalam tutorial form HTML, saya akan membahas tentang fungsi dan cara penggunaan tag fieldset dan tag legend untuk mengelompokkan objek form. Setelah mempelajari tag Label pada tutorial pertama, dalam tutorial kedua ini kita akan mempelajari fungsi dan penggunaan tag fieldset dan tag legend dalam pembuatan form HTML. ________________________________________ Fungsi Tag Fieldset dan Tag Legend dalam pembuatan Form HTML Fungsi tag fieldset dan tag label lebih kepada tampilanform, karena akan memudahkan dan mempercantik form yang dibuat. Tag Fieldset berfungsi untuk mengelompokkan beberapa objek form menjadi sebuah kelompok, sedangkan Tag Legend berfungsi untuk menampilkan judul dari kelompok objek form tersebut. Berikut adalah tampilan form HTML yang dikelompokkan menggunakan tag Fieldset dan tag Legend: Dari gambar diatas dapat dilihat bahwa pilihan daricheckbox yang ada dikelompokkan kedalam kelompok “Agenda hari ini”, dan browser akan menampilkannya dalam sebuah kotak. ________________________________________ Cara Penggunaan Tag Fieldset dan Tag Legend Untuk dapat membuat tampilan seperti gambar diatas, kita tinggal menambahkan tag fieldset dan tag legend di awalform. Format dasar penulisannya adalah sebagai berikut: 1 2 3 4 5 6 tag fieldset dan tag legend harus digunakan berpasangan, karena keduanya saling berkaitan. Tag fieldset berfungsi untuk menandai sampai dimana kotak fieldset akan dibuat, sedangkan tag legend berfungsi untuk memberikan judul dari fieldset tersebut. Berikut adalah contoh kode HTML untuk penggunaan tag fieldset dan tag legend: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Belajar Tag Fieldset dan Tag Legend HTML Hasil tampilan kode diatas akan sama dengan tampilan di awal tutorial ini. ________________________________________ Cara merubah rata text tag legend: atribut align Jika anda perhatikan, tag legend secara default berada di sisi kiri form, namun anda bisa merubah settingan ini dengan menambahkan atribut align pada tag legend. Agenda Hari ini Nilai dari atribut align ini bisa salah satu dari: left, center,right, top dan bottom. Anda bisa mencoba kelima nilai ini, namun nilai top dan bottom umumnya tidak di support oleh web browser. Karena atribut align ini sangat berkaitan dengan CSS, sebaiknya anda menggunakan CSS untuk mengatur aligndari tag legend. ________________________________________ Tag fieldset dan tag legend yang kita pelajari disini lebih berfungsi untuk tampilan dari form, namun form yang tertata dan terkelompok dengan baik akan memudahkan user dalam menggunakannya. Pada tutorial berikutnya kita akan membahas tentangfungsi dan cara penggunaan tag button di dalam form HTML. Jika dalam tutorial sebelumnya kita mempelajari tentangtag fieldset dan tag legend, dalam tutorial kali ini kita akanmempelajari tag button yang digunakan untuk membuat tombol di dalam HTML. Tag button ini bisa digunakan di dalam form, maupun di luar form. ________________________________________ Fungsi Tag Button dalam pembuatan Form HTML Di dalam tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form), kita telah menggunakan tag inputdengan type=”submit” untuk membuat tombol di dalam form HTML, namun HTML menyediakan tag khusus yang memiliki fungsi sama, yakni tag button. Tag button berfungsi untuk membuat tombol baik itu di dalam form, maupun diluar form. Dibandingkan dengan tombol yang dibuat dengan tag input type=”submit”, tag button menawarkan fleksibilitas yang lebih. ________________________________________ Cara Penggunaan Tag Button HTML Untuk menggunakan tag button, kita cukup menuliskannya dengan struktur dasar sebagai berikut: Tag button juga tidak harus berada di dalam form, dan ini memberikan fleksibilitas yang tinggi. Anda bisa memprogramnya menggunakan javascript untuk membuat fungsi lain yang akan dijalankan ketika tombol tersebut di klik. ________________________________________ Atribut type: Merubah Fungsi Tombol tag button Jika digunakan di dalam form, kita dapat menambahkan sebuah atribut type untuk merubah fungsi tombol tersebut. Nilai yang bisa digunakan untuk atribut ini adalahreset, submit, dan button. Contoh penulisannya adalah: Jika menuliskan type=”submit”, maka ketika tombol di klik, HTML akan mengirimkan nilainya untuk diproses (misalkan dengan PHP), namun jika type=”reset”, maka jika tombol tersebut di klik, efeknya akan mengosongkan isian form.Type=”button” tidak akan berefek apa-apa kedalam fungsi tombol, bahkan mungkin akan sedikit membingungkan menulis : Jika anda menjalankan contoh tersebut di dalam HTML, tombol akan berwarna abu-abu dan tidak bisa di klik oleh user. Atribut disabled ini bisa diterapkan kepada hampir seluruh objek form, dan biasanya akan diprogram menggunakanjavascript untuk mengaktifkan tombol tersebut. Misalkan kita memprogram sebuah tombol yang hanya bisa aktif ketika user telah mengisi seluruh formulir. ________________________________________ Atribut id dan class: CSS dan Javascript Selain atribut type dan disabled, kita bisa menggunakan atribut seperti id dan class dalam tag button. Atribut iddan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS. ________________________________________ Contoh penggunaan tag button dalam HTML Sebagai penutup, berikut adalah contoh kode HTML dalam penulisan dan penggunaan tag button: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Belajar Tag Button HTML

Formulir isian duniailkom:

Anda akan menjumpai bahwa penggunaan tag button di dalam HTML tidak hanya terbatas di dalam form. Dalam proses desain website, tag button juga sering diprogram dengan menggunakan javascript. ________________________________________ Dalam tutorial form HTML selanjutnya, kita akan membahas tentang cara dan fungsi tag input type text dalam HTML. Objek form ini banyak digunakan dalam form html. Di dalam tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form), kita telah menggunakan tag input dengan type=text dan type=password, namun kali ini kita akan mempelajari beberapa atribut penting yang sering digunakan untuk tipe ini. Beberapa atribut lebih berfungsi sebagai persentasi atau mempercantik tampilan dari form, sehingga jika anda telah menguasai CSS, sebaiknya menggunakan CSS untuk keperluan tersebut. ________________________________________ Fungsi Tag Input Type Text dan Type Password dalam pembuatan Form HTML Secara umum, kedua type tag input ini berfungsi sebagai kolom isian dari user. Dengan perbedaan untuktype=password, text isian tidak akan ditampilkan, namun diganti dengan karakter khusus. Kedua tag ini biasanya digunakan di dalam form HTML, namun anda juga bisa menggunakannya di luar tag form, terutama jika anda akan memprosesnya menggunakanjavascript. Format penulisan paling dasar dari tag inputtype=”text” dan type=”password” ini adalah: Jika anda menjalankan kedua baris tersebut di dalam web browser, akan tampil 2 buat kotak isian yang bisa diisi dengan text. Perbedaan keduanya hanya pada tempilan karakter dari kotak isian tersebut. untuk type=password, text pada kotak isian akan ditampilkan dengan karakterpassword. Di dalam contoh dan penjelasan dalam artikel ini, saya hanya menggunakan contoh dan penjelasan untuk tag input type=”text”. Untuk tag input type=”password” caranya persis sama, dan anda bisa merubah semua kode yang ada dari type=”text” menjaditype=”password” sebagai sarana latihan. ________________________________________ Atribut name: Untuk Pemrosesan tag input type text Selain atribut type yang digunakan sebagai pembeda kedua input, atribut name merupakan atribut paling penting jika anda bermaksud memprosesnya menggunakan form, karena nilai dari atribut inilah yang akan digunakan sebagai nama variabel yang akan diproses oleh web server (biasanya menggunakan PHP). Berikut adalah contoh penulisan atribut name untuk tag input type=”text”: 1 2 3 4 Anda boleh bebas memberikan nilai untuk atribut name ini, namun disarankan menggunakan nama yang singkat dan sesuai dengan peruntukannya agar tidak bingung ketika membuat program PHPnya. ________________________________________ Atribut value: Nilai Awal tag input type text Atribut value digunakan sebagai nilai isian awal untuk input type=”text”. Namun atribut ini bersifat opsional dan anda tidak harus menambahkannya untuk setiap text inputan. Berikut adalah cara penulisannya: 1 2 Menggunakan atribut value untuk tampilan awal form akan membantu user memahami penjelasan untuk apa isian text tersebut, namun biasanya hal ini harus dikombinasikan dengan javascript agar ketika user mulai mengisi text, kotak text akan langsung kosong. Jika tidak, maka terpaksa user harus mengapus nilai awal ini secara manual. Dalam pemprosesan form oleh web server nantinya, nilai dari atribut value inilah yang akan diproses. Sehingga jika user langsung men-klik tombol submit form tanpa mengisi apa-apa, maka nilai nama yang dikirim adalah =”masukkan nama anda”. Untuk menghindari hal ini anda bisa membuat program javascript untuk menvalidasi isian form sebelum dikirim ke web server. Berikut adalah contoh penggunaan atribut value dalam tag input type=”text” HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Belajar Tag Input Type=text HTML

Belajar tag Input type="text" duniailkom:

________________________________________ Atribut size: Mengatur Panjang Tampilan Atribut size untuk tag input type=”text” digunakan untuk membatasi panjang dari kotak isian. Nilai dari atribut ini adalah berapa pixel panjang kotak isian tersebut. Berikut cara penulisan atribut size: Berikut adalah contoh kode HTML penggunaan atribut size: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Belajar Tag Input Type=text HTML

Belajar tag Input type="text" duniailkom:

________________________________________ Atribut maxlength: Membatasi Panjang Karakter Maksimum Atribut maxlegth digunakan untuk membatasi seberapa banyak karakter yang dapat diinput kedalam kotak isian. Nilai dari atribut ini adalah banyak maksimum karakter yang bisa diketik. Berikut adalah cara penulisan atribut ini: Dengan memberikan atribut maxlength=”4″, maka ketika user mengetikkan karakter ke 5, karakter tersebut tidak akan bisa diinput. Hal ini cukup penting jika kita membutuhkan panjang karakter yang telah dibatasi untuk inputan form, misalkan untuk password yang dibatasi sebanyak 6 karakter. Namun anda tidak bisa mengandalkan pembatasan atributmaxlength ini, karena user bisa saja membuat script untuk mengubah nilainya. Atribut maxlength ini sebaiknya digunakan sebagai pelengkap. Proses pengecekan pembatasan karakter sebaiknya dilakukan juga pada saatform akan diproses di sisi web server (menggunakan PHP). Berikut adalah contoh kode HTML penggunaan atribut maxsize: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Belajar Tag Input Type=text HTML

Belajar tag Input type="text" duniailkom:

________________________________________ Atribut disabled dan readonly: Menonaktifkan tag input Atribut disabled dan readonly digunakan untuk membuat kotak isian text tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah kotak isian hanya dapat diisi ketika user telah mengisi kotak isian lainnya. Kedua atribut ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” danreadonly =“readonly”. Berikut contoh penulisannya: Walaupun kedua text yang memiliki atribut ini tidak bisa digunakan, namun keduanya akan memiliki tampilan yang berbeda. Atribut disabled akan membuat kotak text berwarna abu-abu, sedangkan atribut readonly tampak seperti kotak text biasa. Sehingga biasanya atribut disabledlah yang sering digunakan, karena akan memberikan tampilan kepada user bahwa kotak text tersebut tidak bisa digunakan. Perbedaan lain adalah user masih dapat men-copy isian text isian ketika atributnya diset menjadi readonly. Namun tidak untuk atribut disabled. Berikut adalah contoh penggunaan atribut disabled danreadonly dalam HTML: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Belajar Tag Input Type=text HTML

Belajar tag Input type="text" duniailkom:

________________________________________ Atribut id dan class: CSS dan Javascript Selain atribut type, value, size, maxlength, readonly dandisabled, kita juga bisa menggunakan atribut seperti id danclass dalam tag input type=”text”. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS. ________________________________________ Cara Penggunaan Tag Input type text dan type password Sebagai penutup, saya akan membuat beberapa tag input untuk merangkum apa yang telah kita pelajari dalan tutorial kali ini, berikut cara penggunaan tag input type text dan type password dalam HTML: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 Belajar Tag Input Type=text HTML

Belajar tag Input type="text" di duniailkom.com:

________________________________________ Objek form berupa text inputan yang dibuat dengan tag input type text ini mungkin merupakan inputan form yang akan paling sering anda gunakan. Selain memahami atribut-atribut HTML yang digunakan untuk merancang form, di dalam tutorial cara pembuatan form HTML dengan tag input type text ini anda juga telah mempelajari contoh penggunaannya. Selanjutnya, kita akan mempelajari tentang cara pembuatan dan penggunaan checkbox dalam form HTML Cara penggunaan dan penulisan tag input type=”checkbox” telah kita bahas pada tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form), namun kali ini kita akan mempelajari beberapa atribut penting yang sering digunakan untuk tipe input ini. Beberapa atribut lebih berfungsi sebagai persentasi atau mempercantik tampilan dari form, sehingga jika anda telah menguasai CSS, sebaiknya menggunakan CSS untuk keperluan tersebut. ________________________________________ Fungsi tag input type checkbox dalam Pembuatan Form HTML Tag Input type checkbox berfungsi untuk membuatcheckbox atau kotak isian yang diisi dengan cara menceklistkotak tersebut. checkbox biasa digunakan untuk pilihan yang dapat dipilih dengan lebih dari 1 pilihan. Dalam penggunaan checkbox HTML, kita hanya memerlukan tag input dengan sebuah atributtype=”checkbox”. Berikut format sederhana checkbox dalam HTML: Penjelasan checkbox Checkbox tersebut tidak harus selalu berada di dalam tag form HTML, namun jika menggunakan checkbox diluar tagform, biasanya dikombinasikan dengan javascript untuk pemrosesannya. ________________________________________ Atribut name: Untuk pemrosesan tag input type checkbox Atribut penting jika checkbox digunakan di dalam tag formadalah atribut name. Atribut name ini berfungsi sebagai penanda nama untuk memproses hasil pilihan form ke dalam web server nantinya (misalnya dengan PHP). Berikut adalah cara penulisan Tag Input type checkbox dengan atribut name: Atribut name untuk checkbox tidak harus unik, dan anda bisa menggunakan nama yang sama untuk beberapa checkbox. Hasil akhirnya akan menjadi variabel array di dalam PHP. ________________________________________ Atribut Value: Sebagai Nilai Pemrosesan checkbox Atribut value untuk checkbox berguna pada saat pemrosesan form oleh web server. Misalnya dalam bahasa PHP, nilai dari value inilah yang akan diproses. Anda bebas mengisinya dengan nilai apapun, namun akan lebih memudahkan jika diisi dengan nilai yang singkat dan berhubungan dengan isi dari checkbox itu sendiri. Berikut contoh penggunaan atribut value: ________________________________________ Atribut Checked: Cara menandai checkbox Atribut checked digunakan untuk menandai dipilih atau tidaknya checkbox tersebut. Satu-satunya nilai dari atributchecked ini adalah checked, sehingga penulisannya menjadi: checked = “checked”. Berikut contoh penulisan atribut checked: Jika anda menjalankan kode diatas, maka pada saat halaman tampil pertama kali, kotak isian checkbox akan terisi langsung. Hal ini bisa digunakan sebagai isian defaut untuk form anda. ________________________________________ Atribut disabled: Menonaktifkan tag input Atribut disabled digunakan untuk membuat checkboxtidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah checkbox hanya dapat diisi ketika user telah mengisi objek form lainnya. Atribut disabled ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya: Atribut disabled akan membuat checkbox berwarna abu-abu dan memberikan tampilan kepada user bahwacheckbox tersebut tidak bisa digunakan. ________________________________________ Atribut id dan class: CSS dan Javascript Selain atribut type, value, checked dan disabled, kita juga bisa menggunakan atribut umum seperti id dan classdalam tag input type checkbox. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakanJavascript dan CSS. ________________________________________ Cara Penggunaan tag input type checkbox dalam form HTML Untuk merangkum penggunaan tag input type checkboxbeserta atribut-atributnya, saya akan membuat contoh kode HTML untuk semua atribut yang telah kita pelajari dalam tutorial ini: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 Belajar Tag Input Type=checkbox HTML

Belajar tag Input type="checkbox" di duniailkom.com:

Pada contoh terakhir saya menggunakan tag label, tag fieldset dan tag legend yang telah kita pelajari padatutorial form HTML: Fungsi dan Cara Penggunaan Tag Fieldset dan Tag Legend untuk menambah struktur dan mempercantik tampilan form. ________________________________________ Tag input type checkbox yang kita pelajari disini merupakan salah satu objek form yang penting. Checkbox sesuai untuk data form yang membolehkan user memilih lebih dari 1 inputan, namun jika anda membutuhkan objek form yang memaksa user memilih hanya satu dari beberapa pilihan, HTML menyediakan tag input type radio, yang akan kita bahas pada tutorial selanjutnya. Cara penggunaan tag input type radio telah kita bahas pada tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form), namun kali ini kita akan mempelajari beberapa atribut penting yang sering digunakan untuk tipe radio ini. Beberapa atribut lebih berfungsi sebagai persentasi atau mempercantik tampilan dari form, sehingga jika anda telah menguasai CSS, sebaiknya menggunakan CSS untuk keperluan tersebut. ________________________________________ Fungsi tag input type radio dalam Pembuatan Form HTML Tag input type radio berfungsi untuk membuat tombolradio atau tombol pilihan yang diisi dengan cara memilih dari salah satu tombol radio yang ada. Radio biasa digunakan untuk pilihan yang membatasi user untuk memilih satu dari pilihan yang ada. Dalam penggunaan radio HTML, kita hanya memerlukantag input dengan sebuah atribut type radio. Berikut format dasar radio dalam HTML: Penjelasan radio Radio tersebut tidak harus selalu berada di dalam tag form HTML, namun jika menggunakan radio diluar tag form,javascript biasanya digunakan untuk memprosesnya. ________________________________________ Atribut name: Untuk Pemrosesan dan Pembuatan Group radio Walaupun anda bisa menggunakan radio tanpa atributname, namun dengan atribut name inilah radio dapat berfungsi dengan semestinya. HTML menggunakan atribut name sebagai penanda bahwa radio tersebut berada di dalam satu group dan hanya dapat dipilih salah satu saja. Berikut adalah cara penulisan tag input type radio denganatribut name: Perhatikan bahwa untuk membuat beberapa objek radio menjadi sebuah group, nilai dari atribut name yang digunakan harus sama. Selain itu, persis seperti objek form lainnya, atribut name juga berfungsi sebagai penanda nama untuk memproses hasil pilihan form ke dalam web server (misalnya dengan PHP). ________________________________________ Atribut value: Sebagai Nilai Untuk Pemrosesan radio Atribut value untuk radio berguna pada saat pemrosesan form oleh web server. Misalnya dalam bahasa pemograman PHP, nilai dari value inilah yang akan diproses. Anda bebas mengisinya dengan nilai apapun, namun akan lebih memudahkan jika diisi dengan fungsi dari radio itu sendiri. Berikut contoh penggunaan atribut value: ________________________________________ Atribut Checked: Cara Menandai Pilihan radio Atribut checked digunakan untuk menandai dipilih atau tidaknya radio tersebut. Satu-satunya nilai dari atributchecked ini adalah checked, sehingga penulisannya menjadi: checked = “checked”. Berikut contoh penulisan dasar atribut checked radio: Jika anda menjalankan kode diatas, maka pada saat halaman tampil pertama kali, kotak isian radio yang kedua akan langsung terpilih. Hal ini bisa digunakan sebagai isiandefaut untuk form anda. ________________________________________ Atribut disabled: Menonaktifkan tag input type radio Atribut disabled digunakan untuk membuat radio tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah radio hanya dapat diisi ketika user telah mengisi form diatasnya. Atribut disabled ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya: Atribut disabled akan membuat radio berwarna abu-abu dan memberikan tampilan kepada user bahwa radiotersebut tidak bisa digunakan. ________________________________________ Atribut id dan class: CSS dan Javascript Selain atribut type, value, checked dan disabled, kita juga bisa menggunakan atribut umum seperti id dan classdalam tag input type radio. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakanJavascript dan CSS. ________________________________________ Cara Penggunaan tag input type radio dalam form HTML Untuk merangkum penggunaan Tag Input type=”radio” beserta atribut-atributnya, saya akan membuat contoh kode HTML untuk semua atribut yang telah kita pelajari: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 Belajar Tag Input Type=radio HTML

Belajar tag Input type="radio" di duniailkom.com:

Jika anda perhatikan, pada setiap contoh saya memberikan atribut name yang berubah-ubah dari jenis_kelamin1sampai dengan jenis_kelamin5, hal ini agar masing-masing radio dianggap sebagai contoh yang terpisah. Pada contoh terakhir saya menggunakan tag label, tagfieldset dan tag legend yang telah kita pelajari padatutorial form HTML: Fungsi dan Cara Penggunaan Tag Fieldset dan Tag Legend untuk menambah struktur dan mempercantik tampilan form. ________________________________________ Tag input type radio yang telah kita pelajari dalam Tutorial Form HTML: Fungsi dan Cara Penggunaan Tag Input Type Radio ini cocok digunakan untuk objek form yang membutuhkan user untuk memilih hanya satu diantara pilihan yang ada. Selanjutnya kita akan membahas tag input tipe file yang digunakan untuk upload data. Form tidak hanya digunakan untuk menerima inputan berupa text saja, namun juga digunakan untuk menerima inputan berupa upload data dari user. Untuk keperluan ini, HTML menyediakan tag input type file. ________________________________________ Fungsi tag input type file dalam pembuatan Form HTML Tag input dengan atribut type=”file” adalah objek formyang digunakan untuk upload file. Pemrosesan uploadsendiri akan banyak melibatkan web server (menggunakan PHP). Saya tidak akan membahasnya pemograman PHPnya, namun akan fokus pada kode HTML yang diperlukan. Dalam menggunakan tag input dengan atribut type=”file”ini, kita hanya menambahkan kode berikut kedalam form HTML: Jika anda menjalankan kode tersebut, maka di dalam web browser akan tampil sebuah tombol dengan text keterangan disampingnya. Nama tombol dan text keterangan tersebut akan berbeda-beda tergantung web browser. Ketika anda men-klik tombol upload (“Browse” padafirefox, dan “Choose File” pada chrome) maka akan keluar jendela untuk memilih file yang akan diupload. Setelah memilih salah satu file yang akan diupload, text keterangan akan berubah menjadi nama file tersebut. ________________________________________ Atribut name: Untuk Pemrosesan Upload Data Atribut name merupakan atribut paling penting untuktype=”file”, karena atribut name inilah yang akan menjadi varibel penampung file upload di sisi server nantinya. Berikut cara penulisan atribut name: ________________________________________ Atribut Accept: Membatasi Tipe Upload Data Atribut accept digunakan untuk membasi jenis file yang akan diupload, apakah file gambar, file musik, atau file jenis lainnya. Nilai untuk atribut accept ini adalah MIME_typeseperti audio/*, video/*, dan image/*. MIME_type adalah sebuah pengelompokkan khusus untuk file-file di dalam internet . List lengkap dari MIME ini dapat dilihat darihttp://en.wikipedia.org/wiki/Internet_media_type. Contoh berikut akan membatasi file upload untuk file gambar: Namun pembatasan file ini tidak dapat diandalkan, karena user bisa dengan mudah mengganti jenis file yang diupload. Validasi untuk membatasi jenis file sebaiknya dilakukan juga di sisi web server (menggunakan PHP). ________________________________________ Atribut disabled: Menonaktifkan Upload File Atribut disabled digunakan untuk membuat file uploadtidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah file upload hanya dapat diisi ketika user telah mengisi form diatasnya. Atribut disabled hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya: ________________________________________ Atribut id dan class: CSS dan Javascript Selain atribut type, name, accept dan disabled, kita juga bisa menggunakan atribut umum seperti id dan classdalam tag input type file. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakanJavascript dan CSS. ________________________________________ Cara Penggunaan tag input type file Dalam Form HTML Untuk merangkum penggunaan tag input type file beserta atribut-atributnya, saya akan membuat contoh kode HTML untuk semua atribut yang telah kita pelajari: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Belajar Tag Input Type=file HTML

Belajar tag Input type="file" di duniailkom.com:

Jika anda ingin menjalankan form diatas untuk diproses oleh PHP, kita perlu menambahkan beberapa atribut dan aturan untuk tag form. Selain menggunakan tag input, untuk mengirimkan data ke web server (proses upload), pada tag form dari HTML perlu ditambahkan sebuah atribut enctype dengan nilaimultipart/form-data. Atribut ini menginstruksikan kepada web server bahwa data yang dikirim berisi file yangdiupload. Selain itu proses pengiriman harus menggunakan method=”POST”. Lebih jauh tentang penggunaan ini akan kita bahas dalam tutorial PHP, karena akan banyak menggunakan PHP. Dalam tahap ini kita cukup mengetahui bahwa agar form dapat mengirimkan file, format awal form harus berbentuk: ________________________________________ Di dalam tutorial form html kali ini kita telah mempelajaricara membuat form untuk keperluan upload file dengan tag input type file, walaupun pemrosesan file yang diupload tidak bisa ditangani dengan HTML saja, namun harus melibatkan bahasa pemograman web seperti PHP. Selanjutnya kita akan mempelajari tentang tag input type image. Salah satu objek form yang sedikit jarang digunakan adalah tag input type image. Dalam Tutorial Form HTML: Fungsi dan Cara Penggunaan Tag Input type image ini kita akan mempelajari cara penggunaan type image ini secara lebih dalam. ________________________________________ Fungsi tag input type image dalam pembuatan Form HTML Fungsi utama dari tag input dengan type image adalah memasukkan gambar ke dalam form. Gambar tersebut akan berfungsi sebagai objek form yang bisa di-klik oleh user. Ketika user men-klik gambar tersebut, web browser akan mengirimkan koordinat titik dimana gambar di-klik. Kita akan jarang menggunakan tag input dengan type image ini, namun anda bisa memanfaatkannya untuk membuat gambar yang akan merespon dengan koordinat klik yang berbeda. Contoh nya seperti aplikasi peta sederhana, dimana ketika user men-klik koordinat tertentu, kita bisa menampilkan gambar lainnya. ________________________________________ Atribut name: Untuk Pemrosesan tag input type image Atribut name merupakan atribut paling penting untuktype image, karena atribut name inilah yang akan menjadi varibel penampung di sisi server nantinya. Berikut cara penulisan atribut name: ________________________________________ Atribut src: Menentukan Lokasi Gambar Sama seperti tag yang membutuhkan alamat dari gambar, atribut scr digunakan untuk memberi tahu web browser alamat dari gambar yang ditampilkan. Atribut ini adalah atribut inti dari tag input dengan type image, karena tentu saja tanpa gambar objek form ini tidak akan berfungsi. Berikut adalah contoh penggunaan src untuk tag input type image: Dari contoh tersebut saya memiliki gambar dengan namakoala.jpg di dalam folder yang sama dengan halaman HTML berada. ________________________________________ Atribut width dan height: Menentukan Ukuran Gambar Atribut width dan height digunakan untuk mengatur lebar dan tinggi dari gambar. Ukuran yang digunakan bisa dalam satuan pixel ataupun persen. Berikut contoh penggunaan atribut width dan height: ________________________________________ Atribut Align: Untuk Mengatur Rata Penempatan Gambar Atribut align digunakan untuk mengatur penempatan gambar, nilai dari atribut ini bisa salah satu dari: “bottom“, “left“, “middle“, “right“, dan “top“. Settingan default web browser jika atribut ini tidak ditulis adalah left. Berikut contoh penggunaan atribut align: ________________________________________ Atribut alt: Alternatif Tulisan Jika Gambar Gagal Tampil Atribut alt berfungsi untuk memberikan alternatif tulisan jika gambar gagal di tampilkan. Nilai dari atribut ini adalah tulisan yang dapat menggantikan atau menjelaskan gambar. Berikut contoh penggunaan atribut alt: ________________________________________ Atribut disabled: Untuk Menonaktifkan Gambar Atribut disabled digunakan untuk membuat file gambar tidak bisa digunakan. Namun berbeda dengan objek form lainnya, ketiga tag input dengan tipe=”image” ini disabled, gambar seolah-olah tidak berpengaruh apa-apa, namun anda tidak bisa men-klik gambar tersebut. Penggunaan atribut ini biasanya di kombinasikan denganjavascript agar berfungsi maksimal. Misalkan gambar hanya dapat diproses ketika user telah mengisi form diatasnya. Atribut disabled hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya: ________________________________________ Atribut id dan class: CSS dan Javascript Selain atribut type, name, src, align, alt dan disabled, kita juga bisa menggunakan atribut umum seperti id dan classdalam tag input type image. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakanJavascript dan CSS. ________________________________________ Cara Penggunaan tag input type image dalam Form HTML Biasanya, tag input type image ini digunakan tanpa objek form lainnya, karena jika tag input ini berada di dalam tag form, maka ketika user men-klik gambar tersebut, secara otomatis form akan di-submit dan mengirimkan koordinat dimana gambar tersebut di klik (tanpa menggunakan tombol submit). Berikut adalah contoh kode HTML penggunaan atributtype=”image”: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Belajar Tag Input Type=image HTML

Belajar tag Input type="image" di duniailkom.com:

Silahkan jalankan kode tersebut, dan ketika anda men-klik gambar, halaman web akan berpindah dan perhatikan di bagian alamat web, akan terlihat koordinat gambar seperti berikut: file:///D:/BelajarHTML/proses.php?gambar_koala.x=136&gambar_koala.y=94 Gambar_koala.x=136 dan gambar_koala.y=94 adalah koordinat dimana saya men-klik gambar tersebut. Informasi ini bisa digunakan di sisi web server untuk diproses. Contohnya, anda bisa membuat aplikasi peta sederhana dengan efek zoom. Namun untuk keperluan ini harus menggunakan PHP atau javascript untuk memproses hasil form. Tag input dengan type hidden merupakan salah satu “senjata rahasia” dalam merancang form HTML. Di dalamTutorial Form HTML: Fungsi dan Cara Penggunaan Tag Input Type Hidden ini kita akan mempelajari cara memanfaatkan fitur objek ini. ________________________________________ Fungsi tag input type hidden dalam pembuatan Form HTML Tag input dengan type hidden adalah sebuah objek form khusus yang sesuai dengan nama tipenya, memang tersembunyi dan tidak dapat dilihat oleh user. Namun objek form ini menawarkan fleksibilitas yang dapat dimanfaatkan oleh programmer untuk menyisipkan suatu data untuk diproses. Type hidden ini bisa digunakan untuk mengirim suatu data dari sebuah halaman ke halaman lain tanpa mengganggu bentuk form yang telah ada, dan biasanya digabungkan dengan pemrosesan javascript atau PHP. Cara penulisan dasar type hidden ini adalah sebagai berikut: ________________________________________ Atribut name: Untuk Pemrosesan tag input type hidden Atribut name berfungsi sebagai penanda nama untuk memproses hasil pilihan form ke dalam web server (misalnya dengan bahasa PHP). Berikut adalah cara penulisan tag input type hidden dengan atribut name: ________________________________________ Atribut value: Sebagai Nilai tag input type hidden Atribut value untuk type hidden berguna pada saat pemrosesan form oleh web server. Misalnya dalam bahasa PHP, nilai dari value inilah yang akan diproses. Dalam type hidden ini, nilai dari atribut value inilah yang merupakan nilai terpenting, karena disinilah programmer dapat menyisipkan data yang diinginkan. Berikut adalah contoh penggunaan atribut value: ________________________________________ Atribut id dan class: CSS dan Javascript Selain atribut yang dijelaskan diatas, kita juga bisa menggunakan atribut umum seperti id dan class dalam tag input type hidden. Namun karena sifatnya yang tersembunyi, atribut class tidak akan diperlukan. Tag iddibutuhkan untuk pemograman HTML menggunakanJavascript. ________________________________________ Cara Penggunaan tag input type hidden dalam Form HTML Untuk merangkum penggunaan Tag Input type hidden beserta atributnya, saya akan membuat contoh kode HTML cara penggunaan tag input type hidden: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Belajar Tag Input Type=hidden HTML

Belajar tag Input type="hidden" di duniailkom.com:

Jika anda menjalankan kode HTML tersebut, yang terlihat hanya sebuah tombol, namun ketika tombol tersebut diklik, objek form hidden akan terlihat nilainya di alamat web browser sebagai berikut: file:///D:/BelajarHTML/proses.php?asal_halaman=halaman_register Pesan ini menandakan bahwa sebenarnya di dalam form terdapat tag input dengan type hidden. Asal_alamanberasal dari atribut name, dan halaman_register adalah nilai dari atribut value. Penggunaan tag input type hiddenini akan berguna saat dikombinasikan dengan bahasa pemograman web seperti Javascript. ________________________________________ Dalam tutorial tag input type hidden ini kita telah mempelajari cara penulisan dan penggunaan objek form hidden. Berikutnya kita akan membahas tentang tag select. Pada tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form) kita telah belajar menggunakan tag select, namun dalam tutorial kali ini saya akan membahasnya dengan lebih dalam beserta atribut-atribut tambahan yang bisa gunakan untuk tag select. ________________________________________ Fungsi Tag Select dalam pembuatan Form HTML Tag select di dalam HTML digunakan untuk membuatobjek form yang berupa list pilihan yang dapat dipilih oleh user. Biasanya tag select digunakan untuk “memaksa” user memilih salah satu dari pilihan yang tersedia. Pilihan ini telah didefenisikan pada saat form dibuat. Pada penggunaan tag select ini, kita juga membutuhkantag option sebagai “isi” dari tag select. Format dasar pembuatan select dalam HTML adalah sebagai berikut: Anda tidak harus menggunakan tag select di dalam formHTML, namun bisa juga digunakan tanpa tag form. Akan tetapi jika digunakan diluar form, kita membutuhkan bantuan bahasa pemograman lain seperti javascript untuk memproses hasilnya. ________________________________________ Atribut name: Untuk Pemrosesan Tag Select Atribut name untuk tag select digunakan sebagai identitas dari tag select tersebut. Identitas ini diperlukan pada saat pemrosesan di sisi server (misalnya menggunakan PHP). Atribut name inilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut name diletakkan di dalam tag select, bukan di dalam tag option. Berikut contoh penulisan atribut nameuntuk tag select: ________________________________________ Atribut value: Sebagai Nilai untuk Tag Option Atribut value digunakan di dalam tag option. Nilai dari atribut inilah yang akan dikirimkan kedalam web server, sehingga disarankan menggunakan nilai yang mencerminkan pilihan user. Nilai dari value tidak harus sama dengan apa yang dilihat user. Berikut contoh penulisannya: Usahakan untuk memberi nilai value berupa nilai yang singkat namun bermakna sesuai dengan pilihan yang ditampilkan. ________________________________________ Atribut selected: Menampilkan Nilai Default dari Tag Select Atribut selected digunakan pada tag option. Jika sebuahtag option mememiliki atribut selected, maka pada saat form ditampilkan, pilihan tag inilah yang akan tampil sebagai nilai awal dari select (nilai default). Nilai dari atribut ini adalah dirinya sendiri, sehingga penulisannya menjadiselected=“selected”. Berikut contoh penulisannya: ________________________________________ Atribut Size: Menentukan Besar tampilan Select Atribut size digunakan untuk menentukan besar dari tampilan tag select. Jika tidak ditulis, tag select memiliki nilai default size=”1″, sehingga hanya 1 pilihan yang “terlihat” ketika user memilih pilihan yang ada. Namun jika anda menambahkan atribut size=”3″, maka pada saat form ditampilkan, tag select akan ditampilkan sebanyak 3 baris, bukan 1 baris seperti biasanya. Atribut size ini umumnya digunakan apabila tag selectdirancang untuk dapat dipilih dengan beberapa pilihan sekaligus. Untuk keperluan ini, atribut size biasanya di kombinasikan dengan atribut multiple yang akan kita bahas setelah ini. Berikut contoh penulisan atribut size untuk tag select: Pada saat penulisan artikel ini, saya mengunakan web browser mozilla firefox dangoogle chrome untuk pengujian. Untuk google chrome Versi 33 yang saya gunakan, jika kita membuat size=2, atau size=3, google chromeakan menampilkannya dengan 4 pilihan, bukan 2 atau 3 seperti yang seharusnya. Teteapi web browser mozilla firefox akan tetap menampilkannya secara normal. Perbedaan tampilan ini patut menjadi pertimbangan jika anda ingin menggunakan atribut size dalam membuat form. ________________________________________ Atribut Multiple: Untuk Memilih lebih dari 1 pilihan tag Select Atribut multiple untuk tag select digunakan untuk memungkinkan user untuk dapat memilih lebih dari 1 nilai. Namun untuk dapat memilih lebih dari 1 nilai, user harus menekan tombol ctrl pada keyboard. Atribut multiple akan lebih mudah digunakan jika ditambahkan atribut size. Satu-satunya nilai untuk atribut multiple ini adalah “multiple”. Berikut contoh penggunaan atribut multiple, dan dikombinasikan dengan atribut size: penggunaan atribut multiple untuk memungkinkan user memilih lebih dari satu pilihan mungkin bukan ide yang buruk, tetapi tidak semua user paham cara men-klik sambil menahan tombol ctrl. Jika anda bermaksud membolehkan user memilih lebih dari 1 pilihan, pertimbangkan mengganti tag select dengancheckbox. ________________________________________ Atribut disabled: Menonaktifkan tag Select Atribut disabled digunakan untuk membuat tag selecttidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal, misalkan sebuah pilihan select hanya dapat diisi ketika user telah mengisi form diatasnya. Atribut disabled ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” Berikut contoh penulisannya atribut disabled untuk tag selectHTML: Selain digunakan untuk tag select, atribut disabled juga bisa digunakan untuk tag option. Ketika digunakan di dalam tag option, maka pilihan yang memiliki atributdisabled tidak akan bisa digunakan. berikut contoh penulisannya: ________________________________________ Tag optgroup dan atribut label Tag optgroup digunakan untuk membuat kelompok-kelompok pilihan. Jika list pilihan anda panjang, menggunakan tag optgroup akan memudahkan user dalam menentukan pilihan apabila telah dikelompokkan terlebih dahulu. Atribut label diperlukan untuk menampilkan judul dari tag optgroup. Berikut contoh penulisan tag optgroup: Dalam penulisan tag optgroup, kita membutuhkan sebuah atribut, yakni atribut label yang berisi tulisan yang akan muncul untuk grup pilihan tersebut. Di dalam web browser,tag optgroup ini akan ditampilkan dalam huruf tebal (bold), namun user tidak dapat memilihnya karena fungsi tag ini memang hanya sebagai keterangan saja. ________________________________________ Atribut id dan class: CSS dan Javascript Selain atribut name, value, selected, size, multipe dandisabled, anda juga bisa menggunakan atribut umum seperti id dan class dalam tag select. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakanJavascript dan CSS. ________________________________________ Cara Penggunaan Tag Input select dalam Form HTML Untuk merangkum seluruh contoh atribut dan tag selectyang telah kita pelajari disini, saya akan membuat contoh cara penggunaannya di dalam form HTML: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 Belajar Tag Select HTML

tag Select dengan atribut: name+value+selected:

tag Select dengan atribut: name+value+selected+size=3:

tag Select dengan atribut: name+value+selected+size=6+multiple:

Tahan tombol crtl pada saat memilih > 1 pilihan.

tag Select dengan atribut: name+value+selected+disabled

tag Select dengan atribut: name+value dan tag optgroup

Contoh kode program HTML tag select yang saya tulis hanya merangkum apa yang telah kita pelajari pada tutorial kali ini. Selnajutnya kita akan mempelajari tentang tag textarea dalam Form HTML Pada tutorial Belajar HTML Dasar: Cara Membuat Form di HTML (tag form) kita telah menggunakan tag Textarea, namun dalam tutorial kali ini saya akan membahasnya dengan lebih dalam. ________________________________________ Fungsi Tag Textarea dalam pembuatan Form HTML Objek form textarea digunakan untuk membuat text inputan yang bisa menampung lebih dari 1 baris inputan.Tag textarea mirip dengan tag input type text, namun memiliki kelebihan untuk menampung beberapa baris. Biasanya textarea digunakan untuk inputan yang panjang, seperti komentar, keterangan, atau catatan. Untuk menggunakan textarea, kita cukup membuat tag textarea sebagai berikut: Diantara tag pembuka dan penutup bisa diselipkan text yang akan ditampilkan sebagai isian awal dari text area seperti berikut ini: ________________________________________ Atribut name: Untuk pemrosesan Tag Textarea Walaupun tidak harus, namun jika text area digunakan di dalam form, maka atribut name berfungsi sebagai identitas dari tag textarea tersebut. Identitas ini diperlukan pada saat pemrosesan di sisi server (misalnya menggunakan PHP). Atribut name inilah yang akan menjadi varibel penampung nilai yang dipilih oleh user. Atribut namediletakkan di dalam tag textarea: ________________________________________ Atribut cols dan rows: Menentukan Lebar dan Tinggi Textarea Kedua atribut ini berfungsi untuk membatasi tampilan lebar kolom(cols) dan tinggi baris (rows) dari textarea. Nilai yang diinput adalah jumlah karakter yang menjadi lebar dari text area. Misalkan kita membuat atribut cols=”40”, maka text area akan memiliki lebar 40 karakter. Namun lebar ini tidak akan persis sama dengan 40 karakter, karena akan tergantung font, serta jenis huruf yang diinput. Contoh penggunaan atribut cols dan rows: ________________________________________ Atribut disabled dan readonly: menonaktifkan tag Textarea Atribut disabled dan readonly digunakan untuk membuattextarea tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal. Misalkan sebuah textarea hanya dapat diisi ketika user telah mengisi kotak isian lainnya. Kedua atribut ini hanya memiliki 1 nilai, yaitu dirinya sendiri, yang ditulis dengan disabled=”disabled” danreadonly =“readonly”. Berikut contoh penulisannya:

Silahkan isi komentar anda

Walaupun kedua textarea yang memiliki atribut ini tidak bisa digunakan, namun keduanya akan memiliki tampilan yang berbeda. Atribut disabled akan membuat kotak text berwarna abu-abu, sedangkan atribut readonly tampak seperti kotak text biasa. Sehingga biasanya atribut disabled lah yang sering digunakan, karena akan memberikan tampilan kepada user bahwa kotak text tersebut tidak bisa digunakan. ________________________________________ Atribut id dan class: CSS dan Javascript Selain atribut name, value, cols, rows, disabled danreadonly , kita juga bisa menggunakan atribut umum seperti id dan class dalam tag textarea. Tag id dan classakan dibutuhkan untuk pemograman HTML menggunakanJavascript dan CSS. ________________________________________ Cara Penggunaan Tag Textarea dalam form HTML Untuk merangkum seluruh contoh atribut dari tag textarea yang telah kita pelajari disini, saya akan membuat contoh cara penggunaannya di dalam form HTML: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 Belajar Tag Textarea HTML Textarea kadang dibutuhkan untuk inputan form yang membutuhkan kalimat yang panjang seperti komentar. ________________________________________ Tutorial HTML tentang Fungsi dan Cara Penggunaan Tag Textarea ini menutup tutorial singkat tentang pembuatan form HTML. Jika anda telah mempelajari dari part 1 sampai 11, maka anda setidaknya telah menguasai sebagian besar tag dan atribut-atribut tentang form HTML.