Cara Membuat Formulir di HTML

Mengumpulkan data dari pengguna situs web dapat dilakukan dengan beberapa cara berbeda. Formulir di situs web dapat memiliki fungsi sederhana seperti berlangganan buletin pengguna, atau tujuan yang lebih kompleks seperti bertindak sebagai formulir lamaran kerja.

Namun, satu hal yang dimiliki oleh semua bentuk sederhana hingga kompleks ini adalah HTML dan lebih khusus lagi HTML menandai.

Menggunakan Tag Formulir

NS tag adalah elemen HTML yang digunakan sebagai wadah untuk melampirkan elemen lain yang dapat dianggap sebagai blok bangunan untuk formulir. Beberapa elemen dasar tersebut antara lain: tag, itu tag, dan menandai.

NS tag memiliki atribut penting yang berkontribusi pada fungsinya. Atribut ini disebut action dan digunakan untuk mengidentifikasi file dimana data yang dimasukkan ke dalam form akan diteruskan.

Menggunakan Contoh Tag

Contoh di atas menunjukkan cara menggunakan tag formulir di proyek Anda. Salah satu takeaways utama adalah bahwa jika Anda membuka tag formulir, Anda harus ingat untuk menutupnya. Ini akan membuat struktur formulir dan juga memastikan bahwa data yang dimasukkan ke dalam formulir diproses dengan benar.

Menggunakan Tag

NS tag digunakan untuk mendeskripsikan data pada setiap field input dalam sebuah form. Tag ini memiliki untuk atribut, yang digunakan untuk meningkatkan fungsionalitas formulir.

Terkait: Editor HTML Online Gratis Terbaik untuk Menguji Kode Anda

Jika id yang ditetapkan ke bidang input yang sesuai cocok dengan untuk nilai dalam tag, maka bidang input itu akan disorot secara otomatis ketika Anda mengklik label.

Menggunakan Contoh Tag

  
First Name:

Pada contoh di atas Anda dapat melihat bahwa untuk atribut diberi nilai nama-nama . Oleh karena itu, jika Anda membuat bidang input dengan nama-nama id, bidang ini akan disorot setiap kali Anda mengklik Pertama Nama label.

Menggunakan Tag

Dalam bentuknya yang paling dasar, tag dapat dilihat sebagai kotak teks. NS tag menangkap data dari pengguna dan salah satu fitur yang lebih penting adalah Tipe atribut. NS Tipe atribut menunjukkan tipe data yang dapat dikumpulkan oleh kotak teks ini.

Terkait: Cara Membuat Formulir Bertumpuk di CSS

Ada beberapa nilai berbeda yang dapat Anda tetapkan untuk Tipe atribut, tetapi beberapa yang lebih populer adalah sebagai berikut.

Teks
Nomor
Surel
Gambar
Tanggal
kotak centang
Radio
Kata sandi

Menggunakan tag Contoh

  
First Name:

NS tag pada kode di atas memiliki tiga atribut berbeda yang masing-masing memiliki fungsi unik. NS Tipe atribut diberi nilai teks yang berarti bahwa kotak teks hanya akan menerima karakter.

NS Indo atribut adalah pengidentifikasi unik untuk kotak teks, dan ini penting karena menyediakan akses ke elemen ini dari file CSS. NS nama atribut juga merupakan pengidentifikasi unik; namun, atribut name digunakan untuk berinteraksi dengan elemen dari sisi server pengembangan.

NS Indo dan nama atribut biasanya diberi nilai yang sama dengan yang satu menyediakan akses ke elemen dari sisi klien dan yang lainnya dari sisi server.

Menggunakan Elemen Kotak Centang

Elemen kotak centang sangat unik dibandingkan dengan elemen lain yang dapat Anda gunakan dengan menandai. Ini memungkinkan pengguna untuk memilih satu atau lebih opsi dari daftar pilihan terkait. Kotak centang mudah diidentifikasi karena diwakili oleh kotak persegi kecil yang berisi tanda centang saat dipilih.

Menggunakan Contoh Elemen Kotak Centang

  
Programming Languages:  
 Java  
 JavaScript  
 Python

Pada contoh di atas, setiap elemen kotak centang memiliki atribut nilai, dan ini penting karena membantu membedakan setiap opsi kotak centang dari koleksi. Oleh karena itu, jika pengguna memilih 'Java' dari opsi di atas, data akan mencerminkan hal itu.

Menggunakan Tag dan Elemen Radio

NS tag dan elemen radio serupa dalam arti bahwa mereka hanya mengizinkan pengguna untuk memilih satu nilai pada satu waktu; oleh karena itu, dapat dikatakan bahwa mereka memiliki fungsi yang sama. Namun, mereka sangat berbeda dalam penampilan.

Elemen radio lebih dekat ke elemen kotak centang dalam penampilan, namun, dengan elemen radio Anda memiliki lingkaran, bukan kotak.

NS tag menghasilkan apa yang pada dasarnya adalah kotak drop-down, yang memungkinkan pengguna untuk memilih satu nilai.

