Untuk atribut action, kita dapat mengisinya dengan alaman URL dari endpoint yang akan memproses form.
Secara sederhana,—pada contoh di atas— kita akan menyuruh file
Ini nanti akan kita pelajari pada PHP.
Kode HTML di atas, tidak akan menghasilkan apa-apa.
Karena kita belum membuat field-nya.
Apa itu Field?
Field adalah ruas yang dapat diisi dengan data.
Contoh field:
Field memiliki beberapa atribut yang harus diberikan:
1 merupakan type dari field.
2 merupakan nama dari field yang akan menjadi kunci dan variabel di dalam program.
Latihan: Membuat Form Login
Sebagai latihan, mari kita buat form login.
Pada form login, terdapat beberapa field dan elemen:
- Field untuk input username atau email;
- Field untuk input password;
- Checkbok untuk remember me;
- Tombol untuk login.
Berikut ini kodenya:
Form Login
Login
Username:
Password:
Remember me
Hasilnya:
Sekarang perhatikan!
Pada kode di atas, kita membuat empat buah filed:
- input
3 dengan tipe
4; - input
5 dengan tipe
5; - input
7 dengan tipe
8; - input
9 dengan tipe
9;
Lalu ketiga filed ini dibungkus ke dalam tag
Form Login
Login
Username:
Password:
Remember me
Nanti tag
Form Login
Login
Username:
Password:
Remember me
Di dalam tag
Form Login
Login
Username:
Password:
Remember me
Form Login
Login
Username:
Password:
Remember me
Lalu, perhatikan juga atirbut yang digunakan pada setiap field.
- Atribut
5 untuk menampilkan teks sementara [placeholder];Form Login Login Username: Password: Remember me - Atribut
6 untuk membreikan nilai default pada field.Form Login Login Username: Password: Remember me
Setiap field kita bungkus dalam tag
Form Login
Login
Username:
Password:
Remember me
Form Login
Login
Username:
Password:
Remember me
Latihan: Membuat Form Contact
Latihan Selanjutnya, kita akan membuat form contact. Form ini berfungsi untuk menghubungi atau kontak admin.
Silahakan ikuti kode berikut:
Contact Us
Contact
Name:
Subject:
Email:
Hasilnya:
Pada contoh di atas, kita memberikan
Form Login
Login
Username:
Password:
Remember me
Contact Us
Contact
Name:
Subject:
Email:
Coba saja isi dengan yang lain, lalu klik Send…maka akan muncul pesan peringatan.
Latihan: Membuat Form Register
Semakin banyak latihan, semakin bagus.
Berikutnya kita akan coba membuat form registrasi.
Form ini berisi field untuk:
- Input nama lengkap;
- Input username;
- Input email;
- Input password;
- Input jenis kelamin;
- Input Agama;
- Input Biografi.
- dsb.
Mari kita buat…
Registrasi
Registrasi
Nama:
Username:
Email:
Password:
Jenis kelamin:
Laki-laki
Perempuan
Agama:
Islam
Kristen
Hindu
Budha
Biografi:
Hasilnya:
Apa saja field baru yang ada di form tersebut?
- Field
1;Contact Us Contact Name: Subject: Email: - Field
2;Contact Us Contact Name: Subject: Email: - Field
3.Contact Us Contact Name: Subject: Email:
Apa bedanya
Contact Us
Contact
Name:
Subject:
Email:
Jika kita ingin agar pengunjung memilih salah satu, maka kita gunakan
Contact Us
Contact
Name:
Subject:
Email:
Tapi kalau kita ingin pengunjung memilih lebih dari satu, maka kita gunakan
Lalu untuk
Contact Us
Contact
Name:
Subject:
Email:
Contact Us
Contact
Name:
Subject:
Email:
Lalu untuk menginputkan teks yang panjang, kita gunakan tag
Registrasi
Registrasi
Nama:
Username:
Email:
Password:
Jenis kelamin:
Laki-laki
Perempuan
Agama:
Islam
Kristen
Hindu
Budha
Biografi:
Latihan: Membuat Form Tingkat Lanjut
Field-field di atas merupakan jenis field yang sering digunakan dalam pembuatan form.
Masih ada jenis field lagi yang belum kita coba, seperti
Registrasi
Registrasi
Nama:
Username:
Email:
Password:
Jenis kelamin:
Laki-laki
Perempuan
Agama:
Islam
Kristen
Hindu
Budha
Biografi:
Registrasi
Registrasi
Nama:
Username:
Email:
Password:
Jenis kelamin:
Laki-laki
Perempuan
Agama:
Islam
Kristen
Hindu
Budha
Biografi:
Registrasi
Registrasi
Nama:
Username:
Email:
Password:
Jenis kelamin:
Laki-laki
Perempuan
Agama:
Islam
Kristen
Hindu
Budha
Biografi:
Registrasi
Registrasi
Nama:
Username:
Email:
Password:
Jenis kelamin:
Laki-laki
Perempuan
Agama:
Islam
Kristen
Hindu
Budha
Biografi:
Registrasi
Registrasi
Nama:
Username:
Email:
Password:
Jenis kelamin:
Laki-laki
Perempuan
Agama:
Islam
Kristen
Hindu
Budha
Biografi:
Registrasi
Registrasi
Nama:
Username:
Email:
Password:
Jenis kelamin:
Laki-laki
Perempuan
Agama:
Islam
Kristen
Hindu
Budha
Biografi:
Mari kita coba beberapa:
Form HTML
Form
Alamat Web:
Tanggal Lahir:
Umur:
Hasilnya:
Apabila di browser anda tidak tampil kalender seperti di atas, coba gunakan browser versi terbaru.
Apa Selanjutnya?
Apa yang kita pelajari pada tutorial ini adalah tag dan field dasar—dan sering digunakan—dalam pembuatan form.
Masih terdapat banyak tipe field lagi yang belum kita coba. Seperti:
Registrasi
Registrasi
Nama:
Username:
Email:
Password:
Jenis kelamin:
Laki-laki
Perempuan
Agama:
Islam
Kristen
Hindu
Budha
Biografi:
Registrasi
Registrasi
Nama:
Username:
Email:
Password:
Jenis kelamin:
Laki-laki
Perempuan
Agama:
Islam
Kristen
Hindu
Budha
Biografi:
Registrasi
Registrasi
Nama:
Username:
Email:
Password:
Jenis kelamin:
Laki-laki
Perempuan
Agama:
Islam
Kristen
Hindu
Budha
Biografi: