Nilai input secara otomatis divalidasi untuk memastikan bahwa itu kosong atau URL yang diformat dengan benar sebelum formulir dapat dikirimkan. Kelas semu <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 2 dan <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 3 CSS secara otomatis diterapkan sebagaimana mestinya untuk menunjukkan secara visual apakah nilai bidang saat ini adalah URL yang valid atau tidak
Pada browser yang tidak mendukung input jenis <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1, input <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1 kembali menjadi input teks standar
Atribut elemen <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 0 berisi string yang secara otomatis divalidasi sesuai dengan sintaks URL. Lebih khusus lagi, ada dua kemungkinan format nilai yang akan lulus validasi
- String kosong ("") yang menunjukkan bahwa pengguna tidak memasukkan nilai atau nilai telah dihapus
- Satu URL absolut yang dibentuk dengan benar. Ini tidak berarti alamat URL ada, tetapi setidaknya diformat dengan benar. Secara sederhana, ini berarti <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 8
Lihat detail tentang cara URL divalidasi untuk memastikan bahwa URL diformat dengan benar
Selain atribut yang beroperasi pada semua <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 0 elemen apa pun jenisnya, input <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1 mendukung atribut berikut
Nilai atribut daftar adalah <input id="myURL" name="myURL" type="url" size="30" /> _1 dari elemen <input id="myURL" name="myURL" type="url" size="30" /> 2 yang terletak di dokumen yang sama. <input id="myURL" name="myURL" type="url" size="30" /> 2 memberikan daftar nilai yang telah ditentukan sebelumnya untuk disarankan kepada pengguna untuk input ini. Nilai apa pun dalam daftar yang tidak kompatibel dengan tidak disertakan dalam opsi yang disarankan. Nilai yang diberikan adalah saran, bukan persyaratan. pengguna dapat memilih dari daftar yang telah ditentukan sebelumnya atau memberikan nilai yang berbeda
Jumlah maksimum karakter (sebagai unit kode UTF-16) yang dapat dimasukkan pengguna ke input <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1. Ini harus berupa nilai bilangan bulat 0 atau lebih tinggi. Jika tidak ada <input id="myURL" name="myURL" type="url" size="30" /> _6 yang ditentukan, atau nilai yang tidak valid ditentukan, input <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1 tidak memiliki panjang maksimum. Nilai ini juga harus lebih besar atau sama dengan nilai <input id="myURL" name="myURL" type="url" size="30" /> 8
Input akan gagal validasi kendala jika panjang nilai teks bidang lebih besar dari <input id="myURL" name="myURL" type="url" size="30" /> 6 panjang unit kode UTF-16. Validasi kendala hanya diterapkan ketika nilai diubah oleh pengguna
Jumlah minimum karakter (sebagai unit kode UTF-16) yang dapat dimasukkan pengguna ke input <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1. Ini harus berupa nilai bilangan bulat bukan negatif yang lebih kecil dari atau sama dengan nilai yang ditentukan oleh <input id="myURL" name="myURL" type="url" size="30" /> 6. Jika tidak ada <input id="myURL" name="myURL" type="url" size="30" /> _8 yang ditentukan, atau nilai yang tidak valid ditentukan, input <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1 tidak memiliki panjang minimum
Input akan gagal validasi kendala jika panjang teks yang dimasukkan ke dalam bidang kurang dari <input id="myURL" name="myURL" type="url" size="30" /> 8 unit kode UTF-16. Validasi kendala hanya diterapkan ketika nilai diubah oleh pengguna
Atribut <input id="myURL" name="myURL" type="url" size="30" minlength="10" maxlength="80" /> _5, jika ditentukan, adalah ekspresi reguler yang inputnya harus cocok agar nilainya lulus validasi kendala. Itu harus ekspresi reguler JavaScript yang valid, seperti yang digunakan oleh tipe <input id="myURL" name="myURL" type="url" size="30" minlength="10" maxlength="80" /> 7, dan seperti yang didokumentasikan dalam panduan kami tentang ekspresi reguler; . Garis miring ke depan tidak boleh ditentukan di sekitar teks pola
Jika pola yang ditentukan tidak ditentukan atau tidak valid, tidak ada ekspresi reguler yang diterapkan dan atribut ini diabaikan sepenuhnya
Catatan. Gunakan atribut untuk menentukan teks yang akan ditampilkan sebagian besar browser sebagai tooltip untuk menjelaskan apa saja persyaratan untuk mencocokkan pola. Anda juga harus menyertakan teks penjelasan lain di dekatnya
Lihat bagian untuk rincian dan contoh
Atribut <input id="myURL" name="myURL" type="url" value="//www.example.com" /> _0 adalah string yang memberikan petunjuk singkat kepada pengguna tentang jenis informasi apa yang diharapkan di lapangan. Itu harus berupa kata atau frasa pendek yang menunjukkan tipe data yang diharapkan, bukan pesan penjelasan. Teks tidak boleh menyertakan carriage return atau line feed
Jika konten kontrol memiliki satu arah (LTR atau RTL) tetapi perlu menampilkan placeholder dalam arah yang berlawanan, Anda dapat menggunakan karakter pemformatan algoritme dua arah Unicode untuk mengesampingkan arah dalam placeholder;
Catatan. Hindari menggunakan atribut <input id="myURL" name="myURL" type="url" value="//www.example.com" /> _0 jika Anda bisa. Ini tidak berguna secara semantik seperti cara lain untuk menjelaskan formulir Anda, dan dapat menyebabkan masalah teknis yang tidak terduga dengan konten Anda. Lihat untuk informasi lebih lanjut
Atribut Boolean yang, jika ada, berarti bidang ini tidak dapat diedit oleh pengguna. Namun, <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 7-nya masih dapat diubah oleh kode JavaScript yang secara langsung menyetel properti <input id="myURL" name="myURL" type="url" value="//www.example.com" /> 4 <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 7
Catatan. Karena bidang hanya-baca tidak dapat memiliki nilai, <input id="myURL" name="myURL" type="url" value="//www.example.com" /> 6 tidak berpengaruh pada input dengan atribut <input id="myURL" name="myURL" type="url" value="//www.example.com" /> 7 juga ditentukan
Atribut <input id="myURL" name="myURL" type="url" value="//www.example.com" /> _8 adalah nilai numerik yang menunjukkan berapa lebar karakter yang harus diisi oleh kolom input. Nilainya harus berupa angka yang lebih besar dari nol, dan nilai defaultnya adalah 20. Karena lebar karakter bervariasi, ini mungkin tepat atau tidak tepat dan tidak boleh diandalkan;
Ini tidak membatasi jumlah karakter yang dapat dimasukkan pengguna ke dalam bidang. Itu hanya menentukan kira-kira berapa banyak yang dapat dilihat pada satu waktu. Untuk menetapkan batas atas panjang input data, gunakan atribut
<input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/"></option> <option value="//www.google.com/"></option> <option value="//www.microsoft.com/"></option> <option value="//www.mozilla.org/"></option> <option value="//w3.org/"></option> </datalist> _1 adalah atribut global yang digunakan untuk menunjukkan apakah akan mengaktifkan pemeriksaan ejaan untuk suatu elemen. Ini dapat digunakan pada konten yang dapat diedit, tetapi di sini kami mempertimbangkan secara spesifik terkait penggunaan <input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/"></option> <option value="//www.google.com/"></option> <option value="//www.microsoft.com/"></option> <option value="//www.mozilla.org/"></option> <option value="//w3.org/"></option> </datalist> 1 pada <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 0 elemen. Nilai yang diizinkan untuk <input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/"></option> <option value="//www.google.com/"></option> <option value="//www.microsoft.com/"></option> <option value="//www.mozilla.org/"></option> <option value="//w3.org/"></option> </datalist> _1 adalah
<input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/"></option> <option value="//www.google.com/"></option> <option value="//www.microsoft.com/"></option> <option value="//www.mozilla.org/"></option> <option value="//w3.org/"></option> </datalist> _5Nonaktifkan pemeriksaan ejaan untuk elemen ini
<input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/"></option> <option value="//www.google.com/"></option> <option value="//www.microsoft.com/"></option> <option value="//www.mozilla.org/"></option> <option value="//w3.org/"></option> </datalist> _6Aktifkan pemeriksaan ejaan untuk elemen ini
"" (string kosong) atau tanpa nilaiIkuti perilaku default elemen untuk pemeriksaan ejaan. Ini mungkin didasarkan pada pengaturan <input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/"></option> <option value="//www.google.com/"></option> <option value="//www.microsoft.com/"></option> <option value="//www.mozilla.org/"></option> <option value="//w3.org/"></option> </datalist> 1 orang tua atau faktor lainnya
Bidang input dapat mengaktifkan pemeriksa ejaan jika atributnya tidak disetel dan tidak dinonaktifkan
Nilai yang dikembalikan dengan membaca <input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/"></option> <option value="//www.google.com/"></option> <option value="//www.microsoft.com/"></option> <option value="//www.mozilla.org/"></option> <option value="//w3.org/"></option> </datalist> _1 mungkin tidak mencerminkan keadaan sebenarnya dari pemeriksaan ejaan dalam kontrol, jika preferensi agen pengguna mengesampingkan pengaturan
Atribut non-standar berikut juga tersedia di beberapa browser. Sebagai aturan umum, Anda harus menghindari penggunaannya kecuali tidak dapat membantu
Ekstensi Safari, atribut <input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/"></option> <option value="//www.google.com/"></option> <option value="//www.microsoft.com/"></option> <option value="//www.mozilla.org/"></option> <option value="//w3.org/"></option> </datalist> _9 adalah string yang menunjukkan apakah akan mengaktifkan koreksi otomatis saat pengguna mengedit bidang ini. Nilai yang diizinkan adalah
<input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/" label="MDN Web Docs"></option> <option value="//www.google.com/" label="Google"></option> <option value="//www.microsoft.com/" label="Microsoft"></option> <option value="//www.mozilla.org/" label="Mozilla"></option> <option value="//w3.org/" label="W3C"></option> </datalist> 0Aktifkan koreksi kesalahan ketik otomatis, serta pemrosesan penggantian teks jika ada yang dikonfigurasi
<input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/" label="MDN Web Docs"></option> <option value="//www.google.com/" label="Google"></option> <option value="//www.microsoft.com/" label="Microsoft"></option> <option value="//www.mozilla.org/" label="Mozilla"></option> <option value="//w3.org/" label="W3C"></option> </datalist> 1Nonaktifkan koreksi otomatis dan penggantian teks
Ekstensi Mozilla, yang memberikan petunjuk tentang tindakan apa yang akan diambil jika pengguna menekan tombol Enter atau Return saat mengedit bidang
Atribut ini sudah tidak digunakan lagi. gunakan atribut global sebagai gantinya
Saat Anda membuat input URL dengan nilai <input id="myURL" name="myURL" type="url" size="30" /> _4 yang tepat, <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1, Anda mendapatkan validasi otomatis bahwa teks yang dimasukkan setidaknya dalam bentuk yang benar untuk berpotensi menjadi URL yang sah. Ini dapat membantu menghindari kasus di mana pengguna salah mengetik alamat situs web mereka, atau memberikan alamat yang tidak valid
Namun, penting untuk dicatat bahwa ini tidak cukup untuk memastikan bahwa teks yang ditentukan adalah URL yang benar-benar ada, sesuai dengan pengguna situs, atau dapat diterima dengan cara lain. Ini memastikan bahwa nilai bidang diformat dengan benar menjadi URL
Catatan. Seorang pengguna dapat mengotak-atik HTML Anda di belakang layar, jadi situs Anda tidak boleh menggunakan validasi ini untuk tujuan keamanan apa pun. Anda harus memverifikasi URL di sisi server dari setiap transaksi di mana teks yang diberikan mungkin memiliki implikasi keamanan apa pun
Saat ini, semua browser yang mengimplementasikan elemen ini mengimplementasikannya sebagai kolom input teks standar dengan fitur validasi dasar. Dalam bentuknya yang paling dasar, input URL dapat diimplementasikan seperti ini
<input id="myURL" name="myURL" type="url" />
Perhatikan bahwa itu dianggap valid ketika kosong dan ketika satu alamat URL yang diformat secara valid dimasukkan, tetapi sebaliknya dianggap tidak valid. Dengan menambahkan atribut, hanya URL yang dibuat dengan benar yang diizinkan;
Tidak ada yang ajaib terjadi di sini. Mengirimkan formulir ini akan menyebabkan data berikut dikirim ke server. <input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/" label="MDN Web Docs"></option> <option value="//www.google.com/" label="Google"></option> <option value="//www.microsoft.com/" label="Microsoft"></option> <option value="//www.mozilla.org/" label="Mozilla"></option> <option value="//w3.org/" label="W3C"></option> </datalist> 6. Perhatikan bagaimana karakter diloloskan seperlunya
Kadang-kadang sangat membantu untuk menawarkan petunjuk dalam konteks seperti apa bentuk input data yang harus diambil. Ini bisa menjadi sangat penting jika desain halaman tidak menawarkan label deskriptif untuk setiap <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 0. Di sinilah placeholder masuk. Placeholder adalah nilai yang menunjukkan bentuk <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 7 harus diambil dengan menyajikan contoh nilai yang valid, yang ditampilkan di dalam kotak edit saat <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 7 elemen adalah "". Setelah data dimasukkan ke dalam kotak, placeholder menghilang;
Di sini, kami memiliki <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1 input dengan placeholder <form> <input id="myURL" name="myURL" type="url" required /> <button>Submit</button> </form> 1. Perhatikan bagaimana placeholder menghilang dan muncul kembali saat Anda memanipulasi konten bidang edit
<input id="myURL" name="myURL" type="url" placeholder="//www.example.com" />
Anda tidak hanya dapat mengontrol panjang fisik kotak masukan, tetapi juga panjang minimum dan maksimum yang diperbolehkan untuk teks masukan itu sendiri
Ukuran elemen masukan fisik
Ukuran fisik kotak input dapat dikontrol menggunakan atribut. Dengannya, Anda dapat menentukan jumlah karakter yang dapat ditampilkan oleh kotak input sekaligus. Dalam contoh ini, misalnya, kotak edit <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1 memiliki lebar 30 karakter
<input id="myURL" name="myURL" type="url" size="30" /> _
Panjang nilai elemen
<input id="myURL" name="myURL" type="url" value="//www.example.com" /> _8 terpisah dari batasan panjang URL yang dimasukkan itu sendiri. Anda dapat menentukan panjang minimum, dalam karakter, untuk URL yang dimasukkan menggunakan atribut; . Jika <form> <input id="myURL" name="myURL" type="url" required /> <button>Submit</button> </form> 7 melebihi <input id="myURL" name="myURL" type="url" value="//www.example.com" /> 8, konten kotak input akan bergulir seperlunya untuk menampilkan pilihan saat ini atau titik penyisipan saat konten dimanipulasi
Contoh di bawah membuat kotak entri alamat URL selebar 30 karakter, yang mengharuskan konten tidak lebih pendek dari 10 karakter dan tidak lebih dari 80 karakter
<input id="myURL" name="myURL" type="url" size="30" minlength="10" maxlength="80" />
Catatan. Atribut ini juga mempengaruhi validasi;
Memberikan default tunggal menggunakan atribut nilai
Seperti biasa, Anda dapat memberikan nilai default untuk kotak input <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1 dengan menyetel atributnya
<input id="myURL" name="myURL" type="url" value="//www.example.com" />
Menawarkan nilai yang disarankan
Melangkah lebih jauh, Anda dapat memberikan daftar opsi default yang dapat dipilih pengguna dengan menentukan atributnya. Ini tidak membatasi pengguna pada opsi tersebut, tetapi memungkinkan mereka memilih URL yang umum digunakan dengan lebih cepat. Ini juga menawarkan petunjuk untuk. Atribut div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid + span::after { position: absolute; content: "✖"; padding-left: 5px; } input:valid + span::after { position: absolute; content: "✓"; padding-left: 5px; } 1 menentukan ID dari <input id="myURL" name="myURL" type="url" size="30" /> 2, yang pada gilirannya berisi satu elemen div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid + span::after { position: absolute; content: "✖"; padding-left: 5px; } input:valid + span::after { position: absolute; content: "✓"; padding-left: 5px; } 5 per nilai yang disarankan;
<input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/"></option> <option value="//www.google.com/"></option> <option value="//www.microsoft.com/"></option> <option value="//www.mozilla.org/"></option> <option value="//w3.org/"></option> </datalist>
Dengan <input id="myURL" name="myURL" type="url" size="30" /> _2 elemen dan div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid + span::after { position: absolute; content: "✖"; padding-left: 5px; } input:valid + span::after { position: absolute; content: "✓"; padding-left: 5px; } 5s di tempatnya, browser akan menawarkan nilai yang ditentukan sebagai nilai potensial untuk URL; . Meskipun pengalaman pengguna tertentu mungkin berbeda dari satu browser ke browser lainnya, biasanya mengeklik di kotak edit akan menampilkan drop-down dari URL yang disarankan. Kemudian, saat pengguna mengetik, daftar disesuaikan untuk hanya menampilkan nilai yang cocok. Setiap karakter yang diketik mempersempit daftar sampai pengguna membuat pilihan atau mengetikkan nilai khusus
Menggunakan label untuk nilai yang disarankan
Anda dapat memilih untuk menyertakan atribut pada salah satu atau semua elemen div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid + span::after { position: absolute; content: "✖"; padding-left: 5px; } input:valid + span::after { position: absolute; content: "✓"; padding-left: 5px; } 5 Anda untuk memberikan label tekstual. Beberapa browser mungkin hanya menampilkan label, sementara yang lain mungkin menampilkan label dan URL
<input id="myURL" name="myURL" type="url" list="defaultURLs" /> <datalist id="defaultURLs"> <option value="//developer.mozilla.org/" label="MDN Web Docs"></option> <option value="//www.google.com/" label="Google"></option> <option value="//www.microsoft.com/" label="Microsoft"></option> <option value="//www.mozilla.org/" label="Mozilla"></option> <option value="//w3.org/" label="W3C"></option> </datalist>
Ada dua tingkat validasi konten yang tersedia untuk <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1 masukan. Pertama, ada tingkat validasi standar yang ditawarkan kepada semua <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 0, yang secara otomatis memastikan bahwa konten memenuhi persyaratan sebagai URL yang valid. Namun ada juga opsi untuk menambahkan pemfilteran tambahan untuk memastikan bahwa kebutuhan khusus Anda terpenuhi, jika ada
Peringatan. Validasi formulir HTML bukanlah pengganti skrip yang memastikan bahwa data yang dimasukkan dalam format yang benar. Terlalu mudah bagi seseorang untuk melakukan penyesuaian pada HTML yang memungkinkan mereka melewati validasi, atau menghapusnya seluruhnya. Seseorang juga dapat mem-bypass HTML Anda sepenuhnya dan mengirimkan data langsung ke server Anda. Jika kode sisi server Anda gagal memvalidasi data yang diterimanya, bencana dapat terjadi ketika data yang diformat dengan tidak benar (atau data yang terlalu besar, dengan jenis yang salah, dan sebagainya) dimasukkan ke dalam database Anda
Browser yang mendukung tipe input <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1 secara otomatis memberikan validasi untuk memastikan bahwa hanya teks yang cocok dengan format standar untuk URL yang dimasukkan ke dalam kotak input
Sintaks URL cukup rumit. Ini ditentukan oleh Standar Hidup URL WHATWG dan dijelaskan untuk pendatang baru di artikel kami Apa itu URL?
Seperti disebutkan sebelumnya, untuk membuat entri URL diperlukan sebelum formulir dapat dikirimkan (Anda tidak dapat mengosongkan bidang), Anda hanya perlu menyertakan atribut pada input
<form> <input id="myURL" name="myURL" type="url" required /> <button>Submit</button> </form>
Coba kirimkan formulir di atas tanpa nilai yang dimasukkan untuk melihat apa yang terjadi
Jika Anda memerlukan URL yang dimasukkan untuk dibatasi lebih dari sekadar "string apa pun yang terlihat seperti URL", Anda dapat menggunakan atribut untuk menentukan ekspresi reguler yang nilainya harus cocok agar nilainya valid
Misalnya, Anda membuat halaman dukungan untuk karyawan Myco, Inc. yang akan memungkinkan mereka menghubungi departemen TI mereka untuk meminta bantuan jika salah satu halaman mereka bermasalah. Dalam bentuk kami yang disederhanakan, pengguna perlu memasukkan URL halaman yang bermasalah, dan pesan yang menjelaskan apa yang salah. Tapi kami ingin URL hanya berhasil divalidasi jika URL yang dimasukkan ada di domain Myco
Karena input tipe <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1 memvalidasi terhadap validasi URL standar dan yang ditentukan, Anda dapat mengimplementasikannya dengan mudah. Mari kita lihat caranya
div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid + span::after { position: absolute; content: "✖"; padding-left: 5px; } input:valid + span::after { position: absolute; content: "✓"; padding-left: 5px; }
<form> <div> <label for="myURL">Enter the problem website address:</label> <input id="myURL" name="myURL" type="url" required pattern=".*\.myco\..*" title="The URL must be in a Myco domain" /> <span class="validity"></span> </div> <div> <label for="myComment">What is the problem?</label> <input id="myComment" name="myComment" type="text" required /> <span class="validity"></span> </div> <div> <button>Submit</button> </div> </form>
Pertama-tama, atribut ditentukan, sehingga URL yang valid harus disediakan
Kedua, di input <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1 kita atur <input id="myURL" name="myURL" type="url" size="30" minlength="10" maxlength="80" /> 5 ke <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 02. Ekspresi reguler sederhana ini meminta string yang memiliki sejumlah karakter, diikuti dengan titik, diikuti dengan "myco", diikuti dengan titik, diikuti dengan sejumlah karakter. Dan karena browser menjalankan filter URL standar dan pola khusus kami terhadap teks yang ditentukan, kami berakhir dengan validasi yang mengatakan "pastikan ini adalah URL yang valid, dan juga di domain Myco. "
Ini tidak sempurna, tetapi cukup baik untuk persyaratan demo sederhana ini
Sebaiknya gunakan atribut bersama dengan <input id="myURL" name="myURL" type="url" size="30" minlength="10" maxlength="80" /> 5. Jika Anda melakukannya, <input id="myURL" name="myURL" type="url" size="30" minlength="10" maxlength="80" /> _9 harus menjelaskan polanya; . Itu karena <input id="myURL" name="myURL" type="url" size="30" minlength="10" maxlength="80" /> _9 dapat ditampilkan atau diucapkan sebagai bagian dari pesan kesalahan validasi. Misalnya, browser mungkin menampilkan pesan "Teks yang dimasukkan tidak cocok dengan pola yang diminta. " diikuti oleh ________21______9 yang Anda tentukan. Jika <input id="myURL" name="myURL" type="url" size="30" minlength="10" maxlength="80" /> _9 Anda adalah sesuatu seperti "URL", hasilnya adalah pesan "Teks yang dimasukkan tidak cocok dengan pola yang diperlukan. URL", yang bukan merupakan pengalaman pengguna yang baik
Itu sebabnya, sebagai gantinya, kami menentukan string "URL harus dalam domain myco". Dengan melakukan itu, pesan kesalahan lengkap yang dihasilkan mungkin seperti "Teks yang dimasukkan tidak cocok dengan pola yang diperlukan. URL harus dalam domain myco. "
Catatan. Jika Anda mengalami masalah saat menulis ekspresi reguler validasi dan tidak berfungsi dengan baik, periksa konsol browser Anda;
Tidak banyak lagi yang bisa dikatakan tentang <input id="myURL" name="myURL" type="url" placeholder="//www.example.com" /> 1 jenis input;