Skip to content Skip to sidebar Skip to footer

Membuat Tabel Form Dengan HTML

HTML
Form adalah cara untuk mendapatkan umpan balik dari pengunjung ke situs web yang diawali dan diakhir dengan tag <FORM> dan </FORM>. Field-field yang berada diantaranya, digunakan untuk menentukan ukuran dan jenis dari masing- masing input field. Walaupun dapat dimiliki banyak form dalam satu halaman, tetapi anda tidak dapat melakukan form dalam form


Elemen-elemen dalam suatu form
Bagian berikut menerangkan berbagai elemen yang dapat ditempatkan dalam suatu
form.
  • INPUT - Elemen INPUT menentukan informasi dari user interface. Berikut ini adalah atribut untuk INPUT tag.
  •  CHECKED - Untuk checkboxes dan radio button, atribut ini dapat di set ke TRUE (checked) atau FALSE (unchecked).
  • MAXLENGTH - MAXLENGTH menentukan jumlah maximum karakter yang mana dapat dimasukkan dalam suatu textbox.
  • NAME - Menentukan nama dari form control. Hal ini digunakan untuk menentukan eleme data pada form ke resource yang memproses elemen ini.

Script HTML untuk membuat Tabel Form

<html>
<head><title>INPUT DATA</title></head>
<body>
<form>
<table width="55%" height="60%" border="1" align="center">
<tr align="center">
<td colspan="2"><b>INPUT DATA</td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="pilih" ckecked>Laki-Laki
<input type="radio" name="pilih">Perempuan<br>
</td>
<tr>
<td>Hoby</td>
<td>
<input type="checkbox">Sepak Bola<br>
<input type="checkbox">Membaca<br>
<input type="checkbox">Mengoprasikan Komputer<br>
</td>
</tr>
<tr>
<td>Fakultas</td>
<td>
<select size="1">
<option>Fakultas Ilmu Komputer
<option>Fakultas Keguruan & Pendidikan
<option>Fakultas Kehutanan
<option>Fakultas Ekonomi
<option>Fakultas Hukum
</select>
</td>
</tr>
<tr>
<td>Motto</td>
<td>
<textarea rows="3" cols="25"></textarea>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="Simpan">
<input type="reset" value="Reset">
<input type="button" value="Keluar">
</td>
</tr>
</table>
</form>
</body>
</html>


Hasilnya Seperti Berikut :

Penjelasan :
  • Checked - Untuk checkboxes dan radio button, atribut ini dapat di set ke TRUE (checked) atau FALSE (unchecked).
  • Type = ”Radio” - Fungsi ini menyerupai checkbox control, tetapi hanya satu option button dari group yang dapat dipilih setiap saat. Pilih Ya atau Tidak. Bentuk dari type radio yaitu Bulat.
  • Checkbox adalah kontrol sederhana TRUE/ FALSE, yang mana kalau di check adalah TRUE, dan kosong menyatakan FALSE. Bentuk checkbox ialah KOTAK. Checkbox memiliki atribut :

  • Checked : memberi default check
  • Name :Nama dari control
  • Size :ukuran control
  • Type :<input type="checkbox">
  • Value :Untuk bemberi value ke input

  • ComboBox / List Box (Selection) - Tag <SELECT> digunakan untuk membuat component combo box. sementara untuk item dari combo box menggunakan tag <OPTION>. Selection memiliki atribut :
  • Name : Untuk memberi nama element
  •  Size : Untuk menentukan jumlah baris yang di tampilkan
  •  Multiple : Menentukan apakah user boleh memilih lebih dari satu option atau Tidak

  • TextArea diperlukan dalam pembuatan blog atau website saat membuat text atau tulisan di dalam box. Hasil penulisan text di dalam Textarea tersebut akan ditulis tanpa merubah ukuran dari texarea itu sendiri (sebelumnya char width (cols) dan rows didefinisikan terlebih dahulu). Apabila text yang ditulis melebihi kapasitas ukuran textarea, maka textarea tersebut akan otomatis membuat scrollbar di sebelah kanan. Untuk membuat textarea gunakan tag  <textarea>......</textarea>. Text Area memiliki atribut:
  • cols : Lebar dari text area
  •  rows : Jumlah baris
  •  Name : Nama dari control
  • Size : Ukuran control

Semoga Bermanfaat ;)



8 comments for "Membuat Tabel Form Dengan HTML"

  1. wah lengkap banget mas jadi mudah belajarnya thx ya

    ReplyDelete
  2. Thanks infonya gan...

    Bagi agan yang berminat belajar membuat web bisa dilihat di situs beriku ini http://www.computer-course-center.com/web-design.html

    ReplyDelete
  3. gan,
    itu kan tabel. input.
    kalo tabel yg isian tabel input gimana carabuatnya? mohon infonya gan

    ReplyDelete
  4. Bagus gan artikelnya, sangat membantu saya dalam membuat form dengan HTML. Jadi Proses Pembelajaran saya lebih mudah untuk dimengerti. Thanks gan atas ilmunya, semoga dapat membuat karya yang bermanfaat untuk kedepannya. Perkenalkan Nama Saya Lois Pratama, dan kunjungi juga website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  5. Membuat Tabel Form Dengan Html - Acortz'08 Technology >>>>> Download Now

    >>>>> Download Full

    Membuat Tabel Form Dengan Html - Acortz'08 Technology >>>>> Download LINK

    >>>>> Download Now

    Membuat Tabel Form Dengan Html - Acortz'08 Technology >>>>> Download Full

    >>>>> Download LINK

    ReplyDelete
  6. Membuat Tabel Form Dengan Html - Acortz'08 Technology >>>>> Download Now

    >>>>> Download Full

    Membuat Tabel Form Dengan Html - Acortz'08 Technology >>>>> Download LINK

    >>>>> Download Now

    Membuat Tabel Form Dengan Html - Acortz'08 Technology >>>>> Download Full

    >>>>> Download LINK Je

    ReplyDelete