Cara Membuat Form HTML dengan Table

Salam penggemar kode, kali ini saya akan membahas kode HTML yang sering dicari oleh para pelajar di google, yaitu tentang membuat form HTML dengan table. Form html sendiri disajikan untuk memasukan data (input), sehingga setiap user yang berkunjung bisa menyimpan data, mengirim pesan, atau membuat status. Penyajian form seringkali tidak terlihat menarik, dan akan tampak berantakan, untuk mengatasi hal ini yaitu dengan menggunakan table.

Table dalam html ditulis dengan tag <table>, dalam tag ini, kita bisa menyisipkan kode <tr>, dan <td>.

Kurang lebih penulisan table seperti berikut ini.

<table><tr><td>isi</td></tr></table>

Pada kode diatas tampak penulisan table, yang didalamnya ada tr dan td. Sekarang, apa yang akan kita masukan dalam tag table ini. oke kita akan membuat 2 hal, yaitu form login dan form pemesanan barang.

Langsung saja ketikan kode login html berikut.

<html>
<head></head>
<body>
Contoh form login dengan table
---------------------------------
<h3>Login untuk melanjutkan</h3>
<form action="#">
<table border="0">
      <tr>
         <td>Email  </td>
         <td><input type="text" name="email" placeholder="masukan Email"/></td>
      </tr>
      <tr>
          <td>Password </td>
          <td><input type="password" name="pass" placeholder="masukan password"/></td>
       <tr/>
       <tr>
           <td><button type="submit">Masuk</button></td>
       </tr>
</table>
</form>
</body>
</html>

Simpan kode tersebut dengan nama (form_table.html) tanpa tanda kurung, kurang lebih hasilnya seperti berikut ini (gambar berikut ini, pertama adalah bordernya = 1, dan gambar 2, border= 0, tinggal ubah saja sesuai keinginan).

Sekarang mari kita coba membuat form pemesanan, dengan border table = 1, dan menambahkan tag heading table atau <th>, ketikan kode berikut ini pada file editor yang kamu miliki (notepad, notepad ++).

<html>
<head>
</head>
<body>
<form action="#">
<table border="0">
    <tr>
      <th>Barang</th>
      <th>jumlah</th>
      <th>warna</th>
    <tr/>
    <tr>
       <td>
         <select name="barang">
              <option value="baju">Baju</option>
              <option value="clana">Celana</option>
              <option value="clana">Kerudung</option>
         </select>
       </td>
       <td>
          <input type="number" name="total"/>
       </td>
       <td>
          <input type="radio" name="warna">Merah<br/>
          <input type="radio" name="warna">hijau<br/>
          <input type="radio" name="warna">kuning<br/>
          <input type="radio" name="warna">hitam<br/>
       </td>
     </tr>
      <tr>
        <td></td>
        <td><button type="submit">Masukan Ke Keranjang</button></td>
      </tr>
<table>
</form>
</body>
</html>

Setelah itu simpan kode tersebut dengan nama junior.html, hasilnya kurang lebih akan tampak seperti gambar berikut ini.

Penjelasan kode html diatas

<html> merupakan tag pertama untuk membuat file html, dan harus ditutup dengan kode </html>,
<head> sering disebut juga sebagai tag kepala, karena pada bagian ini, kita bisa menympan kode CSS, Script JavaScript, Tag Meta, Iklan otomatis Google, dan sebagainya. Tag ini, harus diakhiri dengan tag </head>
<body> merupakan tag untuk menampilkan halaman yang kita buat pada user. Tag ini harus ditutup dengan kode </body>
<table> merupakan tag tabel, yang digunakan untuk membuat suatu table, tag ini harus diakhiri dengan tag </table>. Pada tag ini terdapat properti border=”” yang merupakan garis pada table, jika kita isi 1 maka garisnya adalah 1 pixels, dan jika kita isi 0, maka akan menghilangkan bordernya.
<tr> merupakan tag yang digunakan untuk membuat suatu baris table (baris ke samping). Tag ini disimpan di dalam tag <table>, dan tag ini diakhiri dengan tag </tr>
<td> merupakan tag yang berada dalam tag <tr>, disinilah kita menyimpan data atau tulisan, tag <td>, bisa dibuat banyak dalam satu tag <tr>, sehingga akan membentuk kotak-kotak ke samping.
<th>, merupakan tag heading, yang berada pada tag <table>, pada tag <th> ini kita dapat memberikan suatu judul element. Tag ini diakhiri dengan </tr>
<input type=”radio”> merupakan tag pilihan yang berbentuk seperti kancing baju, untuk membuat tag ini, kita perlu mengubah type menjadi radio, dan untuk mengelompokannya, kita perlu menambahkan property name=”–kelompok–“.
<button> tag ini merupakan tag tombol
<select>, juga merupakan salah satu tag pilihan, yang berbentuk menyajar kebawah ketika di klik. Diakhiri dengan </select>. Pada tag ini ada tag <option> yang merupakan suatu data yang akan dipilih, yang diakhiri dengan tag </option>
<form> merupakan tag untuk membuat suatu form, pada tag ini terdapat properti method=”…jenis aksi..” yang berguna untuk menyatakan metode apa dalam mengirim data. Selain itu juga ada properti action=”” yang menyatakan pada lokasi mana kita akan mengirim data ini.

Materi selesai, mari baca yang lainnya..

Related posts:

Leave a Reply Cancel reply