Saturday, September 21, 2013

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 ;)



5 comments:
Write comments
  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

Budayakan "Berkomentar" setelah mengunjungi artikel ini. Saran dan Komentar anda semoga dapat menjadi "Pelajaran & Motivasi" untuk menjadi lebih baik lagi !!
Komentar yang mengarah ke tindakan spam akan di hapus atau terjaring secara otomatis oleh spam filter.