Panduan langkah demi langkah untuk memulakan dengan borang HTML

Borang HTML

Gambaran keseluruhan

Borang HTML diperlukan apabila anda ingin mengumpul beberapa data dari orang yang melawat tapak web anda. Sebagai contoh, apabila anda mendaftarkan / login untuk aplikasi seperti Uber, Netflix, atau Facebook, anda memasukkan maklumat seperti Nama, E-mel, dan Kata Laluan melalui borang HTML.

Sekarang kita akan mempelajari semua elemen yang diperlukan untuk membuat borang.

NOTA: Saya telah menambah Styling menggunakan CSS dan jadi elemen saya akan kelihatan berbeza, tetapi mereka akan bekerja dengan cara yang sama.
Sekiranya anda ingin membuat unsur-unsur anda kelihatan seperti saya, anda boleh mencari fail CSS saya dalam pautan yang diberikan di bawah:
CSS tersuai: https://gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751
Normalisasi CSS:
https://gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Borang Elemen

Ini adalah elemen pertama yang akan kita pelajari. Elemen ini membungkus semua elemen lain yang masuk ke dalam borang kami. Ini adalah elemen bentuk.

Borang kami tidak akan menghantar data di mana-mana kerana ia tidak disambungkan ke pelayan. Untuk menyambung borang kami ke pelayan dan memproses data kami, kami boleh menggunakan mana-mana bahasa sisi pelayan seperti Node, Python, Ruby, atau PHP. Bahagian pemprosesan data melibatkan dua sifat penting yang dilampirkan pada elemen bentuk. Mari kita lihat atribut tersebut.

Atribut:

  1. tindakan: Atribut aksi adalah alamat web (URL) dari suatu program yang memproses maklumat yang dikemukakan oleh borang kami.
  2. kaedah: Ini adalah kaedah HTTP yang digunakan penyemak imbas untuk menyerahkan borang, nilai yang mungkin adalah POST dan GET.
  • POST - Data dari bentuk borang dihantar ke pelayan.
  • GET - Data dihantar di dalam URL dan parameter dipisahkan dengan tanda tanya.
Nota: Anda tidak boleh mempunyai borang bersarang di dalam bentuk lain. Ini bermakna anda tidak boleh mempunyai elemen
di dalam elemen yang lain.

Elemen Input

Elemen input adalah elemen bentuk yang paling biasa digunakan. Ia digunakan untuk membuat medan teks di mana pengguna boleh menaip beberapa maklumat misalnya e-mel, kata laluan dan sebagainya.

Mari buat bidang teks di mana pengguna boleh menaip namanya.

Nota: Elemen input ialah tag penutup diri, jadi tidak perlu menaip teg penutup untuk menyesuaikan tag pembuka.

Saya telah menambah tiga atribut dalam tag input di atas. Mari lihat setiap satu secara terperinci.

jenis

Atribut jenis menunjukkan jenis input yang kami mahu. Jika kita memberi nilai teks kepada atribut jenis, daripada yang kita maksud di sini ialah nilai yang kita masukkan ke dalam medan input adalah jenis teks. Terdapat banyak nilai yang mungkin untuk sifat khusus ini. Sesetengah nilai yang mungkin adalah e-mel, tel untuk telefon dan kata laluan dll.

Contoh: Apabila anda log masuk ke mana-mana akaun anda (Amazon / Netflix), anda perlu memasukkan dua perkara: email dan kata laluan. Jadi dalam kes ini, elemen masukan digunakan. Atribut jenis diberikan dengan nilai e-mel dan kata laluan masing-masing.

ID

Atribut ID tidak wajib, tetapi adalah idea yang baik untuk menambah satu. Dalam sesetengah kes, ini berguna untuk menyasarkan elemen dengan CSS / JavaScript. Atribut ID ditambahkan supaya kita boleh mengaitkan label ke kawalan bentuk tertentu.

nama

Atribut nama diperlukan. Apabila borang dihantar ke kod sisi pelayan, pelayan dapat memahami data bentuk dan memproses nilai-nilai yang sesuai.

pemegang tempat

Ia adalah petunjuk pendek yang dipaparkan dalam medan input sebelum pengguna memasuki nilai. Apabila pengguna mula menaip dalam medan input placeholder akan hilang.

Mari lihat apa beberapa unsur input asas yang lain kelihatan seperti.

Nota: Menggunakan nilai yang berbeza untuk atribut jenis akan menghasilkan hasil yang berbeza. Sebagai contoh, anda boleh membuat input daripada jenis e-mel, teks, atau kata laluan dan lain-lain. Semua ini menunjukkan tingkah laku yang sedikit berbeza, yang akan anda lihat di bawah.

Elemen Input Berbilang (Teks, E-mel, Kata Laluan)

Unsur Input Pelbagai (Teks, E-mel, Kata Laluan)

Unsur input tanpa pemegang tempat (Kiri) & dengan pemegang tempat (Kanan) atribut

Elemen Textarea

Kadang-kadang satu baris teks tidak mencukupi dan unsur input mudah tidak akan berfungsi. Sebagai contoh, sesetengah laman web mempunyai borang hubungan untuk orang menaip pertanyaan atau mesej mereka. Dalam kes ini, lebih baik menggunakan elemen textarea.