Tutorial HTML terusan 17 ~ infoku.net

Setelah mempelajari Tutorial HTML terusan 16 sekarang kita akanlanjutkan ke Tutorial HTML terusan 17.
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:

<form>
   <input type="checkbox" name="hobi" value="HTML"/>belajar HTML
</form>

Atribut Checked: Cara menandai checkbox

Atribut checked digunakan untuk menandai dipilih atau tidaknya checkbox tersebut. Satu-satunya nilai dari atribut checked ini adalah checked, sehingga penulisannya menjadi: checked = “checked”. Berikut contoh penulisan atribut checked:

<form>
   <input type="checkbox" name="hobi" value="HTML" checked ="checked"/>belajar HTML
</form>

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 checkbox tidak 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:

<form>
   <input type="checkbox" name="hobi" value="HTML" disabled="disabled" />belajar HTML
</form>

Atribut disabled akan membuat checkbox berwarna abu-abu dan memberikan tampilan kepada user bahwa checkbox 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 class dalam tag input type checkbox. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.
Cara Penggunaan tag input type checkbox dalam form HTML
Untuk merangkum penggunaan tag input type checkbox beserta atribut-atributnya, saya akan membuat contoh kode HTML untuk semua atribut yang telah kita pelajari dalam tutorial ini:

<!DOCTYPE html>
<html>
 
<head>
   <title>Belajar Tag Input Type=checkbox HTML</title>
</head>

<body>

   <h4>Belajar tag Input type="checkbox" di infoku.net:</h4>
   <form>

   Checkbox dasar : 
   <input type="checkbox" name="hobi1" value="HTML"/>belajar HTML
   <br />

   Checkbox + checked : 
   <input type="checkbox" name="hobi2" value="HTML" checked="checked"/>
   belajar HTML
   <br />

   Checkbox + disabled : 
   <input type="checkbox" name="hobi3" value="HTML" disabled="disabled"/>
   belajar HTML
   <br />
   <br />

   Checkbox + Tag Label + Tag fieldset + Taglegend :
   <fieldset>
   <legend>Hobi</legend>
   <label>
     <input type="checkbox" name="hobi4" value="HTML"/>belajar HTML
   </label>
   <label>
     <input type="checkbox" name="hobi4" value="CSS"/>belajar CSS
   </label>
   <label>
     <input type="checkbox" name="hobi4" value="PHP"/>belajar PHP
   </label>
   </fieldset>

   </form>
</body>
</html>

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.

Fungsi tag input type radio dalam Pembuatan Form HTML

Tag input type radio berfungsi untuk membuat tombol radio 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 memerlukan tag input dengan sebuah atribut type radio. Berikut format dasar radio dalam HTML:

<input type="radio"/>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 atribut name, 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 dengan atribut name:

<form>

   <input type="radio" name="nama_radio"/>keterangan radio1

   <input type="radio" name="nama_radio"/>keterangan radio2

</form>

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:

<form>

   <input type="radio" name="nama_radio" value="isi_radio1"/>keterangan radio1

   <input type="radio" name="nama_radio" value="isi_radio2"/>keterangan radio2

</form>

Atribut Checked: Cara Menandai Pilihan radio

Atribut checked digunakan untuk menandai dipilih atau tidaknya radio tersebut. Satu-satunya nilai dari atribut checked ini adalah checked, sehingga penulisannya menjadi: checked = “checked”. Berikut contoh penulisan dasar atribut checked radio:

<form>

   <input type="radio" name="nama_radio" value="isi_radio1"/>keterangan radio1

   <input type="radio" name="nama_radio" value="isi_radio2"

   checked="checked"/>keterangan radio2

</form>

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 isian defaut 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:

<form>

   <input type="radio" name="nama_radio" disabled="disabled"/>keterangan radio1

</form>

Atribut disabled akan membuat radio berwarna abu-abu dan memberikan tampilan kepada user bahwa radio 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 class dalam tag input type radio. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript 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:

!DOCTYPE html>

<html>

<head>

<title>Belajar Tag Input Type=radio HTML</title>

</head>

<body>

<h4>Belajar tag Input type="radio" di infoku.net:</h4>

<form>

Radio dasar :

<input type="radio" name="jenis_kelamin1" value="Laki-laki"/>Laki-laki

<br />

Radio dengan pilihan :

<input type="radio" name="jenis_kelamin2" value="Laki-laki"/>Laki-laki

<input type="radio" name="jenis_kelamin2" value="Perempuan"/>Perempuan

<br />

Radio + checked :

<input type="radio" name="jenis_kelamin3" value="Laki-laki"/>Laki-laki

<input type="radio" name="jenis_kelamin3" value="Perempuan"

checked="checked"/>Perempuan

<br />

Radio + disabled :

<input type="radio" name="jenis_kelamin4" value="Laki-laki"

disabled="disabled"/>Laki-laki

<input type="radio" name="jenis_kelamin4" value="Perempuan"

disabled="disabled"/>Perempuan

<br />

Radio + Tag Label + Tag fieldset + Tag legend :

<fieldset>

<legend>Jenis Kelamin</legend>

<label>

<input type="radio" name="jenis_kelamin5" value="Laki-laki"/>Laki-laki

</label>

<label>

<input type="radio" name="jenis_kelamin5" value="Perempuan"/>Perempuan

</label>

</fieldset>

</form>

</body>

</html>

Jika anda perhatikan, pada setiap contoh saya memberikan atribut name yang berubah-ubah dari jenis_kelamin1 sampai dengan jenis_kelamin5, hal ini agar masing-masing radio dianggap sebagai contoh yang terpisah.

Pada contoh terakhir saya menggunakan tag label, tag fieldset dan tag legend.
Tag input type radio ini cocok digunakan untuk objek form yang membutuhkan user untuk memilih hanya satu diantara pilihan yang ada.

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 form yang digunakan untuk upload file. Pemrosesan upload sendiri 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:

<form>

   <input type="file">

</form>

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” pada firefox, 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 untuk type=”file”, karena atribut name inilah yang akan menjadi varibel penampung file upload di sisi server nantinya. Berikut cara penulisan atribut name:

<form>

   <input type="file" name="file_gambar">

</form>

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_type seperti audio/*, video/*, dan image/*. MIME_type adalah sebuah pengelompokkan khusus untuk file-file di dalam internet . List lengkap dari MIME ini dapat dilihat dari http://en.wikipedia.org/wiki/Internet_media_type.
Contoh berikut akan membatasi file upload untuk file gambar:

<form>

   <input type="file" name="file_gambar" accept="image/*">

</form>

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 upload tidak 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:

<form>

   <input type="file" name="upload_gambar" disabled="disabled">

</form>

Atribut id dan class: CSS dan Javascript

Selain atribut type, name, accept dan disabled, kita juga bisa menggunakan atribut umum seperti id dan class dalam tag input type file. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript 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:

<!DOCTYPE html>

<html>

<head>

   <title>Belajar Tag Input Type=file HTML</title>

</head>

<body>

   <h4>Belajar tag Input type="file" di infoku.net:</h4>

   <form name="form_upload" >

   Input type="file" dasar :

   <input type="file">

   <br />

   Input type="file" tipe data gambar :

   <input type="file" accept="image/*"/>

   <br />

   Input type="file" disabled :

   <input type="file" accept="image/*" disabled="disabled">

   </form>

</body>

</html>

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 nilai multipart/form-data. Atribut ini menginstruksikan kepada web server bahwa data yang dikirim berisi file yang diupload. 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:

<form name="nama_form" enctype="multipart/form-data" action="proses.php"

method="POST">

Sehingga contoh formnya akan menjadi sebagai berikut:

<!DOCTYPE html>

<html>

<head>

   <title>Belajar Tag Input Type=file HTML</title>

</head>

<body>

   <h4>Belajar tag Input type="file" di infoku.net:</h4>

   <form name="nama_form" enctype="multipart/form-data"

   action="proses.php" method="POST">

   Upload Gambar: <input type="file" accept="image/*"/>

   <br />

   <input type="submit" value="Proses Upload">

   </form>

</body>

</html>

Di dalam tutorial form html di atasi kita telah mempelajari cara 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.

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 untuk type image, karena atribut name inilah yang akan menjadi varibel penampung di sisi server nantinya. Berikut cara penulisan atribut name:

<input type="image" src="infoku.net.png" name="gambar_infoku.net"/>

Atribut src: Menentukan Lokasi Gambar

Sama seperti tag <img> 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:

<input type="image" src="infoku.net.png" />

Dari contoh tersebut saya memiliki gambar dengan nama koala.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:

<input type="image" src="infoku.ne.png" width="200px" dan height="200px" />

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:

<input type="image" src="infoku.net.png" align="right" />

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:

<input type="image" src="infoku.net.png" 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 dengan javascript 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:

<input type="image" src="infoku.net.png" disabled="disabled" />

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 class dalam tag input type image. Tag id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript 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 atribut type=”image”:

<!DOCTYPE html>

<html>

<head>

   <title>Belajar Tag Input Type=image HTML</title>

</head>

<body>

   <h4>Belajar tag Input type="image" di infoku.net:</h4>

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

      <input type="image" src="infoku.net.png" alt="gambar infoku.net"

      name="gambar_infoku.net"/>

   </form>

</body>

</html>

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_infoku.net.x=136&gambar_infoku.net.y=94

Gambar_infoku.net.x=136 dan gambar_infoku.net.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.
Sekian dulu penjelasan dari saya,semoga jelas,kita lanjut lagi Dalam tutorial selanjutnya di Tutorial HTML terusan 18

About Admin MC3

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.