Apa itu formulir?
Bentuk dalam HTML adalah cara penting bagi halaman HTML untuk berinteraksi dengan browser. Menggunakan formulir, server dapat mengumpulkan informasi yang relevan yang dikirimkan oleh browser klien, seperti kata sandi yang dimasukkan, dll. Saat menjelajahi situs web, kami sering menemukan formulir. Mereka adalah bagian penting dari fungsi interaktif antara server dan browser. Interaksi di sini berarti proses pertukaran data satu sama lain, seperti mengirimkan kata sandi yang kami masukkan secara lokal ke server. Apa pun bentuk bahasa yang digunakan situs web untuk mengimplementasikan fungsi interaktif dari situs web, seperti ASP, PHP, JSP, dll., Formulir kini telah menjadi metode pengumpulan informasi terpadu mereka.
Fungsi utama suatu formulir adalah mengumpulkan informasi, khususnya informasi penampil. Misalnya, jika Anda melamar email secara online, Anda harus mengisi halaman formulir yang disediakan oleh Situs Web sebagaimana diperlukan, yang terutama mencakup informasi pribadi seperti nama, usia, informasi kontak, dll. Misalnya, jika Anda ingin berbicara di forum, Anda harus melamar kualifikasi sebelum berbicara, dan Anda harus mengisi halaman formulir. Tentu saja, formulirnya tidak terlihat tanpa melihat kode sumber, dan pengguna tidak dapat merasa bahwa formulir itu ada.
Formulir biasanya dapat digunakan untuk survei, pemesanan, pencarian, dan fungsi lainnya. Secara umum, bentuk terdiri dari dua bagian. Salah satunya adalah kode sumber HTML yang menjelaskan elemen formulir. Di browser, kita dapat menemukan bagian ini melalui kode sumber. Yang kedua adalah skrip klien, atau program yang digunakan oleh server untuk memproses pengisian pengguna. Di sini, ini terutama memproses data yang dikumpulkan. Misalnya, kata sandi yang diperoleh dalam contoh di atas, harus dikirim ke server untuk memverifikasi apakah kata sandi benar. Jika itu benar, itu akan masuk, dan jika bebas dari kesalahan, itu tidak akan masuk. Ini adalah proses pemrosesan. Dalam HTML, kita dapat mendefinisikan formulir dan bekerja sama dengan penangan formulir dalam bahasa skrip sisi server seperti ASP dan PHP. Proses pemrosesan informasi formulir adalah: Ketika kami mengklik tombol yang dikirimkan dalam formulir, informasi yang dimasukkan dalam formulir akan ditransfer ke server, dan kemudian diproses oleh aplikasi yang relevan server. Setelah pemrosesan, simpan informasi yang dikirimkan oleh pengguna di database server, atau kembalikan informasi yang relevan ke browser klien. Mari kita lihat lebih dekat pada berbagai titik pengetahuan formulir.
1. Formulir Tag <orm>
Suatu formulir ada di area tertentu di halaman web, ditentukan dan diidentifikasi oleh sepasang tag <dorm>. <Ecrom> Tag memiliki dua fungsi utama di halaman web.
Pertama, Anda dapat mendefinisikan ruang lingkup fungsi bentuknya, dan tanda objek bentuk lainnya harus dimasukkan ke dalam bentuk. Misalnya, ketika kami mengklik tombol Kirim, kami mengirimkan konten dalam ruang lingkup formulir, dan konten di luar formulir tidak akan dikirimkan.
Kedua, berisi informasi yang relevan dari formulir itu sendiri, seperti lokasi program skrip yang memproses formulir, metode mengirimkan formulir, dll. Sintaks dasar dan sintaks formulir dijelaskan sebagai berikut.
Sintaks Dasar:
<Form name = Form_name Metode = Metode Tindakan = URL Enctype = Nilai Target = Target_Win> ............ </form>
Penjelasan sintaks adalah sebagai berikut:
milik | menggambarkan |
NAMA | Nama formulir |
METODE | Tentukan metode mentransfer formulir dari browser ke server, umumnya menggunakan dua metode: dapatkan dan posting |
TINDAKAN | Tentukan lokasi penangan bentuk, ada dua jenis: jalur absolut dan jalur relatif. |
Enctype | Atur metode pengkodean formulir |
TARGET | Atur metode tampilan informasi pengembalian |
Di antara atribut, nama, metode, dan tindakan di atas adalah yang paling umum digunakan dan juga merupakan dasar untuk analisis program skrip. Mereka dijelaskan dan dijelaskan secara rinci di bawah ini. 1. Sintaks dasar atribut nama dari tag <sorm> adalah: <form name = form_name> ……………………… <Torm> melalui nama formulir, Anda dapat mengontrol hubungan antara formulir dan penangan server, dan menggunakan nama untuk menentukan pengidentifikasi pemrosesan program di server.
2. Alamat ini bisa menjadi jalur absolut, jalur relatif, atau alamat email.
Misalnya: <bentuk nama = mailaction = mailto: [email protected]>
3. Sintaks dasar dari atribut MTHOD dari tag <dorm> adalah: <form mthod = Method> ……………… <Form> Ada dua metode untuk dipilih dari mthod, satu dapatkan dan yang lainnya adalah posting. Saat mengirimkan data melalui metode GET, semua konten dalam formulir akan ditambahkan setelah alamat URL, dipisahkan oleh tanda tanya. Format data yang lewat adalah name = nilai. Nama adalah nama data yang akan dilewati, dan nilainya adalah nilai yang akan dilewati. Ketika ada beberapa nilai yang akan diteruskan, beberapa nilai dapat dipisahkan oleh simbol &. Misalnya http: //localhost/haha/haha.asp? Name1 = value1 & name2 = value2. Karena data ini berada di belakang alamat URL, panjang informasi yang dikirim terbatas dan tidak dapat melebihi 8192 karakter. Metode yang paling umum digunakan adalah metode posting. Metode ini berisi data yang diisi oleh pengguna di badan formulir dan menyerahkannya ke penangan server bersama -sama. Oleh karena itu, tidak ada batas ukuran untuk metode ini. Ketika tidak menentukan metode mana, default adalah metode GET. Setelah mendefinisikan tag Formulir <Form>, Anda dapat menambahkan tag untuk kode yang melengkapi fungsi tertentu. Ada 4 tag yang dapat dimasukkan dalam bentuk, seperti yang ditunjukkan pada tabel berikut
tanda | menggambarkan |
<Input> | Bentuk tag input |
<CILECT> | Menu dan daftar tag |
<pect> | Menu dan daftar tag item |
<Textarea> | Penanda domain teks |
Dalam kode HTML, organisasi mereka adalah sebagai berikut
<Men form> <Tinput> …………… </input> <TextArea> …………… </ptextarea> <decter> <pect option> ………… </tiption> </tect> </form>
Untuk tag di atas, dua teknologi peretasan skrip yang paling sering harus <Perton> dan <TextArea>. Mari kita jelaskan kedua tag ini secara detail di bawah ini. 2. Tag Input <Input Tag> Tag Input <Tinput> adalah salah satu tag yang paling umum digunakan dalam bentuk. Bidang teks dan tombol yang biasa kita gunakan di halaman web semuanya digunakan. Sintaks dasar adalah sebagai berikut:
<sorm> <input name = field_name type = type_name> </form>
Di mana nama adalah nama domain dan jenisnya adalah jenis domain. Mungkin ada banyak nilai properti di properti Type. Di antara mereka, yang umum digunakan dan terkait erat dengan teknologi peretasan adalah: teks, kata sandi, file, tombol, kirim, reset, disembunyikan. 1. Teks teks domain
Nilai atribut teks digunakan untuk mengatur area teks dari formulir dan memasukkan semua jenis teks, angka, dan huruf. Data input ditampilkan dalam satu baris. Mungkin sulit bagi semua orang untuk memahami hal ini. Saya akan memberi Anda contoh untuk mengilustrasikannya nanti. Pertama, lihatlah tata bahasa dan penjelasan tata bahasa dasarnya. Sintaks Dasar: <Input Tipe = Nama Teks = Field_name Maxlength = Nilai Ukuran = Nilai Nilai = Field_Value> Interpretasi Sintaks: Penjelasan ini ditunjukkan pada tabel berikut
Atribut Domain Teks | menggambarkan |
NAMA | Nama Bidang Teks |
Maxlength | Jumlah maksimum karakter input di bidang teks |
UKURAN | Lebar bidang teks (dalam karakter) |
NILAI | Nilai default untuk bidang teks |
Ini adalah beberapa pengetahuan dasar dari domain teks. Banyak teman mungkin masih belum memahaminya. Mari kita tulis contoh untuk mengilustrasikan kode di bawah ini:
<html> <head> <title> masukkan domain teks </ title> </ head> <body> survei pengguna <bentuk tindakan = mailto: [email protected] Metode = get name = haha> <!-menulis formulir untuk terhubung sebagai alamat email, namanya adalah namanya a nameer = name a name, name a name a name, name a name, a name a name a name name a name name a name a name a name a name a name a name a name a name a name a name a name a name a name a name a name 20-> Situs web: <input type = nama teks = URL ukuran = 20 maxlength = 50 value = http: /// <!-Menulis domain teks dengan URL nama, lebar adalah 20, dan panjang input maksimum adalah 50 nilai default adalah http: //-> </from> </body> </html>
Setelah menulis kode, kami mengubah nama akhiran menjadi HTML dan menjalankannya. Seperti yang ditunjukkan pada (Gambar 1). Untuk foto -foto seperti itu, saya percaya bahwa semua teman yang dapat menjelajahi internet seharusnya melihatnya.
(Gambar 1)
2. Kata Sandi Kata Sandi Kata SandiSaat kami online, misalnya, jika kami masuk ke alamat email, kami harus memasukkan kata sandi. Kotak input untuk memasukkan kata sandi disebut domain kata sandi, yang merupakan bentuk lain dari domain teks. Fungsinya adalah bahwa semua artikel yang dimasukkan ke dalam bidang teks ditampilkan dengan tanda bintang* atau titik. Sintaks dasar mirip dengan bidang teks di atas. Perbedaannya adalah Anda hanya perlu mengubah teks dalam jenis kata sandi. Berdasarkan contoh bidang teks di atas, tambahkan kata sandi kode antara tag <sorm>: <inpyt type = kata sandi nama = ukuran kata sandi = 20 maxlength = 30>, setelah menyimpan, buka file, dan masukkan karakter apa pun di kotak input kata sandi untuk dilihat, itu adalah titik, tetapi karakter sebenarnya disembunyikan, seperti yang ditunjukkan pada (Gambar 2).
(Gambar 2)
3. File File File
Domain file memungkinkan kami untuk mengisi file di komputer lokal kami di dalam domain dan akhirnya mengunggahnya melalui formulir. Ini adalah fungsi dasar dari domain file. Yang paling banyak digunakan harus diunggah. Dalam hal penampilan, bidang file adalah kotak teks dan tombol penelusuran. Kami dapat secara langsung mengisi jalur file yang akan diunggah ke situs web di kotak teks, atau klik tombol browsing untuk menemukan file yang akan diunggah di komputer kami.
Sintaks dasarnya adalah
<Input type = file nama = field_name> Jenisnya adalah file, nama adalah nama bidang file ini. Mari kita tulis bidang file, kodenya adalah sebagai berikut:
<html> <head> <title> bidang teks </iteme> </head> <body> <orm> Harap unggah foto Anda: <input type = file nama = file> </form> </body> </html>
Setelah menabung, buka dan Anda dapat melihat wajah sebenarnya dari bidang teks, seperti yang ditunjukkan pada (Gambar 3). Saya percaya semua orang telah melihat gambar yang diunggah seperti itu.
(Gambar 3)
4. Tombol dalam bentuk tombol memainkan peran penting. Tombol dapat memiliki fungsi mengirimkan semua data formulir ke server, dan dapat mengembalikan formulir ke kondisi awalnya ketika pengguna perlu memodifikasi formulir, dan juga dapat memainkan peran lain sesuai dengan kebutuhan program. Tombol umumnya dibagi menjadi tiga jenis: tombol (tombol normal), kirim (kirim tombol), dan reset (reset tombol). Sintaks tombol normal tombol adalah <input type = tombol nama = field_name value = button_text>, di mana nilai nilai mewakili teks yang ditampilkan pada tombol. Tujuan mengirimkan tombol kirim adalah untuk mengirimkan semua data dalam formulir ke penangan server setelah mengklik tombol ini. Sintaks dasar adalah <input type = kirim nama = field_name value = button_text>, di mana nilai nilai mewakili teks yang ditampilkan pada tombol. Reset tombol reset berarti bahwa setelah mengklik tombol, semua data yang kami tambahkan ke formulir dihapus dan dipulihkan ke pengaturan konten formulir default. Sintaks dasar adalah <input type = reset name = field_name value = button_text>, lagi: dalam bahasa html, ukuran tidak dapat dibedakan. Mari kita tulis contoh secara singkat untuk mempraktikkan efek tombol, kodenya adalah sebagai berikut.
<Html> <head> <title> Bentuk tombol demo </title> </head> <body> pendaftaran pengguna <bentuk aksi = mailto: [email protected] metode = get name = haha> Nama: <input tipe = name = 20 Ukuran nama pengguna = 20> <br> Kata sandi: <Input Tipe = Input Name = Kata Sandi = 20 Maxlength = 20 maxlength = 50 value = http://> <br> <input type = tombol nama = field_name value = tombol normal> <input type = kirimkan nama = field_name value = Kirim tombol> <Input Type = Reset Nama = Field_name Nilai = Reset Tombol> </from> </body> </html>
Setelah menabung, buka file dan lihat, seperti yang ditunjukkan pada (Gambar 4). Saya pikir Anda telah melihat gambar serupa, dan yang paling umum digunakan saat mendaftarkan pengguna.
(Gambar 4)
5. Sembunyikan domain tersembunyi
Domain tersembunyi tidak terlihat oleh pengguna kami di halaman karena disembunyikan. Tujuan memasukkan domain tersembunyi dalam formulir adalah untuk mengumpulkan atau mengirim informasi. Ketika kami mengklik tombol Kirim untuk mengirim data formulir, informasi domain tersembunyi juga dikirim ke server. Sintaks dasarnya adalah <input type = field_name value = value>. Alasan saya juga menjelaskan kepada Anda adalah bahwa banyak program menulis program yang berpikir ini tersembunyi dan berpikir bahwa pengguna tidak dapat melihatnya. Oleh karena itu, dalam banyak kasus, tidak ada parameter domain tersembunyi untuk deteksi dan penyaringan, begitu banyak kecelakaan keamanan telah terjadi.3. Tag bidang teks <textarea>
Tag ini biasanya digunakan untuk membuat beberapa baris bidang teks di halaman web, sehingga lebih banyak teks dapat dimasukkan, dan yang paling banyak digunakan adalah dalam komentar artikel.
Sintaks dasarnya adalah:
<TextArea Name = Name Rows = Nilai Cols = Nilai Nilai = Nilai> </TextAreA>
, sifat -sifat yang ditunjukkan pada tabel berikut.
Properti Tag Bidang Teks | menggambarkan |
nama | Nama Bidang Teks |
baris | Jumlah baris dalam bidang teks |
cols | Jumlah kolom dalam bidang teks |
Nilai | Nilai default untuk bidang teks |
Berikut ini adalah contoh untuk menjelaskannya secara rinci sehingga setiap orang dapat memahami dari praktik bahwa ini tidak terlalu sulit. Kode spesifiknya adalah sebagai berikut:
<html> <head> <title>Text domain function demonstration</title> </head> <body> User survey<form action=mailto:[email protected] method=get name=haha> Message board: <br> <TEXTAREA name=comment rows=5 cols=40 ></TEXTAREA><br> <INPUT type= SUBMIT name= field_name value= Submit a message> </form> </body> </html>
Simpan kode dan ubah nama akhiran dan buka untuk melihat apakah itu sama dengan papan pesan di internet, seperti yang ditunjukkan pada (Gambar 5).
(Gambar 5)