Menggunakan Contoh Tag dan Elemen Radio

  
Sex:  
  
Male  
Female  
Other  
  
  
Positions Available:  
  value='Junior Developer'> Junior Developer  
  value='Mid-level Developer'> Mid-level Developer  
  value='Senior Developer'> Senior Developer

Menggunakan Elemen Tanggal

Elemen tanggal menghasilkan kotak teks kecil yang menghasilkan kalender saat diklik. Menggunakan tanggal sebagai jenis input dalam formulir Anda, perlindungan terhadap pengguna yang berpotensi memasukkan tanggal yang salah, yang berpotensi menyebabkan pengumpulan data yang salah.

Menggunakan Contoh Elemen Tanggal

Menggunakan Elemen Email dan Kata Sandi

Saat pengembang menetapkan nilai email atau kata sandi ke atribut type dari sebuah tag, mereka masing-masing menghasilkan kotak teks yang identik. Namun, ketika Anda mulai menggunakan kotak-kotak ini, perbedaannya menjadi jelas.

Elemen email memantau data yang dimasukkan ke dalam kotak teks dan memastikan bahwa setiap pengiriman memenuhi persyaratan standar alamat email; yang berarti memiliki bagian lokal, diikuti dengan simbol @, dan diakhiri dengan domain.

Menggunakan Contoh Elemen Email

Dalam contoh di atas Anda diperkenalkan ke atribut baru yang disebut tempat penampung , dan atribut ini mengambil nilai teks yang ditampilkan di kotak teks dalam warna abu-abu pudar. Teks ini digunakan untuk menunjukkan data yang akan ditempatkan di kotak teks seperti yang terlihat pada contoh di atas.

Elemen kata sandi mengubah karakter menjadi tanda bintang saat dimasukkan ke dalam kotak teks. Oleh karena itu, jika layar komputer Anda terlihat oleh orang lain, mereka tidak akan melihat kata sandi yang Anda masukkan.

Menggunakan Contoh Elemen Kata Sandi

Menggunakan Tag Tombol

Dalam sebuah form, biasanya terdapat dua jenis tombol yang berbeda. Yang pertama adalah tombol kirim, yang mengirimkan data yang dimasukkan dalam formulir ke nilai yang ditetapkan ke atribut tindakan (yang terletak di < bentuk> menandai).

Contoh Tombol Kirim

Submit

Jenis tombol kedua yang biasanya digunakan dalam formulir adalah tombol reset, yang menghapus data dalam formulir sehingga pengguna dapat memasukkan data baru. NS tag memiliki Tipe atribut, yang digunakan untuk menunjukkan fungsi tombol. Pada contoh di atas Tipe atribut adalah menetapkan nilai Kirimkan , oleh karena itu, tombol yang memiliki Tipe Nilai dari mengatur ulang digunakan untuk mereset formulir.

Contoh Tombol Reset

Reset

Membuat Formulir

Untuk membuat formulir sederhana dalam HTML, Anda harus menyertakan semua elemen yang disebutkan di atas dalam a menandai.

Membuat Contoh Formulir

  
  
  
  
  
Forms  
  
  
  
  
  
  
  
  
First Name:  
  
Last Name:  
  
  
  
  
Date of birth:  
  
Age:  
  
  
  
  
Gender:  
  
Male  
Female  
Other  
  
Email Address:  
  
  
  
  
Positions Available:  
  value='Junior Developer'> Junior Developer  
  value='Mid-level Developer'> Mid-level Developer  
  value='Senior Developer'> Senior Developer  
  
  
  
Programming Languages:  
 Java  
 JavaScript  
 Python  
  
  
  
Password:  
  
Confirm Password:  
  
  
  
Submit  
Reset

Kode di atas akan menghasilkan form berikut:

windows 10 disk pada 100%

Sekarang Anda Dapat Membuat Formulir Sederhana dalam HTML

Artikel ini memberi Anda semua alat untuk membuat formulir HTML fungsional. Ini mengidentifikasi tag HTML berbeda yang digunakan dalam pembuatan formulir dan mengeksplorasi atribut berbeda yang dapat digunakan dengan tag ini.

Namun, sebagian besar formulir yang Anda lihat di situs web memiliki satu komponen tambahan; CSS, yang digunakan untuk menghidupkan bentuk dan membuatnya lebih estetis.

Membagikan Membagikan Menciak Surel Lembar Cheat Properti CSS3 Esensial

Kuasai sintaks CSS penting dengan lembar contekan properti CSS3 kami.

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
HTML
Pengembangan web
Tutorial Pengkodean

Tentang Penulis Kadeisha Kean(21 Artikel Diterbitkan)

Kadeisha Kean adalah Pengembang Perangkat Lunak Full-Stack dan Penulis Teknis/Teknologi. Dia memiliki kemampuan yang berbeda untuk menyederhanakan beberapa konsep teknologi yang paling kompleks; menghasilkan materi yang dapat dengan mudah dipahami oleh setiap pemula teknologi. Dia bersemangat menulis, mengembangkan perangkat lunak yang menarik, dan berkeliling dunia (melalui film dokumenter).

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan