Beberapa pengiriman untuk suatu formulir. Beberapa tombol kirim dalam bentuk HTML

formulir HTML adalah kontrol yang digunakan untuk mengumpulkan informasi dari pengunjung situs web.

Formulir web terdiri dari kumpulan bidang teks, tombol, daftar, dan kontrol lain yang diaktifkan dengan klik mouse. Secara teknis, formulir meneruskan data dari pengguna ke server jauh.

Untuk menerima dan mengolah data formulir, bahasa pemrograman web seperti PHP, Perl.

Sebelum munculnya HTML5, formulir web adalah kumpulan beberapa elemen , diakhiri dengan sebuah tombol . Dibutuhkan banyak upaya untuk menata formulir di berbagai browser. Selain itu, formulir tersebut memerlukan penggunaan JavaScript untuk memvalidasi data yang dimasukkan, dan juga tidak memiliki jenis kolom input khusus untuk menentukan informasi sehari-hari seperti tanggal, alamat. e-mail dan URL.

formulir HTML5 memecahkan sebagian besar masalah umum ini dengan hadirnya atribut baru, memberikan kemampuan untuk mengubah tampilan elemen bentuk CSS3.

Beras. 1. Peningkatan Formulir Web dengan HTML5

Membuat Formulir HTML5

1. Elemen

Dasar dari segala bentuk adalah elemennya .... Itu tidak memerlukan input apa pun karena ini adalah sebuah wadah, yang menyatukan semua kontrol formulir - bidang. Atribut elemen ini berisi informasi yang umum untuk semua kolom formulir, sehingga kolom yang digabungkan secara logis harus disertakan dalam satu formulir.

Tabel 1. Atribut tag
Atribut Arti/Deskripsi
terima-charset Nilai atributnya dipisahkan spasi daftar pengkodean karakter, yang akan digunakan untuk mengirimkan formulir, misalnya, .
tindakan Atribut yang diperlukan, yang menentukan url pengendali formulir di server tujuan pengiriman data. Ini adalah file (misalnya, action.php) yang menjelaskan apa yang perlu dilakukan dengan data formulir. Jika nilai atribut tidak ditentukan, maka setelah halaman dimuat ulang, elemen formulir akan mengambil nilai defaultnya.
Dalam hal ini semua pekerjaan akan dilakukan di sisi klien skrip JavaScript, maka atribut action dapat diatur ke # .
Anda juga dapat mengatur agar formulir yang diisi oleh pengunjung dikirimkan kepada Anda melalui email. Untuk melakukan ini, Anda perlu membuat entri berikut:
pelengkapan otomatis

enctype Digunakan untuk menunjukkan PANTOMIM-jenis data yang dikirim beserta formulirnya, misalnya enctype="multipart/form-data" . Ditentukan hanya dalam kasus method="post" .
application/x-www-form-urlencoded - tipe konten default, menunjukkan bahwa data yang ditransfer mewakili daftar URL yang dikodekan variabel bentuk. Karakter spasi (ASCII 32) akan dikodekan sebagai + , dan karakter khusus seperti ! akan dikodekan dalam heksadesimal sebagai %21 .
multipart/form-data - digunakan untuk mengirimkan formulir yang berisi file, data non-ASCII dan data biner, terdiri dari beberapa bagian yang masing-masing mewakili konten elemen individu formulir.
text/plain - menunjukkan bahwa teks biasa (bukan html) sedang dikirimkan.
metode Menentukan bagaimana data formulir dikirimkan.
Metode get mengirimkan data ke server melalui bilah alamat peramban. Saat membuat permintaan ke server, semua variabel dan nilainya membentuk urutan seperti www.anysite.ru/form.php?var1=1&var2=2 . Apakah nama dan nilai variabel ditambahkan ke alamat server setelah tandanya? dan dipisahkan oleh &. Semua karakter khusus dan huruf non-Latin dikodekan dalam format %nn, spasinya diganti dengan +. Cara ini sebaiknya digunakan jika Anda tidak lulus volume besar informasi. Jika Anda seharusnya mengirim file beserta formulirnya, cara ini tidak akan berhasil.
Metode posting juga digunakan untuk mengirim data dalam jumlah besar informasi rahasia dan kata sandi. Data yang dikirim menggunakan metode ini tidak terlihat di header URL karena terdapat di badan pesan.
nama Set nama formulir, yang akan digunakan untuk mengakses elemen formulir melalui skrip, seperti name="opros" .
tidak validasi Menonaktifkan validasi pada tombol kirim formulir. Atribut digunakan tanpa menentukan nilai
target Menentukan jendela ke mana informasi akan dikirim:
_blank - jendela baru
_self - bingkai yang sama
_parent — bingkai induk (jika ada, jika tidak, maka ke yang sekarang)
_atas - jendela tingkat atas sehubungan dengan bingkai ini. Jika panggilan tidak datang dari frame anak, maka ke frame yang sama.

2. Mengelompokkan elemen bentuk

Elemen

...
dimaksudkan untuk mengelompokkan elemen, teman terkait dengan seorang teman, sehingga membagi formulir menjadi bagian-bagian yang logis.

Setiap kelompok elemen dapat diberi nama menggunakan elemen tersebut , yang muncul tepat setelah tag

. Nama grup muncul di batas kiri atas
. Misalnya jika dalam suatu elemen
Informasi kontak disimpan:

Informasi kontak


Beras. 2. Mengelompokkan elemen formulir menggunakan

Tabel 2. Atribut tag
Atribut Arti/Deskripsi
dengan disabilitas Jika atributnya ada, maka sekelompok elemen formulir terkait terletak di dalam wadah
, dinonaktifkan untuk pengisian dan pengeditan. Digunakan untuk membatasi akses ke kolom formulir tertentu yang berisi data yang dimasukkan sebelumnya. Atribut digunakan tanpa menentukan nilai -
.
membentuk
dalam dokumen yang sama. Menunjukkan satu atau lebih bentuk yang dimilikinya grup ini elemen. Pada saat ini atribut tidak didukung oleh browser apa pun.
nama Mendefinisikan Nama, yang akan digunakan untuk mereferensikan elemen dalam JavaScript, atau untuk mereferensikan data formulir setelah formulir diisi dan diserahkan. Ini analog dengan atribut id.

3. Buat kolom formulir

Elemen membuat sebagian besar bidang formulir. Atribut suatu elemen berbeda-beda bergantung pada jenis bidang yang digunakan untuk membuat elemen tersebut.

Dengan menggunakan gaya CSS Anda dapat mengubah ukuran font, jenis font, warna, dan properti teks lainnya, serta menambahkan batas, warna latar belakang, dan gambar latar belakang. Lebar bidang ditentukan oleh properti lebar.

