Belajar Membuat Form dan Tabel

Secara umum fungsi form banyak digunakan untuk proses input ke database, dimana dapat menyimpan nilai-nilai yang di isi oleh user atau pengguna, selain itu form memungkin user dapat berkomunikasi dengan user lain, hal ini tetap didasari komunikasi antara server dengan client  biasanya dilakukan  dengan menggunakan script atau bahasa pemrograman yang bersifat server-side mingkin bisa php atau phyton dan lain sebagainya.

Sama halnya jika kita mau mendaftar akun, entah itu gmail, facebook, twitter, instagram dan sebagainya. Semua berbasis form pengolahan data, mulai dari form pendaftaran, form login, form update-ing dan lain sebagainya. Akan tetapi untuk disini saya cuma ingin membahas membuat form di html yaitu sebatas interface saja, tidak untuk pengolahan data.

Tidak lupa, disini juga saya akan membahas membuat tabel di html. Karena tabel itu juga sangat penting dalam pembuatan form. Dalam menampilkan data yang terstruktur atau tampilan dari database, kita bisanya akan membuatanya dalam tabel. HTML juga menyediakan tag Tabel digunakan untuk menampilkan data dalam bentuk tabel.

Biasanya untuk membuat tabel di html, kita membutuhkan setidaknya tiga tag, yaitu tag <table>, tag <tr>, dan tag <td>. Ok, itu penjelasan singkatnya. Untuk penjelasan dan penggunaan yang lebih, bisa simak penjelasan dibawah. 

Form

Dalam sebuah website biasanya terdapat satu atau lebih form, seperti form pencarian, registrasi dan lain sebagainya. Form ini biasa digunakan untuk mengumpulkan data dari pengunjung website. Sebuah form, boleh jadi memiliki beragam kontrol, mulai dari text input, Combo box, Button dan lain sebagainya. Kita akan mempelajari sebagian kontrol yang disebutkan diatas karena kontrol di atas adalah yang paling sering digunakan dalam halaman web. 

Pertama-tama, pembuatan sebuah form diawali dengan tag <form>, dan setiap kontrol-kontrol yang dibutuhkan ditempatkan di dalam tag ini. 

<form>
<h1>Formulir Pendaftaran</h1>
       …
</form> 

Note:
Jika anda merasa asing dengan istilah FORM, bayangkan saja sebuah FORMULIR yang sering ditemui di sekitar kita seperti formulir pendaftaran siswa baru, formulir pembuatan KTP, formulir pembuatan SIM dan lain sebagainya.

Control-control Form 

Setiap control pada form dapat dibuat dengan menggunakan tag <input>. Dan yang membedakan tipe dari control tersebut berada pada atribut type (tipe kontrol). Berikut ini adalah sebagian tipe kontrol yang biasa ditemui :

Label 

Label digunakan untuk memberikan keterangan pada setiap input yang ada. Jika anda perhatikan formulir pendaftaran akun google, yang disebut dengan label adalah yang ditandai berikut ini :

Label

<label for=”Name”> Keterangan Input </label> 

Atribut for diisi dengan isi dari atribut name pada kontrol yang ingin diberi label.

Text 

Control input ini dapat diisi dengan teks yang memiliki kata yang tidak terlalu panjang/hanya satu baris, biasa digunakan dalam form pencarian, nama, alamat dan lain sebagainya.

<label for=”nama”>Nama Lengkap</label>
<input type=”text” name=”nama” /> 

Text Input

Jika text input yang akan ditampilkan ingin memiliki nilai, maka tuliskan nilai tersebut di dalam atribut value.

<input type=”text” name=”nama” value=”Aditya Nur Kahfi” /> 

Dengan begitu, ketika halaman dibuka, text input ini secara otomatis akan terisi dengan nilai dari atribut value.

Text Area 

Sama halnya dengan Input Text, namun textarea dapat diisi lebih dari satu baris, cocok digunakan untuk isian yang panjang yang jumlahnya lebih banyak, seperti alamat, deskripsi, atau biodata. Berbeda dengan kontrol lainnya yang menggunakan tag <input>, text area memiliki tag sendiri yaitu <textarea></textarea>. Dan apa yang terdapat di dalam tag ini adalah value dari kontrol tersebut.

<label for=”alamat”>Alamat Lengkap</label>
<textarea name=”alamat”></textarea> 

Text Area

Combo Box 

