BELAJAR HTML | Menambah Attribute Label, Id, Checkbox dan Radio Pada HTML

Hai Selamat Datang Kembali Teman-Teman Semua, okee pada kesempatan ini kita akan melanjutkan tentang pembahasan Form Lebih Jauh.

Jika Kemarin Kita sudah membahas Bagaimana cara membuat Form. Maka kali ini kita akan melanjutkan untuk membahas Menambah Attribute Label, Id, Serta Penggunaan Checkbox dan Radio Pada HTML.

Attribute Label, Id, Checkbox, Radio HTML

Kita akan mengulas sedikit tentang Form yang kita pelajari kemarin.

Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima input dari pengunjung. Pengunjung dapat memasukan data melalui elemen-elemen input seperti textfield, checkbox, radio button, textarea, submit button, dropdown dan lain-lain. 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. 

Jadi apa disini bisa kita sebut bahwa Form itu adalah Mahluk Sosial? Yang pasti membutuhkan bantuan sesama nya.  hehe nggak guys?

Oke jadi setelah mengulas kembali, kita akan membuat form dengan tambahan Attribute Label, Id, juga Membuat Checkbox dan Radio.

Sebelumnya pada postingan materi tentang cara Membuat Form, Sudah di masukan tentang Label, radio, dan tombol submit. Namun disini kita akan mengulas nya lebih jelas. InsyaAllah

BELAJAR HTML | CARA MEMBUAT FORM PALING MUDAH PADA HTML.

Melatih Form Menggunakan Label dan Id

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

Jika teman teman lihat bagaimana cara penggunaan dari source code diatas, maka seperti ini.
Pada contoh diatas, kita tidak hanya menggunakan Label dan Id saja melainkan dengan tambahan Fieldset, Legend, dan Menggunakan berbagai Input, seperti Email, Tel, Text.

Yang harus teman teman perhatikan adalah..

Bahwa pada <label for="email"> Email </label> dan <input placeholder="Email" id="email" name="email" type="email">

(pada text yang berwarna kuning itu harus sama, dan efeknya adalah ketika teman teman meng Klik Email, maka kita akan langsung diarahkan untuk menulis email kita di dalam input tersebut.)
(untuk teks yang berwarna hijau itu adalah Type , pada postingan sebelumnya juga sudah di beritahu)

Disitu juga saya menambahkan Attribute Placeholder. guna nya adalah untuk menulis bayang bayang di dalam input, agar user lebih jelas.

Melatih Form Menggunakan Label Input dan beberapa list data

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

Nah untuk penggunaan yang diatas kita menggunakan

• datalist: daftar dari data atau nilai yang telah diatur, digunakan untuk merepresentasikan daftar opsi (pilihan) yang diberikan pada sebuah input control.
• option: pilihan yang dapat dipilih pengguna.

Hampir sama dengan yang Label & Id. Disini kita menggunakan Attribute List, Value.

Melatih Form Dengan Radio dan Tombol Submit

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

• Dan pada Penggunaan Radio di Form, seperti hasil dari sc diatas terdapat 2 type. Yaitu Radio dan Checkbox. Perbedaan nya hanya pada pemilihan nya, Jika pada Checkbox kita dapat memilih lebih dari satu. Tetapi pada Radio kita hanya boleh memilih 1 Pilihan.
• Coba teman teman lihat lagi, pada bagian selanjutnya kita menggunakan Tombol Submit, disitu kita menggunakan type = "submit"

Nah itulah hasil dari sharing kita pada kesempatan kali ini, nggak sulit kan yah, cuma butuh pemahaman dan percobaan kok.

Oke teman teman mungkin cukup jelas ya, semoga bermanfaat untuk teman teman semua.

Salam Semangat!!

Berbagi :