Contoh analisis unsur bentuk dan atribut baharu dalam kemahiran tutorial HTML5_html5

Artikel ini menggunakan kod contoh untuk menunjukkan elemen bentuk baharu dan atribut HTML5 Kod demonstrasi termasuk atribut pemegang tempat, atribut autofokus, elemen senarai dan senarai data, kotak teks jenis carian, kotak teks jenis e-mel, kotak teks jenis nombor, julat. kotak teks taip, kotak teks jenis tel, kotak teks jenis url, serta tarikh, elemen input jenis masa, dsb.
Kod sampel adalah seperti berikut:

Salin kod

Kod tersebut adalah seperti berikut:

< bahagian>

Panduan Pembangunan Web Mudah Alih HTML5

< ;Elemen baharu HTML5--elemen bentuk


atribut pemegang tempat:
Biasanya digunakan dalam kotak teks
Fungsi utamanya ialah Apabila teks kotak berada dalam keadaan nyahmasukan dan kandungannya kosong, kandungan gesaan untuk kotak teks
Kesan:
Apabila kotak teks mendapat fokus, maklumat gesaan dikosongkan secara automatik Apabila kotak teks hilang fokus dan tiada kandungan dimasukkan, maklumat segera dikosongkan semula secara automatik
Menghapuskan keperluan untuk kotak teks tradisional yang memerlukan bantuan acara onfocel dan onblur
(Serasi dengan kebanyakan penyemak imbas PC dan penyemak imbas Mudah Alih, ia hanya boleh dikatakan bahawa. teknologi sememangnya telah berkembang)
Contoh: < ;input type="text" placeholder="Saya pemegang tempat, digunakan sebagai peringatan">

elemen senarai dan senarai data:
Fungsi utama elemen senarai adalah untuk menggesa input kotak teks, dan sumber data gesaan disediakan oleh senarai data
Pada masa ini, senarai dan senarai data elemen hanya disokong oleh penyemak imbas Opera dan tiada penyemak imbas mudah alih malah menyokong ciri ini
Contoh:

kotak teks jenis carian:
Kotak teks yang digunakan terutamanya untuk mencari kata kunci
Satu-satunya perbezaan antara kotak teks ini dan kotak teks biasa ialah ia dilayari dalam Safari dan Chrome Di bawah penyemak imbas, penampilan kotak teks dibundarkan
Contoh:


Kotak teks jenis e-mel:
ialah kotak teks yang boleh menentukan kandungan e-mel Ia biasanya digunakan dalam kotak teks input untuk memasukkan alamat e-mel kotak teks Ia kelihatan hampir sama dengan kotak teks biasa, tetapi ia sebenarnya berbeza di bawah penyemak imbas mudah alih Safari
Papan kekunci akan memaparkan papan kekunci yang sepadan mengikut jenis kotak teks
Contoh:

:
ialah jenis kotak teks yang digunakan untuk memasukkan nombor
Ia boleh digunakan dengan atribut min, maks dan langkah
Contoh:

 kotak teks jenis julat:<br> Ia ialah jenis kotak teks input julat berangka yang menyediakan kaedah input gelongsor <br> Ia perlu digunakan dengan min, maks, julat dan atribut lain <br> Contoh: <input type="range" value=" 1 " min="0" max="100" step="1"><br> 

 tel Type kotak teks: <br> ialah sejenis kotak teks untuk pengguna memasukkan nombor telefon <br> Dalam penyemak imbas mudah alih, papan kekunci kotak teks ini akan memaparkan papan kekunci yang sepadan mengikut jenis kotak teks <br> Contoh: < input type="tel" placeholder="Saya adalah kotak teks jenis tel"><br> 

< kotak teks taip:
ialah jenis kotak teks untuk pengguna memasukkan alamat Url
Dalam penyemak imbas mudah alih, papan kekunci kotak teks ini akan memaparkan papan kekunci yang sepadan mengikut jenis kotak teks.

tetapi jenis ini tidak disokong secara meluas
Butirannya adalah seperti berikut:
Tarikh dan masa (Termasuk zon waktu ):

Tarikh dan masa (tidak termasuk zon waktu):

Kotak teks Pemilih pilihan masa :

Peti teks pemilih tarikh:

Kotak teks pemilih nombor minggu untuk tahun :
< ;input type="week">
Kotak teks pemilih bulan:



< ;/article>

HTML5 elemen baharu--elemen bentuk

;