Form HTML digunakan untuk mengumpulkan data dari pengguna. Form dapat berisi berbagai jenis input seperti teks, tombol radio, daftar turun dan tombol submit. Tag <form> digunakan untuk membuat form HTML. Elemen <input> penting untuk mengambil informasi dari pengguna dan dapat berupa teks, kotak centang, tombol radio dan lainnya. Tabel HTML digunakan untuk menampilkan data secara terstruktur dalam baris dan kolom.

1. HTML FORM
NOVAL ASSEGAF, S. AB,
M. KOM, CICS

2. Pengertian Form
Form adalah sebuah elemen pada HTML untuk mengelola data dari input yang dilakukan oleh
user. Baik itu pada saat user memasukkan data pada kolom, memilih sesuatu dalam combo
box, drop dalam menu, memilih radio button, serta user dalam menekan sebuah tombol. Saat
ini hampir semua web memiliki form ini, kegunaannya beda – beda. Ada yang di sebut dengan
login form, form registrasi dan macam-macam kegunaanya tergantung fungsi yang akan
dibuat. Sebagai contoh form itu kita bisa lihat pada web facebook.com.

4. HTML Form digunakan untuk memberikan data ke
sebuah server. Sebuah HTML Form dapat memiliki input –
input element antara lain text field, checkbox, radio-button, submit
button dan lain-lain. Sebuah form juga dapat mengandung
select lists, textarea, fieldset, legend, dan element label. Tag
yang digunakan untuk membuat HTML Form adalah <form> .
HTML Form

5. KITA AKAN MEMBUAT HYPERLINK MENGGUNAKAN GAMBAR YANG
KITA BUAT MISALKAN SAYA AKAN MEMBUAT SEPERTI CODING DI
BAWAH INI
Tag yang digunakan untuk membuat HTML Form
adalah <form> .
T A G <FORM>

6. Hal yang terpenting dari element form adalah elemen <input> .
elemen <input> digunakan untuk mengambil informasi dari user.
Sebuah elemen input dapat dipakai dengan berbagai cara tergantung dari
tipe attributnya . Sebuah elemen input dapat berupa text field, checkbox,
password, radio button, submit button, dan lain - lain. Input type yang
secara umum digunakan antara lain
2 .1 .1 E L E ME N < I N P U T > H T M L FORMS
A. Text Field B. Password Field
D. Drop Down List /Combo box
C. Radio Button
E. Check box
F. Submit Button G. Text Area

7. A. Text Field
Input yang digunakan akan berupa kotak text
Hasil Dari Browser

8. Password field adalah kotak yang ketika anda menuliskan password disitu
maka huruf akan diganti dengan simbol lingkaran untuk melindungi tulisan
password yang diketik.
B. Password Field
syntax username dan password

9. Digunakan untuk memilih inputan hanya satu pilihan saja
Contoh: Jenis kelamin.
C. Radio button
Syntaxnya seperti di atas

10. hasil pada browser
Tata cara agar kedua radio tidak aktif semua maka dalam
pengodingan dalam kalian menuliskan dengan
menambahkan atribut name="nama variable".Kira – kira 2 radio
button ini nama grupnya apa misalnya kita kasih nama
jenis kelamin maka name=”jeniskelamin” pada button pria
dan wanita.

11. Contoh Syntax yang di tambah dengan atribut name
Sekrang salah satu saja yang aktif
radionya

12. D. Drop Down List /Combo box
Selanjutnya adalah drop down atau dalam html di sebut select. Sedikit berbeda dengan text input
sebelumnya. Jadi kita punya text select sebegai pembungkusnya <select></select> lalu didalamnya atau
pilihan – pilihannya kita memiliki text option kita bisa menulis sebanyak mungkin text option sesuai ada
berapa elemen yang mau kita isikan didalam drop downnya atau combo boxnya, biasanya di pilih
untuk kotak lahiran dan sebagainya. Kita akan coba buat combo box dengan nama
– nama kota di dalamnya syntaxnya sebagai berikut :
syntax drop down atau select

13. hasil yang ada pada browser

14. E. Check box
Perbedaan dengan radio button adalah dapat mencentang / memilih lebih dari satu pilihan .
Misalkan kita akan menambahkan hobby dengan tanda centang.
Hasilnya pada browser

15. <input type="submit"> mendefinisikan sebuah submit
button.
F. Submit Button
hasil syntax

16. G. Text Area
Text Area seperti text field namun bedanya adalah text area
dapat terdiri dari beberapa line/baris dan kolom
Syntax textarea
hasil dari browser

17. 2.2 HTML Tables
2.2.1 Pengertian Tabel
Tabel pada HTML di gunakan untuk menampilkan data yang tak bulat sama seperti
membuat tabel di microsoft word, atau exel, contohnya jika kalian membuat anggaran
biaya, kalender, score dalam pertandingan dan lain – lain. Jangan menggunakan table
nanti untuk membuat layout halaman. Jika nanti materi belajar mengenai CSS jangan
menggunakan tabel untuk sebuah halaman. Salah satu struktur tabel sederhana seperti
gambar dibawah ini :

