Cara Membuat Borang dalam HTML

Cara Membuat Borang dalam HTML

Pengumpulan data dari pengguna laman web boleh dilakukan dengan beberapa cara yang berbeza. Borang di laman web boleh mempunyai fungsi sederhana seperti melanggan pengguna ke buletin, atau tujuan yang lebih kompleks seperti bertindak sebagai borang permohonan pekerjaan.





Namun, satu perkara yang mempunyai kesamaan antara bentuk sederhana hingga kompleks ini adalah HTML dan lebih khusus lagi HTML teg.



Menggunakan Tag Borang

The tag adalah elemen HTML yang digunakan sebagai wadah untuk melampirkan elemen lain yang boleh dianggap sebagai blok bangunan untuk borang. Beberapa elemen asas ini merangkumi tag, yang tag, dan teg.





The tag mempunyai atribut penting yang menyumbang kepada fungsinya. Atribut ini disebut tindakan dan digunakan untuk mengidentifikasi file yang akan dimasukkan ke dalam data ke dalam formulir.

Menggunakan Contoh Tag





Contoh di atas menunjukkan cara menggunakan tag borang dalam projek anda. Salah satu cara utama adalah jika anda membuka tag borang anda harus ingat untuk menutupnya. Ini akan membuat struktur borang dan juga memastikan bahawa data yang dimasukkan ke dalam borang diproses dengan betul.



Menggunakan Tag

The tag digunakan untuk menerangkan data di setiap medan input dalam bentuk. Teg ini mempunyai untuk atribut, yang digunakan untuk meningkatkan fungsi borang.

Berkaitan: Penyunting HTML Dalam Talian Percuma Terbaik untuk Menguji Kod Anda



Sekiranya id yang diberikan ke medan input yang sesuai sepadan dengan untuk nilai dalam tag, maka medan input akan diserlahkan secara automatik apabila anda mengklik label.

Menggunakan Contoh Tag


First Name:

Dalam contoh di atas anda dapat melihat bahawa untuk atribut diberikan nilai nama keluarga . Oleh itu, jika anda membuat medan input dengan nama keluarga id, bidang ini akan diserlahkan setiap kali anda mengklik pada Pertama Nama label.



Menggunakan Tag

Dalam bentuk yang paling asas, tag boleh dilihat sebagai kotak teks. The tag menangkap data dari pengguna dan salah satu ciri yang lebih penting adalah menaip atribut. The menaip atribut menunjukkan jenis data yang dapat dikumpulkan oleh kotak teks ini.

Berkaitan: Cara Membuat Bentuk Bertumpuk di CSS

Terdapat beberapa nilai yang berbeza yang boleh anda tetapkan menaip atribut, tetapi beberapa yang lebih popular adalah seperti berikut.

  • Teks
  • Nombor
  • E-mel
  • Imej
  • Tarikh
  • Kotak pilihan
  • Radio
  • Kata Laluan

Menggunakan tag Contoh


First Name:

The tag dalam kod di atas mempunyai tiga sifat yang masing-masing mempunyai fungsi yang unik. The menaip atribut diberikan nilai teks yang bermaksud bahawa kotak teks hanya akan menerima watak.

The ID atribut adalah pengecam unik untuk kotak teks, dan penting kerana menyediakan akses ke elemen ini dari fail CSS. The nama atribut juga pengecam unik; namun, atribut name digunakan untuk berinteraksi dengan elemen dari sisi pelayan pembangunan.

The ID dan nama atribut biasanya diberikan nilai yang sama dengan yang memberikan akses ke elemen dari sisi klien dan yang lain dari sisi pelayan.

Menggunakan Elemen Kotak Centang

Elemen kotak pilihan sangat unik berbanding dengan elemen lain yang boleh anda gunakan dengan teg. Ini membolehkan pengguna memilih satu atau lebih pilihan dari senarai pilihan yang berkaitan. Kotak centang mudah dikenali kerana dilambangkan oleh kotak persegi kecil yang berisi tanda centang ketika dipilih.

Menggunakan Contoh Elemen Kotak Centang


Programming Languages:
Java
JavaScript
Python

Dalam contoh di atas, setiap elemen kotak centang mempunyai atribut nilai, dan ini penting kerana ia membantu membezakan setiap pilihan kotak pilihan dari koleksi. Oleh itu, jika pengguna memilih 'Java' dari pilihan di atas, data akan menggambarkannya.

Menggunakan Teg dan Elemen Radio

The tag dan elemen radio serupa dalam arti bahawa ia hanya membenarkan pengguna memilih satu nilai pada satu masa; oleh itu, seseorang boleh mengatakan bahawa mereka mempunyai fungsi yang sama. Walau bagaimanapun, penampilannya sangat berbeza.

