Tutorial HTML terusan 18

Tutorial HTML terusan 18

 Setelah mempelajari Tutorial HTML terusan 17 sekarang kita akanlanjutkan ke Tutorial HTML terusan 18.

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:

<form>
   <input type="hidden" />
</form>

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:

<form>
   <input type="hidden" name="asal_halaman"/>
</form>

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:

<form>
   <input type="hidden" name="asal_halaman" value="halaman_register"/>
</form>

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 id dibutuhkan untuk pemograman HTML menggunakan Javascript.

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:

<!DOCTYPE html>
<html>

<head>
   <title>Belajar Tag Input Type=hidden HTML</title>
</head>

<body>

   <h4>Belajar tag Input type="hidden" di infoku.net:</h4>
   <form action="proses.php" method="get">
   <input type="hidden" name="asal_halaman" value="halaman_register"/>
   <input type="submit" value="Kirim pesan rahasia"/>
   </form>

</body>
</html>

 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_alaman berasal dari atribut name, dan halaman_register adalah nilai dari atribut value. Penggunaan tag input type hidden ini akan berguna saat dikombinasikan dengan bahasa pemograman web seperti Javascript.

Fungsi Tag Select dalam pembuatan Form HTML

Tag select di dalam HTML digunakan untuk membuat objek 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 membutuhkan tag option sebagai “isi” dari tag select. Format dasar pembuatan select dalam HTML adalah sebagai berikut:

<select >
   <option>Pilihan 1</option>
   <option>Pilihan 2</option>
   <option>Pilihan 3</option>
</select >

Anda tidak harus menggunakan tag select di dalam form HTML, 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 name untuk tag select:

<select  name=”judul_pilihan”>
   <option>Pilihan 1</option>
   <option>Pilihan 2</option>
</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:

<select>
   <option value="pil1">Pilihan 1</option>
   <option value="pil2">Pilihan 2</option>
   <option value="pil3">Pilihan 3</option>
</select>

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 sebuah tag 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 menjadi selected=“selected”. Berikut contoh penulisannya:

<select>
   <option >Pilihan 1</option>
   <option selected="selected">Pilihan 2</option>
   <option>Pilihan 3</option>
</select>


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 select dirancang 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:

<select size="2">
   <option>Pilihan 1</option>
   <option>Pilihan 2</option>
</select >

Pada saat penulisan artikel ini, saya mengunakan web browser mozilla firefox dan google chrome untuk pengujian. Untuk google chrome Versi 33 yang saya gunakan, jika kita membuat size=2, atau size=3, google chrome akan 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:

<select size="3" multiple="multiple">
   <option>Pilihan 1</option>
   <option>Pilihan 2</option>
   <option>Pilihan 3</option>
</select >

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 dengan checkbox.

Atribut disabled: Menonaktifkan tag Select

Atribut disabled digunakan untuk membuat tag select tidak 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 select HTML:

<select disabled="disabled">
   <option>Pilihan 1</option>
   <option>Pilihan 2</option>
   <option>Pilihan 3</option>
</select >

Selain digunakan untuk tag select, atribut disabled juga bisa digunakan untuk tag option.  Ketika digunakan di dalam tag option, maka pilihan yang memiliki atribut disabled tidak akan bisa digunakan. berikut contoh penulisannya:

<select>
   <option>Pilihan 1</option>
   <option disabled="disabled">Pilihan 2</option>
   <option>Pilihan 3</option>
</select>

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:

<select>
   <optgroup label="Kelompok 1">
     <option>Pilihan 1</option>
     <option>Pilihan 2</option>
     <option>Pilihan 3</option>
   <optgroup label="Kelompok 2">
     <option>Pilihan 5</option>
     <option>Pilihan 6</option>
     <option>Pilihan 7</option>
</select>

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 dan disabled, anda juga bisa menggunakan atribut umum seperti id dan class dalam tag select. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.

Cara Penggunaan Tag Input select dalam Form HTML

Untuk merangkum seluruh contoh atribut dan tag select yang telah kita pelajari disini, saya akan membuat contoh cara penggunaannya di dalam form HTML:

<!DOCTYPE html>
<html>

<head>
   <title>Belajar Tag Select HTML</title>
</head>

<body>

   <h4>tag Select dengan atribut: name+value+selected:</h4>
   <form name="form1" action="proses.php" method="get">

   <select name="bulan_lahir">
     <option value="jan">Januari</option>
     <option value="feb">Februari</option>
     <option value="mar" selected="selected">Maret</option>
     <option value="apr">April</option>
     <option value="mei">Mei</option>
     <option value="jun">Juni</option>
     <option value="jul">Juli</option>
   </select>

   </form>

   <h4>tag Select dengan atribut: name+value+selected+size=3:</h4>
   <form name="form2" action="proses.php" method="get">

   <select name="bulan_lahir" size="3">
     <option value="jan">Januari</option>
     <option value="feb">Februari</option>
     <option value="mar">Maret</option>
     <option value="apr">April</option>
     <option value="mei">Mei</option>
     <option value="jun">Juni</option>
     <option value="jul" selected="selected">Juli</option>
   </select>

   </form>

   <h4>tag Select dengan atribut: name+value+selected+size=6+multiple:</h4>
   Tahan tombol crtl pada saat memilih > 1 pilihan.
   <br />
   <form name="form2" action="proses.php" method="get">

   <select name="bulan_lahir" size="6" multiple="multiple">
     <option value="jan" selected="selected">Januari</option>
     <option value="feb">Februari</option>
     <option value="mar">Maret</option>
     <option value="apr">April</option>
     <option value="mei">Mei</option>
     <option value="jun">Juni</option>
     <option value="jul">Juli</option>
   </select>

   </form>

   <h4>tag Select dengan atribut: name+value+selected+disabled</h4>
   <form name="form2" action="proses.php" method="get">

   <select name="bulan_lahir" disabled="disabled">
     <option value="jan">Januari</option>
     <option value="feb">Februari</option>
     <option value="mar">Maret</option>
     <option value="apr">April</option>
     <option value="mei"selected="selected">Mei</option>
     <option value="jun">Juni</option>
     <option value="jul">Juli</option>
   </select>

   </form>

   <h4>tag Select dengan atribut: name+value dan tag optgroup</h4>
   <form name="form2" action="proses.php" method="get">

   <select name="bulan_lahir">
   <optgroup label="Triwulan 1">
     <option value="jan">Januari</option>
     <option value="feb">Februari</option>
     <option value="mar">Maret</option>
   </optgroup>
   <optgroup label="Triwulan 2">
     <option value="apr">April</option>
     <option value="mei">Mei</option>
     <option value="jun">Juni</option>
   </optgroup>
   <optgroup label="Triwulan 3">
     <option value="jul">Juli</option>
   </optgroup>
   </select>

   </form>

</body>
</html>
 Contoh kode program HTML tag select yang saya tulis hanya merangkum apa yang telah kita pelajari pada tutorial kali ini.

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:

<textarea></textarea>

Diantara tag pembuka dan penutup bisa diselipkan text yang akan ditampilkan sebagai isian awal dari text area seperti berikut ini:

<textarea>Silahkan isi komentar anda</textarea>

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 name diletakkan di dalam tag textarea:

<textarea name="komentar">Silahkan isi komentar anda</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:

<textarea cols="40">Silahkan isi komentar anda</textarea>

<textarea cols="40" rows="10">Silahkan isi komentar anda</textarea>


Atribut disabled dan readonly: menonaktifkan tag Textarea

Atribut disabled dan readonly digunakan untuk membuat textarea 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” dan readonly =“readonly”. Berikut contoh penulisannya:

<textarea readonly="readonly">Silahkan isi komentar anda</textarea>

<textarea disabled="disabled">Silahkan isi komentar anda</textarea>

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 dan readonly , kita juga bisa menggunakan atribut umum seperti id dan class dalam tag textarea. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript 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:

<!DOCTYPE html>
<html>

<head>
   <title>Belajar Tag Textarea HTML</title>
</head>

<body>
   <form action="proses.php" method="get">

   <h4>Tag textarea dengan atribut: name</h4>
   <textarea name="komentar1">
     Silahkan isi komentar anda
   </textarea>
   <br />

   <h4>Tag textarea dengan atribut: name + cols="40"</h4>
   <textarea name="komentar2" cols="40">
     Silahkan isi komentar anda
   </textarea>
   <br />

   <h4>Tag textarea dengan atribut: name + cols="40" + rows="5"</h4>
   <textarea name="komentar3" cols="40" rows="5">
     Silahkan isi komentar anda
   </textarea>
   <br />

   <h4>Tag textarea dengan atribut: name + readonly</h4>
   <textarea name="komentar4" readonly="readonly">
     Silahkan isi komentar anda
   </textarea>
   <br />

   <h4>Tag textarea dengan atribut: name + disabled</h4>
   <textarea name="komentar5" disabled="disabled">
     Silahkan isi komentar anda
   </textarea>

   </form>

</body>
</html>
Textarea kadang dibutuhkan untuk inputan form yang membutuhkan kalimat yang panjang seperti komentar.
Sekian dulu penjelasan dari saya,semoga jelas,kita lanjut lagi  Dalam tutorial selanjutnya di Tutorial HTML5  di tutorial HTML5 akan membahas mengenai generasi terbaru HTML.
 

About

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Next
« Prev Post
Previous
Next Post »

silahkan berkomentar bila ada yang ingin di tanyakan . ConversionConversion EmoticonEmoticon

Subscribe to: Post Comments (Atom)