18. Jika nanti memiliki tabel kotak kotak yg horizontal maka di sebut dengan baris. Sedangkan yang
vertikal maka di sebut dengan kolom. Dan jika per baris atau kolom itu disebut dengan
cell/data. Seperti keterangan tabel di bawah ini :

19. Salah satu contoh tabel yang kita miliki misalnya seperti ini:

20. Judul dari tiap-taip tabel disebut dengan header, header juga bisa memiliki 2
sumbu atas dan kiri tergantung fungsi yang kalian ingin kan, header yang horizontal
dan header vertikal seperti tabel di bawah ini :
Jadi jika kita ingin mengimplementasikan kedalam HTML maka codingnya seperti ini
<table></table>. Strukturnya terbagi 2 yaitu simple dan compleks

21. Struktur simple
Pertama kita masukkan dulu take table dulu dan kedua baru baris dengan kode <table> <tr> …..</tr></table>.
Kepanjangan dari tr adalah table row. Lalu di dalam tr tersebut kita masukkan kolom dengan kode<td></td> atau singkatan
dari table data. Jadi susnannya table dulu baru tr setelah itu baru td atau tabel data seperti contoh di bawah ini :
contoh syntax

22. hasil dari syntax
Hasilnya maka ada tulisan baris 1, kolom 1 baris 1, kolom 2, dan di bawahnya baris 1, kolom 1,
baris 1, kolom 2. J
adi tabel sudah terbuat. Tapi ini belum memiliki bordernya atau garisnya.
Dikarenakan belum kita masukkan atributnya pada tablenya nanti akan di bahas.

23. Biasanya digunakan jika datanya sudah banyak dan strukturnya memang sudah kompleks
syntacxnya seperti ini :
Struktur Complex

24. Coding ini sama-sama dibungkus dengan take <table></table> lalu di dalamnya di bagi 2
ada<thead></thead> atau head headernya, dan take <tbody></tbody> lalu didalamnya sama
dengan <tr> untuk membuat baris bedanya, tadi kita menggunakan td sekarng dan ini th atau
table header, ini sama – sama menyimpan data tapi htmlnya sudah membacanya sebagai
header. Karena html itu untuk menampilkan struktur halaman atau conten jadi harus mudah
dibaca browse dan manusia, browsenya membacanya ada header ada body headnya
mempunyai 3 buah kolom 1 baris. Lalu bodnya punya 2 buah baris dan masing masing
barisnya 3 kolom. Bodynya setiap baris memiliki th. Maka hasilnya akan seperti ini:

25. Hasilnya membuat header dalam 2 sumbu, tidak mesti memiliki 2 sumbu. Hasilnya seperti ini :
Sekarang kita akan memulai menambahkan border pada tabel tersebut agar terlihat sebagai
tabel itu nanti akan kita pelajari atribut apa saja yang bisa digunakan dalam table. Ada 5 atribut
Border, Cellspacing, Cellpadding Colspan, Rowspan tiga buah tulisan miring berfungsi di CSS

26. Border digunakan untuk menambahkan garis di sekitar cell. Contohnya seperti ini <table
border=”1”>keterangan kalau saya isi 1 maka pixelnya di berikan ketebalan 1 px. Dalam
syntaxnya kita tidak perlu menuliskan 1 cukup 1 saja.
A.Border
hasil syntax

27. Cellspacinguntuk menambah jarak untuk cell. Setelah border kita akan menambahkan
cellspacingnya <table border=”1” cellpacing=””> kita akan buat 2 buah yang 1 kita kosong dan
yang satunya kita isi 5 <table border=”1” cellpacing=”5”>.
b. Cellspacing

28. c. Cellpadding
Berfungsi memberikan luas pada sebuah cell. Syntaxnya <table border=”1” cellpacing=”0”
cellpadding=”5”> maka hasilnya
Gambar 10.9 hasil cellpadding=”5
Pada gambar 10.9 luas dari tiap – tiap cellnya bertambah jadi memberikan ibaranya ruang
nafas

29. Table Merging
a. Colspan
Colspan di gunakan untuk 2 buah atau lebih cell yang horizontal atau colom contoh table :
Tabel tersebut memilik 3 buah baris dan masing masing barisnya memiliki 3 buah kolom kalau
ditulis syntax htmlnya seperti gambar di slide selanjutnya

30. syntax table merging
hasil syntax di browse

31. Kita akan coba menggabungkan 2 buah kolom dibaris yang pertama yang hasilnya akan
seperti di bawah ini :
contoh penggabungkan 2 buah colom di baris
yang pertama

32. syntax colspan

33. Rowspan digunakan untuk menggabungkan 2 buah atau lebih cell yang vertikal atau row/baris.
Ini sedikit lebih sulit dari pada menggabungkan colom. Sedangkan untuk menggabungkan
baris kita harus cermat sebelum masuk ke html kita lihat dulu pada tabel berikut :
b. Rowspan

34. syntax penggabungan menggunakan rowspan