➢ Membuat Form
Form di HTML dikenal dengan adanya tag <FORM> dan ditutup dengan tag
</FORM>. Di dalam tag pembuka <FORM> diikuti dengan atribut action danmethod.
Pada atribut action menerangkan ke halaman yang akan digunakan pada proses input,
sedangkan method digunakan untukmengatur cara mem-parsing konten.
Pada halaman web akan menerima inputan dari user atau para pengunjung dengan
menggunakan metode GET dan POST. GET akan mengirimkan data bersama dengan
URL, sedangkan POST akan mengirimkannya secara terpisah. User mengirimkan data
input dengan mengisi teks atau pilihan pada attibut form html.
A. Elemen pada FORM
Tag ini terletak didalam blok tag form.
Atribut :
- Type (jenis input seperti text, checkbox, radio, hidden, button, submit, reset, file, image)
Unsur-unsur bentuk berbagai jenis elemen input, seperti text, password,
textarea, select, select multiple, checkbox, radio, file, submit / button, hidden. Dan ada
tipe input yang baru pada Pemrograman Web1 52 HTML5 yaikni: email, url, number,
date, month, week, time, range color berikut contoh penggunaan jenis inputan
- Name ( nama elemen )
- Value (nilai isian)
Input text dan password Digunakan untuk inputan berupa teks dan password
contohnya adalah form login, berikut contoh script inputan teks dan password
Berikut hasil script diatas
Penjelasan:
➢ Pada awalnya isian akan kosong karena tidak diberi nilai value untuk nilai pertama
maka isilah inputan username dan password
➢ Tag input tag type berfungsi untuk menentukan jenis inputan script diatas terdapat dua
tipe yaitu teks yang menghasilkan inputan teks untuk user name dan password untuk
tipe password yang ketika diisi maka inputan akan menjadi simbol bullet untuk
menutupi teks, dan yang terakhir adalah inputan bertipe tombol atau submit yang
berfungsi mengirim data
- Text Area, Select dan Select Multiple
Berikut adalah contoh penggunaan textarea, select dan select multiple
Hasil di browser:
Penjelasan:
➢ Tag text area berbeda dengan jenis tag input type dimana elemen berada ditengah tag
pembuka dan tag penutup text area tidak pada value
➢ Tag select berfungsi untuk menampilkan banyak pilihan dan akan tampil pilihan ketika
di klik panah sebelah kanan textbox/ isian hobi, pada kali ini otomatis nilai pertama
sepekbola dikarenakan option sepakbola di beri atribut selected
➢ Tag select multiple berfungsi untuk menampilkan banyak pilihan sama halnya dengan
tag select perbedaannya adalah tag select multiple langsung menampilkan semua
pilihan/option.
- Checkbox, Radio Button dan File
Ketiga jenis inputan ini menggunakan tag input juga hanya saja type nya yang
diganti berikut contoh penggunaan tag checkbox, radio button dan file
Hasil di browser:
- Inputan baru pada HTML 5
Inputan baru pada HTML 5 yaitu email, url, number, date, month, week, time, range
color, berikut contoh script penggunaan 8 tipe inputan tersebut
Hasil di browser
Penjelasan:
➢ Pada inputan type email mengharuskan kita untuk mengisi textbox tersebut dengan
format email jika bukan format email yang kita masukan maka ketika menekan tombol
submit maka textbox tersebut akan memberikan pesan agar texbox tersebut di isi
dengan format email, begitu juga untuk format url dan number
➢ pada type date, month, week dan time ketika di klik maka akan muncul format sesuai
type yang dipilih
TUGAS
Buatlah form biodata seperti dibawah ini Semua elemen pada script berada di dalam
sebuah tabel sehingga setiap tag bisa rapi dan lurus ke bawah dan ke samping.
