Kumpulan pengumpulan data bentuk dan formulir dalam HTML

Di sini kami akan memperkenalkan pengetahuan tentang elemen formulir dan pengiriman formulir.

Antarmuka DOM dari elemen bentuk adalah HTMLFormElement , yang mewarisi dari HTMLElement , sehingga memiliki atribut default yang sama dengan elemen HTML lainnya, tetapi memiliki beberapa atribut dan metode unik: itu sendiri:

Elemen input adalah elemen bentuk yang sangat banyak digunakan.

Input Teks <Jenis Input = Nama Teks =>

Kirim Input <Input Tipe = Kirim>

Input tombol tunggal <Jenis Input = Radio Name = Harus memiliki nilai nama yang sama = Nilai pengisian paling baik untuk disesuaikan>

Masukkan <input type = centang nama = nilai nama yang sama = nilai yang sesuai berbeda>

Input Digital <Jenis Input = Nomor Min = Max => Kotak Input hanya dapat memasukkan angka, dan dapat mengatur nilai maksimum dan nilai minimum.

Rentang input <input type = range min = max => Mirip dengan angka, tetapi menunjukkan bilah geser alih -alih kotak input.

Input warna <input type = Color> akan memunculkan pemilih warna.

Input Tanggal <Input Tipe = Tanggal> akan memunculkan pemilih tanggal.

Input Email <Input Type = Email> ditampilkan sebagai kotak input teks dan keyboard khusus akan muncul.

Input Tel <Input Type = Tel> Mirip dengan Input Email

Input URL <Input Type = URL> Mirip dengan Input Email, keyboard yang disesuaikan juga akan muncul.

Elemen TextArea dapat membuat area teks multi -garis.

<name TextArea = id = warna = 30 baris = 10> </textarea>

Nilai atribut COLS dan ROW mewakili lebar dan tinggi area teks.

Pilih elemen dan elemen opsi dapat digunakan untuk membuat menu drop -down.

<Pilih name = id => <option value => </tiptions

Bagaimana cara mengelompokkan?

contoh:

<Input Type = Radio Name = Nilai Favorit = Play Game> Play Games

<input type = nama radio = nilai favorit = kode menulis> kode tulis

<Input Type = Radio Name = Nilai Seks = Pria> Pria

<Input Type = Radio Name = Nilai Seks = Wanita> Wanita, Wanita,

Ini adalah dua kelompok radio

Berikan informasi prompt (petunjuk) yang dapat menggambarkan nilai yang diharapkan dari bidang input.

Prompt akan ditampilkan saat bidang input kosong, dan akan hilang ketika bidang mendapatkan fokus.

Tentukan input tersembunyi. Bidang tersembunyi tidak terlihat oleh pengguna. Bidang tersembunyi biasanya menyimpan nilai default, dan nilainya juga dapat dimodifikasi oleh JavaScript.

Misalnya, untuk keamanan, nilai dan nilai nilai yang tidak terlihat oleh pengguna di latar belakang dapat digunakan untuk memeriksa latar belakang untuk memeriksa dan mencegah halaman pemalsuan.

Tambahkan tombol pengiriman ke formulir untuk memungkinkan pengguna mengirimkan formulir.

Tiga tombol berikut dapat memicu acara pengiriman formulir saat mengklik:

 <input type = kirim /> <tombol type = kirim> </button> <input type = gambar />

Jenis nilai default dari elemen tombol dalam spesifikasi dikirimkan, tetapi nilai meditasi adalah tombol di bawah IE678, jadi perlu secara manual menambahkan tipe = kirim properti ke elemen tombol dari kompatibilitas.

Orang awal mungkin berpikir bahwa pengiriman formulir dipicu oleh acara klik tombol pengiriman.

 Form.addeventListener ('kirim', fungsi (e) {if (valid ()) {...} e.preventDefault ()})

Ketika tidak ada satu dari tiga tombol yang disebutkan di atas dalam elemen formulir, pengguna tidak akan dapat mengirimkan formulir (tombol enter juga tidak valid submit() . Pengoperasian verifikasi bentuk harus sebelum memanggil metode submit() .

 if (value ()) {form.submit ()}

Berdasarkan teknologi Ajax+Cross -Domain Post (CORS) yang populer saat ini, kami kemungkinan tidak menggunakan elemen formulir untuk secara langsung mengirimkan data ke server. Meskipun ini layak, ada fenomena degradasi dalam banyak kasus.

JavaScript dapat digunakan untuk memverifikasi data input ini dalam formulir HTML sebelum data dikirim ke server.

Data bentuk khas ini diverifikasi oleh JavaScript adalah:

Apakah pengguna telah mengisi item yang diperlukan dalam formulir?

Apakah alamat surat dimasukkan oleh pengguna adalah legal?

Apakah pengguna sudah memasukkan tanggal hukum?

Apakah pengguna memasukkan teks di bidang numerik?

Fungsi berikut digunakan untuk memeriksa apakah pengguna telah mengisi item yang diperlukan (atau diperlukan) dalam formulir. Jika harus diisi atau opsi kosong, maka kotak peringatan akan muncul, dan nilai pengembalian fungsi salah, jika tidak, nilai pengembalian fungsi adalah benar (berarti data tidak masalah):

 Function value_required (field, alerttxt) {with (field) {if (value == null || value ==) {alerttxt);

Di bawah ini adalah kode dengan formulir HTML:

 <html> <head> <script type = text/javaScript> function value_required (field, alerttxt) {with (field) {if (value == null || value ==) {waspada (lerttxt); {Return true}} function value_form (this) {with (this) {if (value_required (email, email harus diisi!) {Email.foc us (); return false}}} </script> </head> <body> <Form Action = SubmitPage.htm Onsubmit = return validate_form (this) method = Post> Email: <Input type = nama teks = 30> <input type = kirim nilai = kirim> </sorm> </body> <body> /html>

Fungsi berikut memeriksa apakah data input sesuai dengan sintaks dasar alamat email.

Ini berarti bahwa data input harus berisi@ simbol dan nomor titik (.). Pada saat yang sama,@ bukan karakter pertama dari alamat email, dan setidaknya satu nomor poin setelah@ 同时:

 Function value_email (field, alerttxt) {with (field) {apos = value.indexof (@) dotpos = value.lastIndexOf (.) If (apos <1 || dotpos-apos <2) lert (peringatan); Else {return true}}}

Di bawah ini adalah kode lengkap dengan formulir HTML:

 <html> <head> <script type = text/javaScript> function value_email (bidang, peringatan) {dengan (bidang) {apos = value.indexof (@) dotpos = value .lastIndexOf (.) if (apos <1 || dotpos-apos <2) {alert (alertTxt); = False) {email.focus (); Nama Teks = Ukuran Email = 30> <Input Type = Kirim Nilai = Kirim> </form> </body> </html>

Dengan tidak adanya paket elemen formulir, bahkan jika fokus halaman saat ini ada pada elemen formulir, tekan tombol Enter tidak akan memicu bentuk formulir. , menghancurkan asli asli mengalir. Solusi termudah adalah membungkusnya dengan elemen bentuk pada lapisan luar dan menentukan bahwa setidaknya ada tombol pengiriman di elemen formulir. Pada saat ini, ketika domain input dalam formulir difokuskan, pengguna menekan tombol ENTER untuk memicu pengiriman.

Saat mengirimkan formulir, browser tingkat tinggi, termasuk browser seluler, akan bertanya kepada pengguna jika Anda perlu mengingat kata sandi akun pengguna. Dengan tidak adanya elemen bentuk, browser tidak akan memunculkan jendela penyelidikan.

Ketika kami mengembangkan aplikasi formulir, kami tidak harus mencoba menghapus elemen formulir dan mengirimkannya secara langsung. Dikirim Pemrosesan Insiden Dalam acara pengiriman elemen formulir, bukan acara klik tombol pengiriman.

Lihat:

Elemen bentuk dan pengiriman formulir