Tabel 3. Atribut tag
Atribut Arti/Deskripsi
menerima Menentukan jenis file yang diizinkan untuk dikirim ke server. Diindikasikan hanya untuk . Nilai yang mungkin:
file_extension - memungkinkan pengunduhan file dengan ekstensi yang ditentukan, misalnya, terima='.gif' , terima='.pdf' , terima='.doc'
audio/* - memungkinkan pengunduhan file audio
video/* - memungkinkan pengunduhan file video
image/* - memungkinkan memuat gambar
media_type - menunjukkan jenis media dari file yang diunduh.
alternatif Mendefinisikan teks alternatif untuk gambar, hanya diindikasikan untuk .
pelengkapan otomatis Bertanggung jawab untuk mengingat nilai yang dimasukkan ke dalam bidang teks dan secara otomatis menggantinya saat Anda memasukkannya lagi:
on - berarti bidang tersebut tidak dilindungi dan nilainya dapat disimpan dan diambil,
mati - menonaktifkan pengisian otomatis untuk bidang formulir.
fokus otomatis Memungkinkan Anda memastikan bahwa dalam formulir yang dimuat, satu atau beberapa kolom input sudah memiliki fokus (telah dipilih), siap untuk memasukkan nilai.
diperiksa Atribut memeriksa apakah kotak centang default dicentang pada pemuatan halaman untuk bidang seperti type="checkbox" dan type="radio" .
dengan disabilitas
membentuk Nilai atribut harus sama dengan atribut id elemen dalam dokumen yang sama. Mengidentifikasi satu atau lebih formulir yang memiliki bidang formulir ini.
formasi Menentukan url file yang akan memproses data yang dimasukkan ke dalam kolom saat mengirimkan formulir. Tetapkan hanya untuk bidang type="submit" dan type="image" . Atribut tersebut mengesampingkan nilai atribut tindakan dari formulir itu sendiri.
tipe formulir Menentukan bagaimana data bidang formulir akan dikodekan saat dikirim ke server. Mengganti nilai atribut enctype formulir. Tetapkan hanya untuk bidang type="submit" dan type="image" . Pilihan:
application/-x-www-form-urlencoded adalah nilai default. Semua karakter dikodekan sebelum dikirim (spasi diganti dengan karakter +, karakter khusus diubah menjadi nilai ASCII HEX)
multipart/form-data - karakter tidak dikodekan
teks/polos - spasi diganti dengan simbol +, dan karakter khusus tidak dikodekan.
metode bentuk Atribut menentukan metode yang akan digunakan browser untuk mengirimkan data formulir ke server. Tetapkan hanya untuk bidang type="submit" dan type="image" . Mengganti nilai atribut metode formulir. Pilihan:
dapatkan adalah nilai default. Data dari formulir (pasangan nama/nilai) ditambahkan ke url dan dikirim ke server: URL?name=value&name=value
data pasca - formulir dikirim sebagai permintaan http.
formnovalidate Menentukan bahwa data bidang formulir tidak boleh divalidasi saat formulir dikirimkan. Mengganti nilai atribut novalidate formulir. Dapat digunakan tanpa menentukan nilai atribut.
target bentuk Menentukan tempat untuk menampilkan respons yang diterima setelah mengirimkan formulir. Tetapkan hanya untuk bidang type="submit" dan type="image" . Menggantikan nilainya atribut sasaran formulir.


_parent – ​​​​memuat respons ke dalam bingkai induk
_top – memuat respons dalam layar penuh
framename – memuat respons ke dalam bingkai dengan nama yang ditentukan.
tinggi Nilai atribut berisi jumlah piksel tanpa menentukan satuan ukuran. Menetapkan tinggi bidang formulir bertipe type="image" , misalnya, . Disarankan untuk mengatur tinggi dan lebar bidang secara bersamaan.
daftar Merupakan referensi ke suatu elemen , berisi idnya. Memungkinkan Anda memberi pengguna beberapa opsi untuk dipilih saat dia mulai memasukkan nilai di bidang terkait.
maks Memungkinkan Anda membatasi input numerik yang diperbolehkan ke nilai maksimum; nilai atribut dapat berisi bilangan bulat atau bilangan pecahan. Disarankan untuk menggunakan atribut ini bersama dengan atribut min. Bekerja dengan jenis berikut bidang: nomor, rentang, tanggal, waktu, waktu-lokal, bulan, waktu dan minggu.
panjang maksimal Atribut menentukan kuantitas maksimum karakter yang dimasukkan ke dalam bidang. Nilai defaultnya adalah 524288 karakter.
menit Memungkinkan Anda membatasi input numerik yang diperbolehkan ke nilai minimum.
banyak Memungkinkan pengguna memasukkan beberapa nilai atribut, dipisahkan dengan koma. Berlaku untuk file dan alamat email. Ditentukan tanpa nilai atribut.
nama Menentukan nama yang akan digunakan untuk mengakses elemen , misalnya, dalam style sheet css. Ini analog dengan atribut id.
pola Memungkinkan Anda menentukan penggunaan ekspresi reguler sintaks data yang harus diizinkan untuk dimasukkan dalam bidang tertentu. Misalnya, pola="(3)-(3)" — tanda kurung siku atur rentang karakter yang valid, in dalam hal ini- setiap huruf kecil, angka dalam kurung kurawal menunjukkan bahwa diperlukan tiga huruf kecil, diikuti tanda hubung, lalu tiga angka mulai dari 0 hingga 9.
pengganti Berisi teks yang ditampilkan di kolom input sebelum diisi (paling sering ini adalah tooltip).
hanya bisa dibaca Tidak mengizinkan pengguna untuk mengubah nilai elemen formulir; memilih dan menyalin teks masih tersedia. Ditentukan tanpa nilai atribut.
diperlukan Menampilkan pesan yang menunjukkan bahwa bidang ini wajib diisi. Jika pengguna mencoba mengirimkan formulir tanpa memasukkan nilai yang diperlukan di bidang ini, pesan peringatan akan ditampilkan di layar. Ditentukan tanpa nilai atribut.
ukuran Menetapkan lebar bidang yang terlihat dalam karakter. Nilai defaultnya adalah 20. Berfungsi dengan jenis bidang berikut: teks, pencarian, telp, url, email, dan kata sandi.
src Menentukan url gambar yang digunakan sebagai tombol kirim formulir. Diindikasikan hanya untuk lapangan .
melangkah Digunakan untuk elemen yang memerlukan input nilai numerik, menunjukkan jumlah kenaikan atau penurunan nilai selama penyesuaian rentang (langkah).
jenis tombol - membuat tombol.
checkbox - mengubah kolom input menjadi kotak centang yang dapat dicentang atau dihapus, mis.
Saya punya mobil
warna - Menghasilkan palet warna di browser pendukung, memungkinkan pengguna memilih nilai warna dalam format heksadesimal.
tanggal — memungkinkan Anda memasukkan tanggal dalam format dd.mm.yyyy.
Hari ulang tahun:
datetime-local - memungkinkan Anda memasukkan tanggal dan waktu yang dipisahkan dengan huruf kapital surat bahasa inggris T sesuai pola dd.mm.yyyy jj:mm.
Ulang tahun - hari dan waktu:
email - Browser yang mendukung atribut ini akan mengharapkan pengguna memasukkan data yang cocok dengan sintaks alamat email.
E-mail:
file - memungkinkan Anda mengunduh file dari komputer pengguna.
Pilih berkas:
tersembunyi - Menyembunyikan kontrol, yang tidak ditampilkan oleh browser dan mencegah pengguna mengubah nilai default.
gambar - membuat tombol, memungkinkan Anda menyisipkan gambar alih-alih teks pada tombol.
bulan - Memungkinkan pengguna memasukkan nomor tahun dan bulan menggunakan pola yyyy-mm.
nomor - dimaksudkan untuk memasukkan nilai integer. Atribut min , max , dan stepnya masing-masing menentukan batas atas, batas bawah, dan langkah antar nilai. Atribut ini diasumsikan untuk semua elemen yang mempunyai indikator numerik. Nilai defaultnya bergantung pada jenis elemen.
Harap sebutkan jumlah (dari 1 hingga 5):
kata sandi - membuat kolom teks dalam formulir, sedangkan karakter yang dimasukkan oleh pengguna diganti dengan tanda bintang, poin, atau lainnya, diinstal oleh browser ikon.
Masukkan kata sandi:
radio - membuat saklar - kontrol berbentuk lingkaran kecil yang dapat dihidupkan atau dimatikan.
Vegetarian:
range - memungkinkan Anda membuat elemen antarmuka seperti penggeser, min / maks - memungkinkan Anda mengatur rentang pilihan
reset - membuat tombol yang menghapus kolom formulir data yang dimasukkan pengguna.
pencarian - menunjukkan kolom pencarian, secara default kolom input berbentuk persegi panjang.
Mencari:
kirim - buat tombol standar, diaktifkan dengan klik mouse. Tombol ini mengumpulkan informasi dari formulir dan mengirimkannya untuk diproses.
teks - Membuat kolom teks pada formulir, menghasilkan kolom teks satu baris untuk input teks.
waktu - memungkinkan Anda memasukkan waktu dalam format 24 jam menggunakan pola jj:mm. Di browser pendukung, ini muncul sebagai kontrol bidang nomor input dengan nilai yang dapat diubah menggunakan mouse, dan hanya mengizinkan nilai waktu untuk dimasukkan.
Tentukan waktu:
url—bidang ini dimaksudkan untuk menentukan URL.
Halaman beranda:
minggu - Alat penunjuk yang sesuai memungkinkan pengguna memilih satu minggu dalam setahun, setelah itu akan menyediakan entri data dalam format nn-yyyy. Tergantung pada tahunnya, jumlah minggunya bisa 52 atau 53.
Tentukan minggu:
nilai Mendefinisikan teks yang muncul pada tombol, bidang, atau teks terkait. Tidak ditentukan untuk bidang bertipe file.
lebar Nilai atribut berisi jumlah piksel. Memungkinkan Anda mengatur lebar bidang formulir.

4. Bidang masukan teks

Elemen digunakan sebagai pengganti elemen ketika Anda perlu membuat bidang teks besar. Teks ditampilkan sebagai nilai asli, ditempatkan di dalam tag. Dimensi bidang diatur menggunakan atribut col - dimensi horizontal, baris - dimensi vertikal. Ketinggian bidang dapat diatur menggunakan properti height. Semua ukuran dihitung berdasarkan ukuran satu karakter dalam font monospace.

Tabel 4. Atribut tag

7. Tombol

Elemen membuat tombol yang dapat diklik. Berbeda dengan tombol yang dibuat ( , , , ), di dalam elemen .

Tombol memungkinkan pengguna mengirimkan data ke formulir, menghapus konten formulir, atau mengambil tindakan lainnya. Anda dapat membuat batas, mengubah latar belakang, dan menyelaraskan teks pada tombol.

Tabel 9. Atribut tag
Atribut Arti/Deskripsi
fokus otomatis Menetapkan fokus ke tombol saat halaman dimuat.
dengan disabilitas Menonaktifkan tombol, sehingga tidak dapat diklik.
membentuk Menunjukkan satu atau lebih formulir yang memiliki tombol ini. Nilai atribut adalah pengidentifikasi formulir yang sesuai.
formasi Nilai atribut berisi URL pengendali data formulir yang dikirim ketika tombol diklik. Hanya untuk tipe tombol type="submit" . Mengganti nilai atribut tindakan yang ditentukan untuk elemen .
tipe formulir Menyetel tipe pengkodean data formulir sebelum mengirimkannya ke server ketika tombol seperti type="kirim" diklik. Mengganti nilai atribut enctype yang ditentukan untuk elemen . Nilai yang mungkin:
application/x-www-form-urlencoded adalah nilai default. Semua karakter akan dikodekan sebelum dikirim.
multipart/form-data - karakter tidak dikodekan. Digunakan ketika file diunggah menggunakan formulir.
teks/polos - karakter tidak dikodekan, dan spasi diganti dengan simbol +.
metode bentuk Atribut menentukan metode yang akan digunakan browser untuk mengirimkan formulir. Mengganti nilai atribut metode yang ditentukan untuk elemen . Ditentukan hanya untuk tombol bertipe type = "kirim". Nilai yang mungkin:
dapatkan - data dari formulir (pasangan nama/nilai) ditambahkan ke url dan dikirim ke server. Metode ini memiliki batasan pada ukuran data yang dikirim dan tidak cocok untuk mengirimkan kata sandi dan informasi rahasia.
post - data dari formulir ditambahkan sebagai permintaan http. Metode ini lebih andal dan aman dibandingkan get dan tidak memiliki batasan ukuran.
formnovalidate Atribut tersebut menentukan bahwa data formulir tidak boleh divalidasi saat diserahkan. Ditentukan hanya untuk tombol bertipe type = "kirim".
target bentuk Atribut menentukan di jendela mana untuk menampilkan hasil setelah mengirimkan formulir. Ditentukan hanya untuk tombol bertipe type = "kirim". Mengganti nilai atribut target yang ditentukan untuk elemen .
_blank - memuat respons ke jendela/tab baru
_self - memuat respons ke jendela yang sama (default)
_parent - memuat respons ke dalam bingkai induk
_top - memuat respons dalam layar penuh
framename - memuat respons ke dalam bingkai dengan nama yang ditentukan.
nama Menetapkan nama tombol, nilai atributnya adalah teks. Digunakan untuk menautkan ke data formulir setelah formulir dikirimkan, atau untuk menautkan ke tombol ini(tombol) dalam JavaScript.
jenis Menentukan jenis tombol. Nilai yang mungkin:
tombol - tombol yang dapat diklik
reset - tombol reset, kembali arti aslinya
kirim - tombol untuk mengirimkan data formulir.
nilai Menetapkan nilai default yang dikirim saat tombol diklik.

8. Kotak centang dan tombol radio di formulir

Kotak centang dalam formulir diatur menggunakan konstruk , dan saklar - menggunakan .

Kotak centang, tidak seperti tombol radio, dapat diatur menjadi beberapa dalam satu bentuk. Jika atribut yang dicentang ditentukan untuk kotak centang, maka saat halaman dimuat, kotak centang pada bidang formulir terkait sudah dipilih.

Elemen

Tag yang paling umum digunakan dalam formulir adalah . Itu tidak memiliki tag penutup. Semua informasi yang diperlukan browser untuk diproses terkandung langsung dalam tag dan ditentukan menggunakan berbagai atribut. Semantik bervariasi secara signifikan tergantung pada nilai atributnya jenis.

Atribut tanda
type Atribut utama yang menentukan tipe elemen. Jika atribut tidak ditentukan, nilai default akan digunakan teks.
Nilai yang mungkin:

Tidak semua browser mendukung tipe yang ditambahkan di HTML5.
Jika browser tidak mendukung salah satu tipe baru, browser akan berasumsi bahwa itu adalah file .

Cara mengatur dukungan untuk browser lama dijelaskan menggunakan contoh tanggal. Autocomplete="off" Menonaktifkan pelengkapan otomatis untuk bidang ini . Sangat berguna untuk kolom entri kode satu kali, captcha, dll. fokus saat halaman dimuat. Nilainya dapat diatur dengan tiga cara: ... ... ... Contoh meniru properti fokus otomatis untuk browser lama. dinonaktifkan Membuat elemen tidak dapat diakses. Item tidak tersedia tidak dikirimkan ke server. nama Nama bidang. Setiap kolom masukan yang Anda buat harus memiliki kolomnya sendiri
nama yang unik, jika tidak, skrip tidak akan menentukan bidang mana yang menerapkan nilai yang dihasilkan. Tentu saja, nama kolom masukan harus sesuai dengan nama yang dijelaskan dalam program pemrosesan. value Nilai default bidang atau label pada tombol. size Ukuran bidang tipe. maxlength Batas jumlah karakter yang dapat dimasukkan dalam bidang bertipe . readonly="readonly" atau "" Mencegah elemen diubah. maxlength Batas jumlah karakter yang dapat dimasukkan dalam bidang bertipe . wajib diisi Secara otomatis memeriksa apakah kolom sudah terisi. maxlength Batas jumlah karakter yang dapat dimasukkan dalam bidang bertipe . Untuk menyorot bidang wajib yang diisi dengan benar, Anda dapat menggunakan konstruksi gaya berikut:
menit

Nilai minimal angka di bidang tipe nomor

.

.
step Langkah untuk mengubah nomor pada kolom type

teks tooltip placeholder di bidang formulir yang hilang secara otomatis ketika bidang tersebut menerima fokus.

Contoh pengaturan gaya tooltip:

Di IE dan Firefox (hingga versi 18) pengganti dianggap sebagai kelas semu, dan sisanya - elemen semu. HASIL: namamu Daftar Daftar opsi yang dapat dipilih saat mengetik di kolom teks. Daftar ini awalnya disembunyikan dan tersedia saat bidang menerima fokus atau memasukkan teks. Teks 1 Teks2 Jenis elemen INPUT tombol TOMBOL

Tombol

.

TOMBOL

dimaksudkan untuk kasus-kasus ketika Anda perlu menjalankan beberapa skrip.

Artinya, suatu acara dilampirkan ke tombol Teks 1 OnСlick dan fungsi yang diperlukan dipanggil. Atribut nilai mengatur label pada tombol. Atribut dan fungsi yang diperlukan dipanggil. klik menentukan penangan JavaScript yang dipanggil ketika tombol diklik. saat berada di kolom input teks apa pun.

Tombol

.

Artinya, suatu acara dilampirkan ke tombol Daftar Daftar opsi yang dapat dipilih saat mengetik di kolom teks. Terima pesanan

Tombol

.

Artinya, suatu acara dilampirkan ke tombol Terimalah sebagai pengamat formnovalidate

Tombol


.

Jangan periksa

tombol RESET

Ini adalah tombol hapus formulir. Saat diklik, semua elemen yang diubah dikembalikan ke nilai defaultnya. Ini jarang digunakan. Namun, dalam beberapa kasus, ini bisa sangat berguna. Tip: Berhati-hatilah saat memilih label tombol MENGATUR ULANG

Tombol

.

Sesuatu seperti “Hapus”, “Mulai dari awal”, “Hapus masukan”, dll. akan cukup jelas (dan, yang paling penting, intuitif bahkan untuk orang bodoh sekalipun). Secara umum, pengguna tidak perlu ragu sedikit pun mengenai tujuan kunci ini.

Mengatur ulang Bidang masukan TEKS Bidang masukan teks adalah bidang masukan yang paling umum digunakan dalam formulir. Selain itu, ini dapat dianggap sebagai yang utama dan elemen yang paling penting formulir Tipe ini digunakan oleh tag secara default, ini dapat dihilangkan untuk menampilkan bidang teks. Namun, jika ada kebutuhan untuk menata pemilih masukan, lalu atributnya
ketik = "teks" Jenis elemen INPUT tidak boleh dilewatkan.

Tombol

.

, selalu diperlukan, karena berdasarkan parameter ini, browser meneruskan pasangan nama=nilai ke skrip.

Ivanov

Teks "Ivanov" ditempatkan di bidang yang dibuat sebagai nilai awal.

Tombol

.

Jika pengguna tidak melakukan perubahan atau mengklik tombol, nilai Ivanov akan dikirim ke skrip sebagai nama belakang pengguna. Kolom masukan angka NUMBER Bidang ini dimaksudkan untuk memasukkan angka.

Tombol

.

Saat dimasukkan, bagian pecahan dapat dipisahkan dengan titik (2.5) atau koma (2.5). Jika pengguna memasukkan huruf, formulir tidak akan dikirim ke server..

Tombol

.

Anda dapat mengatur minimumnya maxlength Batas jumlah karakter yang dapat dimasukkan dalam bidang bertipe . nilai maksimum

bidang dan langkah perubahan nomor.

Nilai langkah dapat positif atau negatif, tetapi harus lebih besar dari 0. Jika angka yang dimasukkan pada kolom tidak memenuhi batasan yang ditentukan, maka pengiriman ke server tidak akan terjadi.

Ini adalah jenis bidang teks khusus (tersembunyi). Jika satu skrip memproses beberapa formulir berbeda, Anda dapat menentukan pengidentifikasi di bidang tersembunyi pada setiap formulir yang memungkinkan Anda mengidentifikasi formulir mana yang sedang Anda tangani.

Tombol
...Elemen lain dari bentuk....
...Elemen bentuk lainnya...

Browser tidak menampilkan bidang tersembunyi, meskipun bidang tersebut dapat ditemukan jika Anda mengalihkan browser ke mode tampilan file HTML dan mengurai teks halaman Web. Bidang tersembunyi berguna ketika Anda ingin memberikan informasi yang diperlukan untuk skrip, namun Anda tidak ingin pengguna dapat mengubahnya. Namun, ketahuilah bahwa pengguna yang paham bisa menyimpan formulir Anda ke file, mengeditnya, dan kemudian mengirimkan formulir yang dimodifikasi ke server. Oleh karena itu, Anda tidak boleh mengandalkan bidang tersembunyi untuk menciptakan keamanan apa pun.

Tombol

Script akan menerima variabel bernama Versi Formulir, yang akan diberi nilai 1.2. Informasi ini dapat digunakan untuk menentukan bagaimana memproses sisa informasi yang diterima dari formulir. Jika pengguna mengubah nilai ini, program skrip mungkin berperilaku tidak terduga.

Bidang masukan alamat email

Untuk memasukkan beberapa alamat, Anda dapat menambahkan atribut banyak, dengan koma (,) digunakan untuk memisahkan alamat

Tombol

Formulir dirancang untuk mengirim data dari pengguna ke server web. Formulir dalam HTML dapat terdiri dari bidang teks dan area teks, kotak centang dan tombol radio, serta daftar drop-down. Semua ini adalah elemen bentuk. Setiap elemen berfungsi untuk menyampaikan beberapa makna pada situs.
Pada intinya, formulir HTML adalah halaman web tempat Anda melihat area untuk memasukkan informasi Anda. Setelah Anda mengisi formulir dan mengklik kirim, informasi dari formulir dikemas dan dikirim ke server web untuk diproses oleh skrip sisi server (file handler). Setelah diproses, halaman web lain dikembalikan kepada Anda sebagai tanggapan. Gambar berikut dengan jelas menunjukkan cara kerja formulir:

Tidak ada yang sulit dalam membuat formulir HTML. Cara termudah untuk mendapatkan gambaran tentang formulir adalah dengan mengurai sedikit kode HTML dan kemudian melihat cara kerjanya. Contoh berikut menunjukkan sintaks untuk membuat formulir HTML sederhana:

Contoh: Formulir HTML Sederhana

  • Cobalah sendiri »

Bentuk pertama saya:
Nama:
Nama belakang:



Bentuk sederhana

Bentuk pertama saya:
Nama:
Nama belakang:


Elemen

Formulir dimasukkan ke halaman web menggunakan elemen . Ini menyediakan wadah untuk semua konten formulir, termasuk elemen seperti bidang teks dan tombol, serta tag lainnya bahasa HTML. Namun, tidak boleh mengandung unsur lain .
Untuk mengirimkan formulir ke server, gunakan tombol “Kirim”, hasil yang sama akan diperoleh jika Anda menekan tombol “Enter” di dalam formulir. Jika tombol "Kirim" tidak ada pada formulir, tombol "Enter" dapat digunakan untuk mengirimkan.
Atribut sebagian besar elemen mempengaruhi pemrosesan formulir, bukan desainnya. Yang paling umum adalah tindakan Dan metode. Atribut tindakan berisi URL ke mana informasi dalam formulir akan dikirim untuk diproses oleh server. Atribut metode adalah metode HTTP, browser mana yang harus digunakan untuk mengirimkan data formulir.

Elemen

Hampir semua bidang formulir dibuat menggunakan elemen (dari bahasa Inggris masukan - masukan). Penampilan elemen berubah tergantung pada nilai atributnya jenis:

Berikut adalah beberapa nilai atribut jenis:

Memasukkan teks dan kata sandi

Salah satu yang paling banyak tipe sederhana elemen formulir adalah bidang teks yang dirancang untuk memasukkan teks dari satu baris. Tipe ini input teks diatur secara default, dan oleh karena itu bidang satu baris yang akan ditampilkan jika Anda lupa menentukan atributnya jenis. Untuk menambahkan kolom input teks satu baris ke formulir, Anda harus berada di dalam elemen mendaftarkan atributnya jenis dengan nilai teks:

Bidang masukan kata sandi adalah jenis bidang teks biasa. Ini mendukung atribut yang sama dengan bidang teks satu baris. Atribut Jenis elemen INPUT mengatur nama kolom entri kata sandi yang akan dikirim ke server beserta kata sandi yang dimasukkan oleh pengguna. Untuk membuat kolom kata sandi, Anda perlu menyetel atribut kata sandi menjadi jenis(kata sandi (Bahasa Inggris) - kata sandi):

Contoh pembuatan form dengan field password:

Contoh: Bidang kata sandi

  • Cobalah sendiri »

Login Anda:

Kata sandi:




Login Anda:

Kata sandi:


Anda dapat menggunakan atribut tersebut bersama dengan atribut ini panjang maksimal, yang nilainya menentukan jumlah maksimum karakter yang dapat dimasukkan baris ini. Anda juga dapat mengatur panjang kolom input menggunakan atribut ukuran. Secara default, sebagian besar browser membatasi lebar kolom teks hingga 20 karakter. Untuk mengontrol lebar elemen formulir baru, bukan atribut ukuran, disarankan untuk menggunakan sarana tabel bertingkat gaya (CSS).
Atribut Daftar Daftar opsi yang dapat dipilih saat mengetik di kolom teks. menentukan nilai yang ditampilkan secara default di bidang teks saat formulir dimuat. Dengan memasukkan nilai default di bidang, Anda dapat menjelaskan kepada pengguna data apa dan format apa yang Anda ingin pengguna masukkan di sini. Ini seperti contoh, karena akan lebih mudah bagi pengguna untuk mengisi formulir dengan melihat contoh di depannya.

Sakelar (radio)

Elemen jenis radio membuat sakelar yang menggunakan prinsip logika "ATAU", memungkinkan Anda memilih hanya satu dari beberapa nilai: jika Anda memilih satu posisi, maka semua posisi lainnya menjadi tidak aktif. Sintaks dasar elemen sakelar adalah:

Artinya, suatu acara dilampirkan ke tombol Jenis elemen INPUT untuk saklar diperlukan dan berperan penting dalam menggabungkan beberapa elemen saklar menjadi satu kelompok. Untuk menggabungkan sakelar ke dalam grup, Anda harus mengaturnya nilai yang sama atribut Jenis elemen INPUT Dan arti yang berbeda atribut Daftar Daftar opsi yang dapat dipilih saat mengetik di kolom teks.. Atribut nilai menetapkan nilai tombol radio yang dipilih untuk dikirim ke server. Nilai setiap elemen tombol radio harus unik dalam grup sehingga server mengetahui opsi respons mana yang dipilih pengguna.
Kehadiran atribut diperiksa(dari bahasa Inggris - terpasang) pada elemen sakelar menunjukkan opsi mana yang harus dipilih secara default saat memuat halaman, jika perlu. Atribut ini dapat diatur hanya untuk satu elemen tombol radio dari grup:

  • Cobalah sendiri »

Berapa usiamu?

  1. di bawah 18 tahun
  2. dari 18 hingga 24
  3. dari 25 hingga 35
  4. lebih dari 35




Berapa usiamu?

  1. di bawah 18 tahun
  2. dari 18 hingga 24
  3. dari 25 hingga 35
  4. lebih dari 35

kotak centang

Elemen jenis kotak centang membuat kotak centang yang mirip dengan tombol radio yang memberikan pengguna kemampuan untuk memilih dari opsi yang Anda berikan. Perbedaan utama dari tombol radio adalah pengunjung dapat memilih beberapa opsi sekaligus, dan benderanya sendiri ditandai dengan kotak, bukan lingkaran. Seperti halnya tombol radio, sekelompok kotak centang dibuat dengan menetapkan nilai atribut yang sama pada setiap item Jenis elemen INPUT, namun setiap kotak centang memiliki arti tersendiri. Sintaks dasar kotak centang adalah:

Artinya, suatu acara dilampirkan ke tombol diperiksa, seperti halnya tombol radio, menentukan bahwa kotak centang harus dicentang secara default saat halaman dimuat. Atribut ini dapat diatur secara bersamaan untuk beberapa kotak centang grup.
Contoh penggunaan kotak centang berikut ini memiliki beberapa pilihan jawaban default:

Contoh: Menggunakan tombol radio

  • Cobalah sendiri »
  1. Jazz
  2. biru
  3. Batu
  4. Lagu
  5. Negara




Genre musik apa yang kamu suka?

  1. Jazz
  2. biru
  3. Batu
  4. Lagu
  5. Negara

Tombol kirim dan setel ulang

Elemen jenis kirim membuat tombol yang, ketika diklik, mengirimkan browser ke skrip server untuk memproses data yang dimasukkan oleh pengguna ke dalam formulir. Jika kita membuat tombol yang menghapus formulir, maka kita menetapkan atributnya jenis nilai "setel ulang". elemen jenis kirim atribut opsional dapat ditetapkan Jenis elemen INPUT. Atribut nilai digunakan dalam elemen ini untuk menentukan teks yang menunjukkan label pada tombol. Secara default, browser memiliki tulisan “Kirim” pada tombol; jika Anda tidak puas dengan tulisan ini, masukkan sendiri. Karena gaya tombol konfirmasi mungkin berbeda di berbagai browser, lebih baik sesuaikan sendiri gaya tombol tersebut menggunakan alat CSS atau menggunakan tombol grafis.
Membuat tombol konfirmasi dan hapus:

Contoh: Menggunakan kirim dan setel ulang

  • Cobalah sendiri »

Mengklik tombol Reset akan mengatur ulang semua data yang dimasukkan pengguna.





Atribut tindakan.

Utama untuk elemen

adalah atribut tindakan, yang menentukan penangan data untuk formulir. Pengendali data adalah file yang menjelaskan apa yang harus dilakukan dengan data formulir. Hasil dari pemrosesan ini adalah halaman HTML baru yang dikembalikan ke browser. Dengan kata lain, dalam atribut tindakan menentukan jalur URL ke file pengendali di server (terkadang disebut halaman skrip) untuk memproses formulir. Sintaksnya adalah sebagai berikut:

…

File pemrosesan terletak di server mytestserver.com dalam sebuah folder folder nama dan nama skrip server yang akan memproses data - obrabotchik.php. Semua data yang Anda masukkan ke dalam formulir di halaman web akan ditransfer kepadanya. Ekstensi .php menunjukkan bahwa formulir yang ditentukan diproses oleh skrip yang ditulis dalam PHP. Handlernya sendiri bisa ditulis dalam bahasa lain, misalnya bisa bahasa scripting Python, Ruby, dll.
Dianjurkan untuk selalu menetapkan nilai atribut tindakan. Jika formulir harus meneruskan nilai ke halaman yang sama di mana ia berada, berikan string kosong sebagai nilai atribut tindakan: action="".

atribut metode

Artinya, suatu acara dilampirkan ke tombol metode menentukan bagaimana informasi harus ditransfer ke server. Metode pengiriman formulir yang Anda pilih bergantung pada data yang ingin Anda kirimkan bersama formulir. Volume data memainkan peran utama di sini. Yang paling populer adalah dua metode mentransfer data sumber formulir Anda dari browser ke server: MENDAPATKAN Dan POS. Metode ini dapat diatur ke metode mana pun yang Anda pilih, dan jika Anda tidak menentukannya, metode default akan digunakan MENDAPATKAN. Mari kita pertimbangkan penggunaan masing-masingnya.

metode POSTING

Metode POS paket membentuk data dan mengirimkannya ke server tanpa sepengetahuan pengguna, karena data terdapat di badan pesan. Browser web, saat menggunakan metode ini POS mengirimkan permintaan ke server yang terdiri dari header khusus diikuti dengan data formulir. Karena isi permintaan ini hanya tersedia untuk server, metodenya POS digunakan untuk mengirimkan data rahasia seperti kata sandi, detail kartu bank, dan informasi pribadi pengguna lainnya. Metode POS juga cocok untuk mengirimkan informasi dalam jumlah besar, karena tidak seperti metodenya MENDAPATKAN, tidak ada batasan jumlah karakter yang dikirimkan.

metode DAPATKAN

Seperti yang sudah Anda ketahui, tugas utama browser adalah menerima halaman web dari server. Jadi ketika Anda menggunakan metode tersebut MENDAPATKAN, browser Anda hanya mengambil halaman web seperti biasanya. Metode MENDAPATKAN juga membungkus data formulir, tetapi menambahkannya ke akhir URL sebelum mengirim permintaan ke server. Untuk memahami cara kerja metode ini MENDAPATKAN, mari kita lihat aksinya. Buka contoh pertama dari pelajaran ini (Contoh: Formulir HTML Sederhana) di Notepad (misalnya Notepad++) dan buat perubahan kecil pada kode HTML:

itu. mengganti POS pada MENDAPATKAN.
Simpan file dengan nama nama_file.html dan refresh halaman browser (F5), lalu isi form, misalnya Vasya Boneka, dan klik tombol “Kirim”. Di bilah alamat browser Anda, Anda akan melihat sesuatu seperti ini:

File_name.html?nama depan=Vasya&nama belakang=Pupkin

Sekarang Anda dapat melihat nama setiap elemen formulir, serta nilainya, di sini, di URL.
URL dipisahkan dari data formulir lainnya dengan tanda tanya, dan nama variabel serta nilai dipisahkan dengan tanda ampersand (&) .
Metode ini sebaiknya digunakan jika Anda tidak mentransfer informasi dalam jumlah besar.
Cara ini tidak akan berfungsi jika data di formulir Anda bersifat sensitif, seperti menyimpan nomor kartu bank atau kata sandi.
Selain itu, metodenya MENDAPATKAN tidak cocok jika ingin mengirim file ke server beserta formnya.

Mengelompokkan elemen bentuk

Elemen bentuk yang memiliki keterkaitan makna dapat dikelompokkan antar tag

Dan
. Browser akan ditampilkan
dalam bentuk bingkai di sekeliling sekelompok elemen bentuk. Tampilan frame dapat diubah menggunakan Cascading Style Sheets (CSS).
Untuk menambahkan judul untuk setiap grup, Anda memerlukan sebuah elemen , yang menentukan teks judul grup yang akan disematkan dalam bingkai.

F formulir dalam html dimaksudkan untuk pertukaran data antara pengguna dan server. Ruang lingkup penerapan formulir tidak terbatas pada pengiriman data ke server; menggunakan skrip klien, Anda dapat mengakses elemen formulir apa pun, mengubahnya, dan menerapkannya sesuai kebijaksanaan Anda.

Tombol digunakan untuk mengirimkan formulir ke server dan fungsi yang diperlukan dipanggil., efek yang sama dapat dicapai dengan menekan tombol Memasuki dalam formulir. Kapan bentuk html dikirim ke server, kontrol data ditransfer ke program CGI yang ditentukan oleh parameter tindakan dari tag FORM. Disingkat CGI (Antarmuka Gerbang Umum, antarmuka gerbang umum) menunjukkan protokol dimana program berinteraksi dengan server web. Dengan menggunakan CGI, Anda dapat menjalankan program di server dalam bahasa pemrograman apa pun dan menampilkan hasil tindakannya dalam bentuk halaman web. Bahasa yang paling populer adalah Perl, PHP, C.

Tag FORMULIR - membuat formulir

Untuk memberi tahu browser di mana memulai dan mengakhiri bentuk html, tag FORM digunakan. Anda dapat menempatkan tag HTML apa pun yang diperlukan di antara tag pembuka dan penutup. Ini memungkinkan Anda menambahkan elemen formulir ke sel tabel untuk memformatnya, serta menggunakan gambar. Sebuah dokumen dapat berisi sejumlah formulir, tetapi hanya satu formulir yang dapat dikirimkan ke server dalam satu waktu. Oleh karena itu, formulir tidak boleh bertumpuk satu sama lain.


Di versi HTML manakah elemen kanvas muncul?
XHTML Dasar 1.1
HTML 4.01 Transisi
HTML 5


Atribut tag FORM diberikan di bawah ini:

  • tindakan- menentukan pengendali yang data formulirnya diakses ketika dikirim ke server; pengendali dapat berupa program CGI atau dokumen HTML, dan Anda juga dapat menentukan alamat email, dimulai dengan kata kunci tapi.
  • enctype- mengatur jenis data yang dikirim bersama formulir.
  • metode- parameter ini memberi tahu server tentang tujuan permintaan; dua metode utama digunakan: MENDAPATKAN Dan POS:
    • mendapatkan- metode ini adalah salah satu yang paling umum dan dirancang untuk memperoleh informasi yang diperlukan dan mengirimkan data di bilah alamat.
    • pos- mengirimkan data ke server dalam permintaan browser, yang memungkinkan Anda mengirim lebih banyak data daripada yang tersedia untuk metode tersebut MENDAPATKAN, karena memiliki batas 4 KB.
  • target- setelah formulir diproses, data dikembalikan dalam bentuk dokumen HTML, dan dengan menggunakan atribut ini Anda dapat menentukan jendela tempat halaman web akhir akan dimuat. Nama jendela ditentukan oleh parameter NAMA.
    • _kosong- dimuat di jendela browser baru;
    • _diri sendiri- memuat halaman yang dikembalikan oleh pengendali formulir ke jendela saat ini;
    • _induk- memuat halaman ke dalam bingkai induk, jika tidak ada bingkai, maka parameter ini berfungsi sebagai _diri sendiri;
    • _atas- membatalkan semua frame, jika ada, dan memuat halaman di jendela browser lengkap, di jika tidak opsi ini berfungsi seperti _diri sendiri.

Elemen bentuk

Formulir hanyalah wadah untuk menempatkan objek yang menduplikasi elemen antarmuka sistem operasi: tombol, kotak kombo, tombol radio, kotak centang, dll.

Bidang teks

Bidang teks dimaksudkan untuk memasukkan karakter dari keyboard. Ada tiga elemen formulir yang digunakan untuk tujuan ini - bidang teks satu baris, bidang kata sandi, dan bidang teks multi-baris:

  • Bidang teks satu baris- bidang ini ditujukan bagi pengguna untuk memasukkan sebaris teks. Ukuran bidang dapat dibatasi lebarnya, namun hal ini dilakukan lebih untuk kenyamanan desain sehingga elemen dapat masuk ke dalam ruang yang dialokasikan untuknya. Saat membatasi lebar bidang, teks dapat ditulis seperti biasa, namun saat mengetik, karakter yang dimasukkan sebelumnya disembunyikan.
    • panjang maksimal- jumlah karakter maksimum yang diperbolehkan saat mengetik; jika parameter ini dihilangkan, maka jumlah karakter yang dimasukkan tidak terbatas.
    • Jenis elemen INPUT- nama field, dimaksudkan agar pemroses formulir dapat mengidentifikasi field tersebut.
    • ukuran- lebar bidang, ukuran fisik tergantung pada pengaturan sistem operasi dan browser yang dipilih.
    • Daftar Daftar opsi yang dapat dipilih saat mengetik di kolom teks.- teks awal yang terdapat pada field.

Contoh penggunaan bidang teks diberikan di bawah ini:


Masukkan nama:



Di browser kode ini akan terlihat seperti ini:

Masukkan nama:

Lebar bidang teks adalah nilai yang tidak stabil dan dapat bervariasi dalam batas kecil dari satu tempat ke tempat lain. Untuk formulir html , yang terletak pada kolom dengan lebar terbatas, perubahan tersebut menyebabkan terganggunya tata letak aslinya. Dalam hal ini, lebih baik hindari penggunaan parameter sama sekali ukuran dan menggantinya dengan gaya. Selain itu, CSS memungkinkan Anda untuk berubah (latar belakang), (font) Dan (berbatasan).

Dengan menerapkan gaya, tampilannya mungkin seperti ini:

Masukkan nama:
  • Bidang kata sandi- bidang teks biasa, teks yang dimasukkan ditampilkan sebagai tanda bintang. Fitur ini dirancang untuk mencegah siapa pun mengintip kata sandi yang dimasukkan. Opsi kolom kata sandi sama dengan opsi kolom teks. Bidang kata sandi banyak digunakan di situs web untuk memberi otorisasi kepada pengguna dan membatasi akses ke bagian situs web yang memerlukan konfirmasi hak akses.


Login:
Kata sandi:


Mari kita lihat apa yang terjadi di browser:

Login: Kata sandi:
  • Bidang teks multibaris- untuk membuat area di mana Anda dapat memasukkan beberapa baris teks, gunakan tag TEKSTAREA. Berbeda dengan tagnya MASUKAN, diperbolehkan membuat jeda baris pada kolom teks; mereka disimpan saat mengirim data ke server. Opsi bidang berbeda dari opsi satu baris dan tercantum di bawah ini:
    • kol- lebar bidang teks, yang ditentukan oleh jumlah karakter dalam font monospace.
    • cacat- memblokir akses dan modifikasi bidang teks. Dalam hal ini, ditampilkan dalam warna abu-abu dan tidak dapat diaktifkan oleh pengguna.
    • Jenis elemen INPUT- mendefinisikan nama elemen unik TEKSTAREA. Biasanya, nama ini digunakan saat mengirim data ke server atau saat mengakses field melalui skrip. Nama adalah sekumpulan karakter, termasuk angka dan huruf.
    • hanya bisa dibaca- kapan harus menandai TEKSTAREA Ketika parameter ini ditambahkan, kolom teks tidak tersedia untuk diubah oleh pengguna, termasuk memasukkan teks baru atau memodifikasi teks yang sudah ada.
    • baris- tinggi bidang teks, yang ditentukan oleh jumlah baris yang ditampilkan tanpa menggulir konten. Jika ukuran font diubah menggunakan gaya, tinggi margin juga berubah.
    • membungkus- parameter memberitahu browser cara membungkus teks di lapangan TEKSTAREA dan dalam bentuk apa mengirim data ke server. Jika opsi ini tidak ada, teks dalam bidang diketik dalam satu baris, dan bilah gulir horizontal muncul bila jumlah karakter yang dimasukkan melebihi lebar area.

Antar tag Anda dapat menyisipkan teks apa pun yang akan ditampilkan di dalam bidang.


Masukkan nama:

Masukkan ulasan Anda:


Di browser kita akan melihat:

Masukkan nama:

Masukkan ulasan Anda:

Nah, sekarang Anda memiliki formulir umpan balik yang hampir siap pakai, jika Anda memberikan gaya tertentu, Anda akan mendapatkan formulir yang cukup bagus formulir html untuk situs tersebut.

Gambar di bidang teks

Gambar di sebelah kolom teks biasanya ditambahkan untuk menarik perhatian pengguna dan untuk tujuan desain. Gaya memungkinkan Anda menyisipkan gambar langsung ke kolom input teks.

Pertama, siapkan gambar yang diperlukan, lalu tambahkan ke tag MASUKAN sebagai latar belakang menggunakan . Gambar asli dapat diperkecil dalam editor grafis atau sebaliknya, tinggi bidang dapat diperbesar dengan menyesuaikannya dengan tinggi gambar. Untuk tujuan ini, properti digunakan tinggi. Sebagai argumen parameter latar belakang harus digunakan tidak ada pengulangan, maka gambar hanya akan ditampilkan satu kali dan tidak akan berulang seperti latar belakang default. Untuk menghindari penulisan teks di atas gambar, pada tag style MASUKAN atribut harus ditambahkan padding-kiri. Ini memastikan bahwa teks diatur di sebelah kanan gambar, dan nilainya bergantung pada lebar gambar.

Sesuatu seperti ini:

Login: Kata sandi:

Karena bidang teks ditampilkan tersembunyi oleh batas 3D, tinggi sebenarnya dari area tersebut sedikit lebih kecil dari tinggi yang ditentukan. Jadi, dalam contoh ini, gambar dengan tinggi 34px digunakan; jika Anda menetapkan nilai margin yang sama, maka gambar akan dipotong dari bawah. Untuk mencegah hal ini terjadi, ketinggian bidang pada contoh diatur lebih tinggi. Untuk tujuan yang sama, Anda dapat mengatur jenis bingkai yang berbeda menggunakan gaya.

Tombol

Tombol adalah salah satu elemen antarmuka yang paling jelas dan intuitif. Dari penampilannya langsung terlihat jelas bahwa satu-satunya tindakan yang dapat dilakukan dengan mereka adalah mengkliknya. Karena fitur ini, tombol sering digunakan dalam formulir, terutama saat mengirimkan dan membersihkannya.

Tombol pada halaman web dapat dibuat dengan dua cara - menggunakan tag MASUKAN dan menandai pengganti. Pertama-tama mari kita pertimbangkan untuk menambahkan tombol via MASUKAN dan sintaksisnya.

Hanya ada dua parameter utama - ini adalah Jenis elemen INPUT Dan Daftar Daftar opsi yang dapat dipilih saat mengetik di kolom teks.. Atribut Jenis elemen INPUT menentukan nama tombol dan dimaksudkan untuk memungkinkan pemroses formulir mengidentifikasi bidang ini. Parameter Jenis elemen INPUT dapat dihilangkan, dalam hal ini nilai tombol tidak dikirim ke server. Nilai tombol dan label di atasnya diatur secara bersamaan menggunakan parameter Daftar Daftar opsi yang dapat dipilih saat mengetik di kolom teks..




Anda dapat menempatkan sejumlah spasi pada label pada tombol, dengan menggunakannya Anda dapat menyesuaikan lebarnya.

Cara kedua untuk membuat tombol didasarkan pada penggunaan tag pengganti. Dalam tindakannya menyerupai hasil yang diperoleh dengan menggunakan tag MASUKAN. Berbeda dengan tag ini, pengganti menawarkan opsi lanjutan untuk membuat tombol. Misalnya, pada tombol seperti itu Anda dapat menempatkan apa saja elemen HTML, termasuk . Dengan menggunakan gaya, Anda dapat mengatur tampilan tombol dengan mengubah font, warna latar belakang, ukuran, dan parameter lainnya.

Secara teori, tag pengganti harus ditempatkan di dalam formulir yang ditetapkan oleh elemen MEMBENTUK. Namun, browser tidak menampilkan pesan kesalahan dan berfungsi dengan benar dengan tag tersebut pengganti, jika itu terjadi secara independen. Namun jika hasil klik tombol perlu dikirim ke server, maka tempatkan pengganti antar tag MEMBENTUK Perlu.

Contoh berikut menunjukkan cara membuat tombol biasa dengan teks, serta tombol dengan penggunaan simultan teks dan gambar. Untuk memastikan gambar dan teks sejajar pada sumbu yang sama, atribut ditambahkan absmiddie untuk tag IMG.


Inilah yang terjadi:

Tombol dengan teks Mengirim
  • Di IE dan Firefox (hingga versi 18) dan fungsi yang diperlukan dipanggil.- dirancang untuk mengirim data ke server. Tampilannya tidak berbeda dengan tombol lainnya, tetapi ketika Anda mengkliknya, tombol tersebut akan dijalankan program server, ditentukan oleh parameter tindakan menandai MEMBENTUK. Program ini, juga disebut form handler, menerima data yang dimasukkan oleh pengguna di kolom formulir, melakukan manipulasi yang diperlukan dengannya, dan kemudian mengembalikan hasilnya dalam bentuk dokumen HTML. Apa sebenarnya yang dilakukan oleh pawang bergantung pada pembuat situs; Jadi, teknologi serupa digunakan untuk membuat survei, forum, buku tamu, tes dan banyak hal lainnya.



Peramban akan menampilkan:

  • Di IE dan Firefox (hingga versi 18) Tip: Berhati-hatilah saat memilih label tombol- saat Anda menekan tombol Tip: Berhati-hatilah saat memilih label tombol data formulir dikembalikan ke nilai aslinya. Biasanya, tombol ini digunakan untuk menghapus informasi yang dimasukkan dalam kolom formulir. Namun untuk bentuk yang besar dari menggunakan tombol Tip: Berhati-hatilah saat memilih label tombol Lebih baik menolak sama sekali agar tidak salah mengkliknya, karena nanti Anda harus mengisi formulir lagi.

Di bawah ini adalah formulir dengan satu bidang teks yang sudah berisi teks yang dimasukkan sebelumnya menggunakan parameter Daftar Daftar opsi yang dapat dipilih saat mengetik di kolom teks. menandai MASUKAN. Setelah mengubah teks dan mengklik tombol "Hapus", nilai bidang akan dipulihkan dan pesan "Masukkan teks" akan muncul lagi di dalamnya.





Mari kita lihat kodenya formulir html di tampilan browser: Bidang ini memiliki tiga parameter utama: Jenis elemen INPUT, Daftar Daftar opsi yang dapat dipilih saat mengetik di kolom teks. Dan diperiksa:

  • Jenis elemen INPUT- mengidentifikasi bidang secara unik, selain itu, karena tombol radio adalah elemen grup, nama semua elemen grup harus sama. Pendekatan ini dengan jelas menetapkan bahwa suatu bidang adalah milik kelompok tertentu.
  • Daftar Daftar opsi yang dapat dipilih saat mengetik di kolom teks.- menentukan nilai apa yang akan dikirim ke server. Di sini, setiap elemen harus memiliki elemennya sendiri nilai unik sehingga Anda dapat mengidentifikasi item mana yang dipilih oleh pengguna.
  • diperiksa- digunakan untuk memilih item daftar terlebih dahulu.

Menurut definisi, satu set tombol radio hanya dapat memilih satu item, jadi menambahkan diperiksa ke beberapa bidang sekaligus tidak akan menghasilkan hasil yang luar biasa. Bagaimanapun, elemen yang muncul terakhir dalam kode HTML akan ditandai.


Apa itu 2+2?
3
4
Kegelapan

Di browser formulirnya akan terlihat seperti:

Apa itu 2+2?
3
4
Kegelapan

kotak centang

kotak centang (kotak centang) digunakan ketika perlu untuk memilih dua atau lebih opsi dari daftar yang diusulkan. Jika Anda hanya perlu memilih satu opsi, maka Anda sebaiknya memilih tombol radio (tombol radio).

Parameter kotak centangnya identik dengan radio button, yaitu: Jenis elemen INPUT menentukan nama bidang, Daftar Daftar opsi yang dapat dipilih saat mengetik di kolom teks.- nilainya, a diperiksa mengatur kotak centang sebagai dicentang. Dalam hal ini, setiap kotak centang yang termasuk dalam grup dianggap independen, sehingga nama dan nilainya harus berbeda.


dengan apa sistem operasi apakah kalian saling kenal?
jendela 95/98
jendela 2000
Sistem X
Linux
X3-DOS

Browser akan ditampilkan.

Dengan munculnya HTML5, formulir menjadi lebih serbaguna. Elemen masukan sekarang dapat memuat alamat email, tanggal, dan lainnya, semuanya dapat ditandai sebagai wajib tanpa menggunakan javascript - dan ini hanyalah beberapa fitur yang paling berharga. Selain itu, kini Anda dapat menggunakan beberapa tombol kirim untuk satu formulir, dan sekarang Anda dapat memindahkan tombol kirim ke luar formulir.

Beberapa pengiriman dalam satu formulir

Sampai saat ini, Anda hanya dapat menyisipkan satu tombol kirim ke dalam formulir, jika tidak, formulir hanya akan memproses tombol terakhir. Dengan menambahkan method="post" dan url ke elemen formulir "form", kita mendapatkan formulir yang berfungsi.

Sekarang situasinya telah berubah - properti baru "formmethod" dan "formaction" telah ditambahkan ke HTML. Mereka memungkinkan Anda menambahkan metode posting dan url langsung ke tombol "kirim", jadi Anda tidak perlu menambahkan apa pun ke formulir. Melampirkan parameter ini pada tombol "kirim" dan bukan pada formulir akan menambah fleksibilitas pada formulir. Sekarang Anda dapat membuat tombol sebanyak yang diperlukan untuk formulir.

Sekarang setiap tombol "kirim" milik url yang berbeda dan semua ini menghilangkan kebutuhan untuk menulis kode javascript. Semua ini berfungsi dengan baik dan sekarang ketika Anda mengklik tombol, formulir akan menerima metode formulir dan tindakan formasi, yang akan ditimpa parameter standar metode dan tindakan. Jika formulir berisi tombol "kirim" biasa tanpa parameter baru, formulir akan mengembalikan nilai formulir yang ditetapkan untuk elemen formulir.

Properti formmethod dan formaction didukung oleh semuanya browser populer

Elemen formulir (input, pilih, textarea) di luar formulir

Merupakan fakta yang diterima secara umum bahwa semua elemen suatu bentuk yang menjadi miliknya harus ditempatkan di dalam suatu elemen

. Hal ini mengurangi fleksibilitas dalam desain formulir itu sendiri. Berkat atribut "form" yang baru, sekarang elemen apa pun dapat dipindahkan ke luar formulir dan elemen formulir apa pun dapat ditempatkan di bagian mana pun pada halaman. Untuk melakukan ini, Anda hanya memerlukan formulir tambahkan ID lalu tambahkan nilai ID tersebut ke semua elemen sebagai atribut.

Saat ini atribut form didukung oleh semua browser populer, kecuali Penjelajah Internet(hingga versi 10).

  • Sergei Savenkov

    semacam ulasan "pendek"... seolah-olah mereka sedang terburu-buru di suatu tempat