Elemen Form merupakan bagian pada HTML yang digunakan untuk membuat elemen form pada halaman website. Form HTML digunakan untuk mengumpulkan input pengguna. Input pengguna paling sering dikirim ke server untuk diproses.
 |
| Form & Tabel HTML |
Mengenal Beberapa Elemen Form
<input> : untuk membuat formulir HTML untuk input pengguna
<label> : elemen mendefinisikan label untuk beberapa elemen form
<select> : elemen mendefinisikan daftar drop-down
<textarea> : elemen mendefinisikan field input multi-line (text area)
<button> : elemen mendefinisikan tombol yang dapat diklik
<fieldset> : elemen digunakan untuk mengelompokkan data terkait dalam formulir.
<legend> : elemen mendefinisikan caption untuk <fieldset> elemen.
<datalist> : elemen menetapkan daftar yang telah ditentukan pilihan untuk <input>elemen
<output> : elemen merupakan hasil dari perhitungan (seperti yang dilakukan oleh script).
<option> : Menentukan opsi pemilihan
<optgroup> : Menentukan kelompok opsi pemilihan
Mengenal beberapa Atribut pada From
Atribut mendefinisikan tindakan yang akan dilakukan ketika formulir dikirimkan. Biasanya, data formulir dikirim ke file di server ketika pengguna mengklik tombol kirim. Pada contoh di bawah, data formulir dikirim ke file bernama "action_page.php". File ini berisi skrip sisi server yang menangani data formulir:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Atribut Target
targetmenspesifikasikan atribut mana untuk menampilkan respon yang diterima setelah mengirimkan formulir. berikut adalah beberapa atribut target yang umum digunakan:
_blank : Respons ditampilkan di jendela atau tab baru
_self : Respons ditampilkan di jendela saat ini
_parent : Responnya ditampilkan di bingkai induk
_top : Respons ditampilkan di seluruh bagian jendela
contoh penggunaanya:
<form action="/action_page.php" target="_blank">
Atribut Method
method atribut menentukan metode HTTP yang akan digunakan ketika mengirimkan data formulir. Data formulir dapat dikirim sebagai variabel URL (dengan method="get") atau sebagai transaksi posting HTTP (dengan method="post"). Metode HTTP default saat mengirimkan data formulir adalah GET.
Hal yang harus diperhatika ketikamenggunakan method Get:
- Menambahkan data formulir ke URL, dalam pasangan nama/nilai
- JANGAN PERNAH menggunakan GET untuk mengirim data sensitif! (data formulir yang dikirimkan terlihat di URL!)
- Panjang URL dibatasi (2048 karakter)
- Berguna untuk pengiriman formulir di mana pengguna ingin menandai hasilnya
- GET bagus untuk data yang tidak aman, seperti string kueri di Google
contoh penggunaanya:
<form action="/action_page.php" method="get">
Hal yang harus di perhatikan ketika menggunakan method POST:
- Menambahkan data formulir di dalam isi permintaan HTTP (data formulir yang dikirimkan tidak ditampilkan di URL)
- POST tidak memiliki batasan ukuran, dan dapat digunakan untuk mengirim data dalam jumlah besar.
- Pengiriman formulir dengan POST tidak dapat di-bookmark
Selalu gunakan POST jika data formulir berisi informasi sensitif atau pribadi!
<form action="/action_page.php" method="post">
Elemen <form>
<form> : Elemen HTML digunakan untuk membuat formulir HTML untuk input pengguna
<form> : unsur adalah wadah untuk berbagai jenis elemen input, seperti: bidang teks, checkbox, tombol radio, tombol submit, dll
Elemen <input>
<input> : Elemen HTML adalah elemen formulir yang paling banyak digunakan. Sebuah <input> elemen dapat ditampilkan dalam banyak cara, tergantung pada type atributnya.
Berikut beberapa contohnya:
<input type="teks"> : Menampilkan bidang input teks satu baris
<input type="radio"> : Menampilkan tombol radio (untuk memilih salah satu dari banyak pilihan)
<input type="kotak centang"> : Menampilkan kotak centang (untuk memilih nol atau lebih dari banyak pilihan)
<input type="kirim"> : Menampilkan tombol kirim (untuk mengirimkan formulir)
<input type="tombol"> : Menampilkan tombol yang dapat diklik.
Atribut Type pada input
<input type="text">mendefinisikan field input single-line untuk input teks.
contoh penggunaanya :
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Elemen <label>
elemen ini berguna untuk pengguna pembaca layar, karena layar-reader akan membaca keras-keras label ketika pengguna fokus pada elemen input.tag mendefinisikan label bagi banyak elemen form. elemen juga membantu pengguna yang memiliki mengklik kesulitan daerah yang sangat kecil (seperti tombol radio atau kotak centang) - karena ketika pengguna mengklik teks dalam <label> elemen, ia mengubah tombol radio / checkbox.
atribut dari <label>tag harus sama dengan idatribut dari <input> elemen untuk mengikat mereka bersama-sama.
Atribut type Tombol radio
Tombol radio memungkinkan pengguna memilih SATU dari sejumlah pilihan yang terbatas.
<input type="radio">mendefinisikan tombol radio.
contoh penggunaannya:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Atribut type checkbox
Kotak centang memungkinkan pengguna memilih opsi NOL atau LEBIH dari sejumlah pilihan terbatas.
<input type="checkbox">mendefinisikan kotak centang .
contoh penggunaanya :
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Atribut type submit
<input type="submit"> mendefinisikan tombol untuk mengirimkan data formulir ke bentuk-handler. Form-handler biasanya berupa file di server dengan skrip untuk memproses data input. Form-handler ditentukan dalam action atribut form .
contoh penggunaanya:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Nah itulah pembahasan mengenai Elemen Form, selanjutnya kita akan membahasan Elemen Tabel.
Elemen <table> merupakan salah satu elemen penting dalam HTML yang sering digunakan untuk menyajika atau menampilkan data secara terstruktur dan rapih agar mudah dipahami oleh audience atau pengguna.
Kali ini kita akan membahas tentang elemen <table>
Apa itu Elemen <table> dalam HTML
Elemen <table> adalah elemen HTML yang digunakan untuk membuat tabel yang berisi informasi atau data yang terstruktur. elemen tabel terdiri dari baris <tr>, sel <td> atau <th>, dan bagian header <thead>, badan tabel <tbody>, footer tabel <tfoot>. elemen tersebut membantu dalam menyajikan data dengan tata letak yang rapih dan terstruktur.
<table>
<thead>
<tr>
<th>Nama</th>
<th>Usia</th>
<th>No Telpon</th>
</tr>
</thead>
<tbody>
<tr>
<td>jonshons</td>
<td>24</td>
<td>+628998989899</td>
</tr>
<tr>
<td>smile</td>
<td>28</td>
<td>+629474774444</td>
</tr>
</tbody>
</table>
Tabel Dasar HTML
Berikut ini adalah contoh sederhana dalam pembuatan tabel:
Elemen <th> sebagai Header Tabel
Elemen tersebut digunakan untuk mendefinisikan header sel dalam tabel. dalam header tersebut artinya memberikan judul atau label untuk setiap kolom. penggunannya <th> akan lebih memudahkan pengguna karena lebih jelas dan juga terstuktur. berikut contoh penggunaannya
<thead>
<tr>
<th>Nama</th>
<th>Usia</th>
<th>No Telpon</th>
</tr>
</thead>
Elemen <td> untuk menambahkan Data
Elemen tersebut digunakan untuk mendefinisikan sel data dalam tabel. elemen <td> berada didalam elemen <tr> yang mewakili satu baris data. berikut contoh penggunaanya.
<tbody>
<tr>
<td>jonshons</td>
<td>24</td>
<td>+628998989899</td>
</tr>
<tr>
<td>smile</td>
<td>28</td>
<td>+629474774444</td>
</tr>
</tbody>
Elemen <thead>, <tbody> dan <tfoot>
Elemen tersebut digunakan untuk membagi label menjadi <thead> sebagai header, <tbody> sebagai badan atau kerangka tabel, dan <tfoot> sebagai footer. ini akan sangat membantu dalam memahami struktur data terutama jika memilki banyak baris. berikut contoh penggunaanya.
<thead>
<!-- Sebagai Badan TabelKepala Tabel -->
</thead>
<tbody>
<!-- Sebagai Badan Tabel -->
</tbody>
<tfoot>
<!-- Sebagai Badan Tabel Kaki Tabel -->
</tfoot>
Atribut Tabel
Elemen tabel memiliki atribut seperti border, cellspacing, dan cellpadding. atribut ini digunakan untuk membantu dalam memvisualisaikan tampilan tabel maupun jarak antar setiap selnya. berikut contoh penggunaanya.
<table border="2" cellspacing="1" cellpadding="6">
<!-- Isi Konten Tabel -->
</table>
Cara menggabungkan sel dangan atribut colspan dan rowspan
berikut ini cara untuk menggabungkan sel di dalam tabel menggunakan atribut colspan (untuk menggabungkan kolom) dan rowspan (untuk menggabungkan baris).
<td colspan="4">Gabungkan Empat Kolom</td>
<td rowspan="4">Gabungkan Empat Baris</td>
Kesimpulan
Dengan memahami penggunaan tabel, elemen-elemen tabel dan atribut pada tabel, diharapkan anda bisa membuat tabel yang menyajikan informasi yang jelas dan terstruktur agar memudahkan pengguna dalam memahami informasi tersebut.
Selamat mencoba dan dipraktekan di project web anda.
Posting Komentar