BELAJAR HTML | Membuat Form di HTML

Hai teman teman , Selamat Datang kembali pada blog Awonapa JR ini, kemarin kita sudah membahas tentang BELAJAR HTML | CARA MEMBUAT SYMBOL ATAU KARAKTER KHUSUS DI HTML. Saya sakin teman teman semua sudah bisa menggunakan symbol teresbut karena itu sangat mudah hehe..

Baik Pada Kesempatan Kali ini kita akan membahas Cara Membuat Form pada HTML

Nah sebelum kita melanjutkan bahasan kita kali ini, maka sebelumnya kita akan memahami apa itu Form pada HTML.

Form Pada HTML

Pengertian Form HTML

Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima input dari pengunjung. Melalui form pengunjung sebuah halaman web dapat melakukan interaksi dengan web. Pengunjung dapat memasukan data melalui elemen-elemen input seperti textfield, checkbox, radio button, textarea, submit button, dropdown dan lain-lain. Selain itu pengunjung  juga dapat melakukan pemilihan data mengunakan elemen select list atau dengan istilah lain combo box atau drop-down list.

Form pada HTML adalah satu dari banyak cara untuk berinteraksi di sebuah website atau web app dengan pengguna (users). Dengan cara ini, pengguna dapat memasukkan (input) beberapa teks atau data/informasi yang dibutuhkan oleh pemilik website, kemudian diproses atau diterima oleh form tersebut, yang pada akhirnya dikirim ke server. Sering juga dapat menghasilkan keluaran (output) yang dihasilkan oleh server dan form secara bersamaan. Kadang data tesebut bisa diatur oleh form tanpa bantuan server.

Form tidak dapat berdiri sendiri, butuh berbagai elemen penyusun yang bisa juga disebut widget; seperti text fields (satu atau beberapa baris), label, select box, button, radio button, checkbox, datalist, option dan lain sebagainya. Kebanyakan masukan/input memerlukan label agar lebih jelas data apa yang harus kita masukkan.

Beberapa Elemen Yang Bekerja di Form

• fieldset: kumpulan atau koleksi input field yang memiliki tujuan yang sama
• legend: penjelasan tentang simbol atau elemen form, seperti label untuk fieldset
• label: penjelasan pada widget spesifik, label untuk input
• input: kontrol interaktif (interactive controls) dengan berbagai tipe atribut seperti:
• text
• number
• url
• email
• tel (telephone)
• password
• file
• range
• date
• time
• datetime
• button
• textarea: beberapa baris text input
• button: tombol aksi (action button) yang bisa diklik, untuk menginformasikan melakukan sesuatu selanjutnya
• select: select box atau combo box, kolom untuk memilih satu atau lebih nilai (value) yang sudah didefinisikan
• datalist: daftar dari data atau nilai yang telah diatur (list of preset data or values), biasanya juga untuk text field
• optgroup: kumpulan pilihan (options)
• option: pilihan yang dapat dipilih pengguna

Form dengan fieldset, legend, label, dan berbagai input

See the Pen
Form1 by Wahyu Pambudi (@wahyup)
on CodePen.

Form dengan label, input, dan beberapa daftar/list data

See the Pen
Form2 by Wahyu Pambudi (@wahyup)
on CodePen.

Form dengan radio button dan tombol Submit

See the Pen
form3 by Wahyu Pambudi (@wahyup)
on CodePen.

Nah teman teman itu lah contoh dari beberapa penggunaan Form pada HTML.
semoga bermanfaat yah, baik pada kesempatan kali ini akan saya cukupkan hehe.

Terimakasih sudah berkunjung.
Salam Semangat!!

Berbagi :