Borang HTML5: Jenis Input (Bahagian 1) - SitePoint

penjelasan terperinci dan amalan terbaik untuk jenis input bentuk html5

mata teras

Borang HTML5 Memperkenalkan jenis input baru, seperti e -mel, carian, tarikh, masa, nombor, julat, warna, dan lain -lain. Jenis -jenis ini menyediakan elemen antara muka pengguna dan fungsi pengesahan data asli yang lebih konsisten dengan jenis data. Malah dalam pelayar yang lebih tua, jenis input baru ini berfungsi dengan baik, kecuali bahawa mereka akan muncul sebagai medan teks standard secara lalai.
Jenis Input Carian () menyediakan medan carian untuk menyediakan pengguna dengan tapak carian intuitif. Ia biasanya dilengkapi dengan butang yang jelas terbina dalam dan boleh digayakan untuk memadankan kotak carian pelayar atau sistem operasi.
• type="search" Jenis input e -mel () digunakan untuk menentukan satu atau lebih alamat e -mel. Ia menyokong atribut Boolean
untuk pelbagai alamat e-mel yang dipisahkan koma. Peranti TouchPad biasanya memaparkan papan kekunci yang dioptimumkan untuk input e -mel apabila medan ini mendapat fokus, dan beberapa pelayar juga menyediakan mesej ralat untuk input e -mel yang tidak sah.
• type="email" Jenis Input URL () digunakan untuk menentukan alamat rangkaian, sama dengan jenis input e -mel, yang memaparkan sebagai medan teks biasa, tetapi menyediakan papan kekunci yang dioptimumkan untuk input alamat rangkaian pada skrin sentuh. Pelayar moden menggunakan jenis input ini untuk mengesahkan format protokol umum URL. multiple
• type="url" (berikut adalah dikutip dari buku "HTML5 & CSS3 untuk dunia nyata, edisi ke-2" yang dikarang oleh Alexis Goldstein, Louis Lazaris dan Estelle Weyl. Anda juga boleh mencari di sini
anda mungkin sudah biasa dengan atribut

elemen

. Harta ini menentukan jenis input bentuk yang akan dibentangkan kepada pengguna. Jika harta ini ditinggalkan -atau untuk jenis input baru dan pelayar yang lebih tua, jika penyemak imbas tidak memahami jenisnya -ia tetap sah; Inilah yang menjadikan bentuk HTML5 masih berfungsi hari ini, walaupun anda masih menyokong pelayar yang lebih tua. Jika anda menggunakan jenis input baru, seperti e -mel atau carian, pelayar yang lebih tua hanya akan memaparkan medan teks standard kepada pengguna. Borang pendaftaran kami kini menggunakan empat daripada sepuluh jenis input yang anda kenal dengan: kotak semak, teks, kata laluan, dan hantar. Berikut adalah senarai semua jenis yang tersedia sebelum html5:

input Butang type type="text" Cek Kotak

Fail

tersembunyi
imej
kata laluan
radio
Reset
hantar
teks
Spesifikasi HTML5 HTML5 memberikan kami sembilan jenis input baru yang menyediakan elemen UI dan keupayaan pengesahan data asli yang lebih sesuai dengan data:
• • Cari
  • e -mel
  • url
  • tel
  tarikh
  masa
  nombor
  julat
  warna
  HTML5.1 dan WHATWG HTML Living Standard mengandungi empat jenis input tarikh tambahan, tiga daripadanya disokong dengan baik dalam penyemak imbas moden:
  DateTime-Local
  bulan
  Minggu
  DateTime (tiada penyemak imbas menyokongnya)
  mari kita ketahui lebih lanjut mengenai setiap jenis baru dan cara menggunakannya.
  cari (carian)
  Jenis Input Carian () Menyediakan medan carian - Kawalan input teks tunggal untuk memasukkan satu atau lebih istilah carian. Spesifikasi menunjukkan:

  type="search"

  perbezaan antara keadaan teks dan keadaan carian terutamanya dalam gaya: pada platform di mana medan carian berbeza dari medan teks biasa, keadaan carian dapat menyebabkan penampilan konsisten dengan medan carian platform, dan bukan seperti seperti medan teks biasa.

  Banyak input carian gaya pelayar dengan cara yang konsisten sebagai kotak carian pelayar atau sistem operasi. Pada masa ini, Chrome, Safari, Opera, dan IE telah menambah fungsi input penjelasan dengan mengklik tetikus untuk menyediakan ikon × selepas memasukkan teks, seperti yang ditunjukkan dalam Rajah 4.5. Jenis input Tarikh/Masa juga boleh dibersihkan dalam Chrome dan Opera.

  Rajah 4.5. Pada peranti Apple, medan carian di Chrome, Safari, dan Opera mempunyai sudut bulat secara lalai, sepadan dengan penampilan medan carian peranti. Pada pad sentuh dengan papan kekunci dinamik, butang "Go" akan muncul sebagai ikon carian atau perkataan "carian", bergantung pada peranti. Jika anda memasukkan sifat-sifat tidak standard, Chrome dan Opera akan memaparkan ikon kaca pembesar/mencari dalam medan borang.

  Walaupun anda masih boleh menggunakan
  untuk membuat medan carian, jenis carian baru boleh secara intuitif pengguna segera di mana untuk mencari tapak dan menyediakan antara muka untuk pengguna terbiasa.

  tidak ada medan carian, tetapi inilah contoh cara menggunakannya: results

  Sejak carian, seperti semua jenis input baru, muncul sebagai kotak teks biasa dalam pelayar yang tidak disokong, tidak ada sebab untuk tidak menggunakannya apabila sesuai. type="text" HTML5 Herald alamat e -mel (alamat e -mel)

  <form id="search" method="get">
    <label for="s">Search:</label>
    <input type="search" id="s" name="s"/>
    <input type="submit" value="Search"/>
  </form>

  Jenis e -mel () digunakan untuk menentukan satu atau lebih alamat e -mel. Ia menyokong atribut Boolean

  , membolehkan alamat e-mel yang dipisahkan (ruang pilihan) berganda. Mari tukar borang untuk digunakan

  untuk alamat e -mel pendaftar:

  <form id="search" method="get">
    <label for="s">Search:</label>
    <input type="search" id="s" name="s"/>
    <input type="submit" value="Search"/>
  </form>

  Jika anda menukar jenis input dari teks ke e -mel, seperti yang kita lakukan di sini, anda akan melihat bahawa tidak ada perubahan yang ketara dalam antara muka pengguna; Walau bagaimanapun, terdapat perbezaan di sebalik tabir.

  Jika anda menggunakan peranti sentuh, perubahan ini menjadi jelas. Apabila anda memberi tumpuan kepada medan e -mel, kebanyakan peranti sentuh, seperti iPads atau telefon Android yang menjalankan kromium, papan kekunci paparan yang dioptimumkan untuk input e -mel, termasuk @ simbol, tempoh, dan butang ruang, tetapi bukan koma, seperti yang ditunjukkan dalam Rajah 4.6.

  

  Rajah 4.6.
  Firefox, Chrome, Opera, dan Internet Explorer 10 juga menyediakan mesej ralat untuk input e -mel tidak sah: Jika anda cuba menghantar borang yang tidak dikenali sebagai satu atau lebih alamat e -mel, penyemak imbas akan memberitahu anda apa yang salah. Mesej ralat lalai ditunjukkan dalam Rajah 4.7.

  Rajah 4.7. NOTA: Mesej pengesahan tersuai tidak menyukai mesej ralat lalai yang disediakan oleh penyemak imbas? Gunakan

  untuk menetapkan mesej anda sendiri.
  hanya menerima satu parameter, mesej ralat yang ingin anda sediakan. Jika anda menyediakan mesej pengesahan tersuai, sebaik sahaja nilai menjadi nilai yang sah, anda mesti menetapkan mesej pengesahan kepada rentetan kosong (nilai palsu) untuk membolehkan penyerahan borang:

  .setCustomValidity(errorMsg) Malangnya, semasa anda boleh menukar kandungan mesej, sekurang -kurangnya buat masa ini anda masih terhad oleh penampilannya. setCustomValidity

  url

  <label for="email">My email address is:</label>
  <input type="email" id="email" name="email"/>

  input URL () digunakan untuk menentukan alamat rangkaian. Sama seperti e -mel, ia akan muncul sebagai medan teks biasa. Pada banyak skrin sentuhan, papan kekunci pada skrin yang dipaparkan akan dioptimumkan untuk input alamat rangkaian, dengan slashes ke hadapan (/) dan ".com" pintasan. Mari kita kemas kini borang pendaftaran kami untuk menggunakan jenis input URL:

  Pengesahan URL

  type="url" Semua pelayar moden bermula dengan Internet Explorer 10 jenis input URL sokongan, dan jika nilai tidak bermula dengan protokol, input akan dilaporkan tidak sah. Hanya mengesahkan format protokol umum URL, jadi contohnya, q: //example.xyz akan dianggap sah, walaupun q: // bukan protokol sebenar, .xyz bukan domain peringkat atas sebenar. Jika anda mahu nilai yang dimasukkan untuk memenuhi format yang lebih spesifik, berikan maklumat dalam tag (atau pemegang tempat) untuk memaklumkan pengguna dan menggunakan atribut

  untuk memastikan ketepatannya, seperti yang dinyatakan sebelum ini.

  function setErrorMessages(formControl) {
    var validityState_object = formControl.validity;
    if (validityState_object.valueMissing) {
        formControl.setCustomValidity('Please set an age (required)');  
    } else if (validityState_object.rangeUnderflow) {
        formControl.setCustomValidity('You\'re too young');
    } else if (validityState_object.rangeOverflow) {
        formControl.setCustomValidity('You\'re too old');
    } else if (validityState_object.stepMismatch) {
        formControl.setCustomValidity('Counting half birthdays?');
    } else {
        //如果有效，必须设置虚假值，否则将始终出错
        formControl.setCustomValidity('');
    }
  }

  nombor telefon (nombor telefon)

  Untuk nombor telefon, gunakan jenis input TEL (type="tel"). Tidak seperti URL dan jenis e -mel, jenis TEL tidak menguatkuasakan sintaks atau corak tertentu. Surat dan nombor -sebenarnya, mana -mana watak kecuali pemecahan baris atau pulangan kereta -sah. Ini mempunyai alasan yang baik: Di seluruh dunia, setiap negara mempunyai nombor telefon yang sah dengan pelbagai panjang dan tanda baca, jadi mustahil untuk menentukan format tunggal sebagai standard. Sebagai contoh, di Amerika Syarikat, 1 (415) 555-1212 adalah mudah difahami sebagai 415.555.1212, tetapi syarikat juga boleh menggunakan huruf dalam nombor telefon, seperti (800) panggilan sekarang. Anda boleh menggalakkan pemformatan khusus dengan memasukkan ruang letak dengan sintaks yang betul atau komen selepas input, bersama -sama dengan contoh. Di samping itu, anda boleh menentukan format menggunakan atribut pattern. Sertakan pattern dalam atribut title untuk menyediakan petua dan meningkatkan pengalaman pengguna mesej ralat pengesahan asli. Anda juga boleh menggunakan kaedah setCustomValidity untuk memberikan pengesahan pelanggan yang lebih bermaklumat. Apabila menggunakan jenis input TEL, sentuhan sentuh dinamik biasanya memaparkan papan kekunci telefon, termasuk kunci asterisk dan pound. Anda boleh menggunakan TEL untuk tujuan lain daripada nombor telefon. Sebagai contoh, ia mungkin menjadi papan kekunci terbaik untuk input borang nombor Keselamatan Sosial.

  Soalan Lazim untuk Jenis Input Borang HTML5 (Soalan Lazim)

  Apakah pelbagai jenis jenis input bentuk HTML5?

  HTML5 memperkenalkan pelbagai jenis input bentuk baru. Ini termasuk "warna", "tarikh", "datetime-local", "e-mel", "bulan", "nombor", "julat", "carian", "tel", "masa", "url" dan "minggu ". Setiap jenis input mempunyai tujuan khusus dan dapat meningkatkan pengalaman pengguna laman web dengan menyediakan medan input yang lebih sesuai dan mesra pengguna.

  Bagaimana jenis input "tarikh" dalam kerja HTML5?

  Jenis input "Tarikh" dalam HTML5 mencipta medan input yang membolehkan pengguna memasukkan tarikh. Format tarikh diformat mengikut lokasi penyemak imbas pengguna dan pemilih tarikh biasanya disediakan untuk kemudahan pengguna. Walau bagaimanapun, sokongan untuk jenis input ini berbeza dari penyemak imbas ke penyemak imbas.

  Apa yang berlaku apabila melihat jenis input html5 dalam pelayar yang lebih tua?

  Jika anda melihat jenis input bentuk HTML5 dalam penyemak imbas yang lebih lama yang tidak menyokongnya, penyemak imbas akan lalai ke medan input "teks" standard. Ini bermakna pengguna masih boleh memasukkan maklumat, tetapi ciri -ciri khusus jenis input HTML5 (seperti pemilih tarikh untuk jenis input "Tarikh") tidak akan tersedia.

  Bagaimana untuk mengesahkan input pengguna dalam borang HTML5?

  HTML5 menyediakan pelbagai atribut untuk pengesahan input, termasuk "diperlukan", "corak", dan "min"/"max" jenis input angka. Ciri -ciri ini boleh digunakan untuk memastikan input pengguna memenuhi kriteria tertentu sebelum borang diserahkan.

  Apakah jenis input "julat" dalam html5?

  Jenis input "Julat" dalam HTML5 mencipta gelangsar yang membolehkan pengguna memilih nilai dalam julat tertentu. Anda boleh menentukan julat menggunakan sifat "min" dan "max" dan menentukan nilai lalai menggunakan sifat "nilai".

  Bagaimana jenis input "e -mel" dalam HTML5 meningkatkan pengalaman pengguna?

  Jenis input "E -mel" dalam HTML5 menyediakan cara yang mudah untuk pengguna memasukkan alamat e -mel mereka. Ia termasuk pengesahan terbina dalam untuk memeriksa sama ada teks yang dimasukkan dalam format alamat e-mel. Sesetengah penyemak imbas juga boleh menyediakan autocomplete untuk jenis input ini.

  Apakah tujuan "carian" jenis input dalam html5?

  Jenis input "Carian" dalam HTML5 direka untuk medan carian. Jenis input ini boleh memberikan ciri-ciri khusus carian, seperti membersihkan kotak carian dengan satu klik, atau menunjukkan hasil carian paling terkini kepada pengguna.

  Bagaimana menggunakan jenis input "Nombor" dalam HTML5?

  Jenis input "Nombor" dalam HTML5 membolehkan pengguna memasukkan input digital. Anda boleh menggunakan sifat Min dan Max untuk menentukan julat nombor yang boleh diterima dan menggunakan harta 'langkah' untuk menentukan nilai langkah.

  Apakah jenis input "tel" dalam html5?

  Jenis input "Tel" dalam HTML5 digunakan untuk medan input yang harus mengandungi nombor telefon. Walau bagaimanapun, ia tidak mengesahkan input, jadi anda harus menggunakan JavaScript atau teknik yang serupa untuk pengesahan.

  Bagaimana jenis input "URL" dalam kerja HTML5?

  Jenis input "URL" dalam HTML5 digunakan untuk medan input yang harus mengandungi URL. Ia termasuk pengesahan terbina dalam untuk memeriksa sama ada teks yang dimasukkan dalam format URL. Sesetengah penyemak imbas juga boleh menyediakan autocomplete untuk jenis input ini.

Atas ialah kandungan terperinci Borang HTML5: Jenis Input (Bahagian 1) - SitePoint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!