Isi kandungan:
Video: Tutorial membuat form pendaftaran online dengan html dan css pada notepad++ 2025
Bentuk membenarkan anda menangkap input dari pengunjung laman web anda. Menangkap input dari pengunjung membolehkan anda mengubah suai kandungan sedia ada pada halaman. Sebagai contoh, penapis harga dan tarikh pada laman web syarikat penerbangan membolehkan mencari penerbangan yang dikehendaki dengan lebih cepat. Anda juga boleh menyimpan input untuk kegunaan kemudian.
Contohnya, laman web boleh menggunakan borang pendaftaran untuk mengumpulkan maklumat e-mel, nama pengguna, dan kata laluan anda untuk membolehkan anda mengaksesnya di kemudian hari.
Memahami bagaimana borang berfungsi
Borang lulus maklumat yang dimasukkan oleh pengguna ke pelayan dengan menggunakan proses berikut:
-
Penyemak imbas memaparkan borang pada mesin klien.
-
Pengguna melengkapkan borang dan menekan butang hantar.
-
Penyemak imbas menyerahkan data yang dikumpulkan dari borang kepada pelayan.
-
Server memproses dan menyimpan data dan menghantar respons kepada mesin klien.
-
Penyemak imbas memaparkan respons, biasanya menunjukkan sama ada penyerahan itu berjaya.
Buat masa ini, semua yang perlu anda ketahui adalah bahawa bahasa pengaturcaraan pelayan seperti Python, PHP, dan Ruby digunakan untuk menulis skrip yang menerima dan menyimpan borang penyertaan.
Borang sangat fleksibel, dan boleh merekodkan pelbagai input pengguna. Medan input yang digunakan dalam bentuk boleh termasuk medan teks percuma, butang radio, kotak centang, menu drop-down, slider pelbagai, tarikh, nombor telefon, dan banyak lagi. Di samping itu, medan input boleh ditetapkan ke nilai lalai awal tanpa sebarang input pengguna.
Nama Atribut | Nilai mungkin | Deskripsi |
---|---|---|
ketik | kotak semak
e-mel submit radio (senarai lengkap nilai telah ditinggalkan di sini untuk keringkasan) Menentukan jenis medan input untuk dipaparkan dalam bentuk. Untuk contoh |
, teks digunakan untuk medan teks percuma, dan penyerahan digunakan untuk
membuat butang penyerah. nilai |
teks | Nilai awal kawalan input. | Membuat borang asas |
Anda membuat borang asas dengan
Menentukan bentuk dengan elemen bentuk.
-
Mula dengan menambahkan tag pembuka dan tag tutup.
Menggunakan atribut tindakan, tentukan dalam bentuk borang di mana untuk menghantar data borang.
-
Tambahkan atribut tindakan pada tag pembuka anda dan tetapkannya sama dengan URL skrip yang akan memproses dan menyimpan input pengguna.
Menggunakan atribut kaedah, nyatakan dalam bentuk borang bagaimana untuk menghantar data borang.
-
Tambahkan atribut kaedah pada tag pembuka anda dan tetapkannya sama dengan POST.
Atribut kaedah ditetapkan sama dengan GET atau POST. Pada umumnya, POST digunakan untuk menyimpan maklumat sensitif (seperti nombor kad kredit), sedangkan GET digunakan untuk membolehkan pengguna membuat penanda buku atau berkongsi dengan orang lain hasil borang yang diserahkan (contohnya, senarai penerbangan syarikat penerbangan).
Memberi cara untuk pengguna memasukkan dan menghantar respons dengan elemen input.
-
Antara tag pembukaan dan penutup, buat satu tag.
Bentuk anda hanya akan mempunyai satu tag pembuka dan tutup; Walau bagaimanapun, anda akan mempunyai sekurang-kurangnya dua tag untuk mengumpul dan menghantar data pengguna.
Tentukan jenis input menggunakan atribut jenis dalam elemen input.
-
Untuk contoh ini, tetapkan atribut jenis yang sama dengan "teks".
Teg tidak mempunyai tag tutup, yang merupakan pengecualian kepada peraturan "menutup setiap teg yang anda buka". Tag ini dipanggil tag penutup diri.
Akhirnya, buat tag lain dan tetapkan atribut jenis yang sama dengan penyerahan.
-
Kod contoh berikut menunjukkan sintaks untuk membuat borang yang ditunjukkan.
Atribut aksi dalam bentuk ini ditetapkan sama dengan mailto, yang isyarat kepada penyemak imbas untuk menghantar e-mel menggunakan klien mel lalai anda (seperti Outlook atau Gmail). Jika penyemak imbas anda tidak dikonfigurasi untuk mengendalikan pautan e-mel, maka borang ini tidak akan berfungsi. Biasanya, borang dihantar ke pelayan untuk memproses dan menyimpan kandungan borang, tetapi dalam contoh ini borang kandungan dikemukakan kepada aplikasi e-mel pengguna.