Combo Box adalah kontrol yang memiliki pilihan ketika diklik. Pembuatannya sama seperti pembuatan Daftar/List namun dengan tag yang berbeda.

<label for=”kota”>Kota</label>
             <select name=”kota”>
                               <option>Jakarta</option>
                               <option>Bandung</option>
                               <option>Tasikmalaya</option>
                               <option>Kendal</option>
                               <option>Kaliwungu</option>
                               <option>Semarang</option>
             </select> 

Combo Box

Submit/Button 

Submit atau Button, berupa tombol yang dapat di klik. Penggunaan atribut value pada kontrol ini akan merubah text yang ada di dalamnya.

<input type="submit" name="Submit" value="Kirimkan">

Button

Sebagai latihan, kita coba menggabungkan kontrol-kontrol yang telah anda pelajari sebelumnya menjadi satu form utuh. Buatlah file baru, dengan nama file latihan_form.html, lalu ketikkan kode HTML berikut pada file latihan_form.html

<!DOCTYPE HTML>
<HTML>
<head>
               <title>Form</title>
</head>
<body>
           <form>
                      <label for=”nama”>Nama:</label>
                      <input type=”text” name="nama"><br>
                      <label for=”alamat”>Alamat:</label>
                      <textarea name=”alamat”></textarea><br>

                      <label for=”kota”>Kota</label>
                      <select name=”kota”>
                                 <option>Jakarta</option>
                                 <option>Bandung</option>
                                 <option>Tasikmalaya</option>
                                 <option>Kendal</option>
                                 <option>Kaliwungu</option>
                                 <option>Semarang</option>
                       </select><br>
                       <input type="submit" name="Submit" value="Kirimkan">
                         
          </form>
</body>
</HTML>

Berikut ini adalah tampilan yang anda dapatkan jika file latihan_form.html dibuka di dalam browser.

Form

Dalam artikel ini, saya tidak akan membahas bagaimana cara memroses data yang dikumpulkan dari form tersebut, karena dalam HTML kita tidak bisa melakukan proses pengolahan data. Ingat bahwa HTML hanya digunakan untuk memformat dokumen, bukan untuk memroses data. Untuk memroses data, kita bisa menggunakan bahasa pemrograman web, seperti Javascript atau PHP atau bahasa pemrograman web lainnya.

Dengan bahasa pemrograman seperti Javascript atau PHP anda dapat mengolah data-data yang dikumpulkan dari Form HTML untuk diproses dan dikeluarkan kembali menjadi suatu informasi baru.

Tabel 

Untuk menampilkan data dengan tipe tabel dalam HTML, kita bisa menggunakan tag <table>.

<table></table> 

Untuk membuat baris tabel, kita gunakan tag <tr> – singkatan dari table row (ditulis di dalam tag table)

<table>
<tr></tr>
</table> 

Sedangkan untuk menentukan banyaknya kolom, tergantung dari banyaknya tag <td> (table data) yang digunakan di dalam tag <tr>.

<table>
    <tr>
           <td>No</td>
           <td>Nama</td>
           <td>Alamat</td>
  </tr>
</table> 

Untuk menyatukan kolom atau baris (merge-cell) kita tambahkan atribut colspan (untuk merge horizontally-secara horizontal) atau rowspan (untuk merge vertically).

<table> 
    <tr> 
           <td rowspan=2>No</td> 
           <td colspan=2>Jenis Kelamin</td> 
           <td rowspan=2>Nama</td> 
   </tr> 
   <tr> 
           <td>L</td> 
           <td>P</td> 
  </tr> 
  <tr> 
           <td>1</td> 
           <td>L</td> 
           <td></td> 
           <td>Rian</td> 
    </tr> 
</table> 

Tabel Setelah diberi Atribut Border

Sebagai latihan, anda tulis kode tabel di atas dan tambahkan beberapa data lagi, lalu simpan.

Sekian dulu artikel Belajar Membuat Form dan Tabel, semoga anda dapat memahaminya dengan baik. Jangan lupa untuk share juga artikel ke teman-teman kalian. Agar teman kalian juga tahu, bagaimana cara membuat form dan tabel itu seperti apa. Terima kasih atas kunjungannya, dan maaf bila ada salah-salah dalam penulisan, baik itu typo atau tulisan yang kurang baik. Good Luck! Sampai jumpa di postingan selanjutnya. Salam AdityaTekno.com.


Referensi dari:
Buku Belajar HTML dan CSS oleh Rian Ariona