Elemen radio lebih dekat dengan elemen kotak pilihan, namun dengan elemen radio, anda mempunyai bulatan dan bukannya kotak.

The tag menghasilkan apa yang pada dasarnya adalah kotak lungsur, yang membolehkan pengguna memilih satu nilai.

Menggunakan Contoh Elemen Tag dan 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 Tarikh

Elemen tarikh menghasilkan kotak teks kecil yang menghasilkan kalendar apabila diklik. Menggunakan Tarikh sebagai jenis input dalam borang perlindungan anda terhadap pengguna yang berpotensi memasukkan tarikh yang salah, yang berpotensi menyebabkan pengumpulan data yang salah.

Menggunakan Contoh Elemen Tarikh


Menggunakan Elemen E-mel dan Kata Laluan

Apabila pembangun memberikan nilai e-mel atau kata laluan kepada atribut type of a tag, masing-masing menghasilkan kotak teks yang sama. Namun, apabila anda mula menggunakan kotak-kotak ini perbezaannya menjadi jelas.

Elemen e-mel memantau data yang dimasukkan ke dalam kotak teks dan memastikan bahawa setiap penyerahan memenuhi syarat standard alamat e-mel; yang bermaksud mempunyai bahagian tempatan, diikuti dengan simbol @, dan diakhiri dengan domain.

Menggunakan Contoh Elemen E-mel


Dalam contoh di atas, anda diperkenalkan dengan atribut baru yang dipanggil pemegang tempat , dan atribut ini mengambil nilai teks yang ditampilkan di kotak teks dengan warna kelabu pudar. Teks ini digunakan untuk menunjukkan data yang akan ditempatkan di kotak teks seperti yang dilihat pada contoh di atas.

Elemen kata laluan mengubah watak menjadi tanda bintang kerana mereka dimasukkan ke dalam kotak teks. Oleh itu, jika skrin komputer anda dapat dilihat oleh orang lain, mereka tidak akan melihat kata laluan yang anda masukkan.

Menggunakan Contoh Elemen Kata Laluan


Menggunakan Tombol Butang

Dalam bentuk, biasanya terdapat dua jenis butang. Yang pertama adalah butang kirim, yang mengirimkan data yang dimasukkan dalam bentuk ke nilai yang diberikan untuk atribut tindakan (yang terletak di < bentuk> teg).

Hantar Butang Contoh

Submit

Jenis butang kedua yang biasanya digunakan dalam bentuk adalah butang reset, yang membersihkan data dalam bentuk sehingga pengguna dapat memasukkan data baru. The tag mempunyai menaip atribut, yang digunakan untuk menunjukkan fungsi butang. Dalam contoh di atas menaip atribut ialah memberikan nilai serahkan , oleh itu, butang yang mempunyai menaip nilai tetapkan semula digunakan untuk menetapkan semula borang.

Tetapkan semula Contoh Butang

Reset

Membuat Borang

Untuk membuat bentuk ringkas dalam HTML, anda perlu memasukkan semua elemen yang disebutkan di atas dalam a teg.

Membuat Contoh Bentuk






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




Kod di atas akan menghasilkan bentuk berikut:

cara menambah kelas ke kalendar google

Kini Anda Boleh Membuat Bentuk Mudah dalam HTML

Artikel ini memberi anda semua alat untuk membuat bentuk HTML yang berfungsi. Ini mengenal pasti pelbagai tag HTML yang digunakan dalam pembuatan borang dan meneroka atribut yang berbeza yang dapat digunakan dengan tag ini.

Walau bagaimanapun, kebanyakan borang yang anda lihat di laman web mempunyai satu komponen tambahan; CSS, yang digunakan untuk menghidupkan bentuk dan menjadikannya lebih menyenangkan secara estetik.

Berkongsi Berkongsi Tweet E-mel Lembaran Menipu Properti CSS3 Yang Penting

Kuasai sintaks CSS penting dengan helaian cheat sifat CSS3 kami.

Baca Seterusnya Topik-topik yang berkaitan
  • Pengaturcaraan
  • HTML
  • Pembangunan Web
  • Tutorial Pengekodan
Mengenai Pengarang Kadeisha Kean(21 Artikel Diterbitkan)

Kadeisha Kean adalah Pembangun Perisian Penuh dan Penulis Teknikal / Teknologi. Dia mempunyai kemampuan berbeza untuk menyederhanakan beberapa konsep teknologi yang paling kompleks; menghasilkan bahan yang dapat difahami dengan mudah oleh mana-mana pemula teknologi. Dia minat menulis, mengembangkan perisian yang menarik, dan menjelajah dunia (melalui dokumentari).

Lagi Dari Kadeisha Kean

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan