Bagaimana Anda menautkan formulir di html?

Question

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="http://www.example.com" />

2 dan

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://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

Table of Contents Show

Bagaimana Anda menambahkan tautan ke formulir dalam HTML?
Bagaimana Anda menautkan formulir kontak dalam HTML?
Bagaimana Anda mengirimkan hyperlink ke formulir?
Bagaimana cara membuat tombol yang tertaut ke halaman lain dalam HTML?

Pada browser yang tidak mendukung input jenis

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://www.example.com" />

1, input

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://www.example.com" />

1 kembali menjadi input teks standar

Atribut elemen

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://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="http://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="http://www.example.com" />

0 elemen apa pun jenisnya, input

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://www.example.com" />

7-nya masih dapat diubah oleh kode JavaScript yang secara langsung menyetel properti

<input id="myURL" name="myURL" type="url" value="http://www.example.com" />

4

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://www.example.com" />

7

Catatan. Karena bidang hanya-baca tidak dapat memiliki nilai,

<input id="myURL" name="myURL" type="url" value="http://www.example.com" />

6 tidak berpengaruh pada input dengan atribut

<input id="myURL" name="myURL" type="url" value="http://www.example.com" />

7 juga ditentukan

Atribut

<input id="myURL" name="myURL" type="url" value="http://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="https://developer.mozilla.org/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://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="https://developer.mozilla.org/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://w3.org/"></option>
</datalist>

1 pada

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://www.example.com" />

0 elemen. Nilai yang diizinkan untuk

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://w3.org/"></option>
</datalist>

_1 adalah

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://w3.org/"></option>
</datalist>

_5

Nonaktifkan pemeriksaan ejaan untuk elemen ini

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://w3.org/"></option>
</datalist>

_6

Aktifkan pemeriksaan ejaan untuk elemen ini

"" (string kosong) atau tanpa nilai

Ikuti 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="https://developer.mozilla.org/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://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="https://developer.mozilla.org/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://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="https://developer.mozilla.org/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://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="https://developer.mozilla.org/" label="MDN Web Docs"></option>
  <option value="http://www.google.com/" label="Google"></option>
  <option value="http://www.microsoft.com/" label="Microsoft"></option>
  <option value="https://www.mozilla.org/" label="Mozilla"></option>
  <option value="http://w3.org/" label="W3C"></option>
</datalist>

0

Aktifkan 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="https://developer.mozilla.org/" label="MDN Web Docs"></option>
  <option value="http://www.google.com/" label="Google"></option>
  <option value="http://www.microsoft.com/" label="Microsoft"></option>
  <option value="https://www.mozilla.org/" label="Mozilla"></option>
  <option value="http://w3.org/" label="W3C"></option>
</datalist>

1

Nonaktifkan 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="http://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="https://developer.mozilla.org/" label="MDN Web Docs"></option>
  <option value="http://www.google.com/" label="Google"></option>
  <option value="http://www.microsoft.com/" label="Microsoft"></option>
  <option value="https://www.mozilla.org/" label="Mozilla"></option>
  <option value="http://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="http://www.example.com" />

0. Di sinilah placeholder masuk. Placeholder adalah nilai yang menunjukkan bentuk

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://www.example.com" />

1 dengan menyetel atributnya

<input id="myURL" name="myURL" type="url" value="http://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="https://developer.mozilla.org/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://www.microsoft.com/"></option>
  <option value="https://www.mozilla.org/"></option>
  <option value="http://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="https://developer.mozilla.org/" label="MDN Web Docs"></option>
  <option value="http://www.google.com/" label="Google"></option>
  <option value="http://www.microsoft.com/" label="Microsoft"></option>
  <option value="https://www.mozilla.org/" label="Mozilla"></option>
  <option value="http://w3.org/" label="W3C"></option>
</datalist>

Ada dua tingkat validasi konten yang tersedia untuk

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://www.example.com" />

1 masukan. Pertama, ada tingkat validasi standar yang ditawarkan kepada semua

<input
  id="myURL"
  name="myURL"
  type="url"
  placeholder="http://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="http://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="http://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="http://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="http://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="http://www.example.com" />

1 jenis input;

Bagaimana Anda menambahkan tautan ke formulir dalam HTML?

Selesaikan Kursus HTML/CSS 2022 . Tag menunjukkan di mana hyperlink dimulai dan tag menunjukkan di mana itu berakhir. Teks apa pun yang ditambahkan di dalam tag ini, akan berfungsi sebagai hyperlink. use the and tags, which are the tags used to define the links. The tag indicates where the hyperlink starts and the tag indicates where it ends. Whatever text gets added inside these tags, will work as a hyperlink.

Bagaimana Anda menautkan formulir kontak dalam HTML?

Cara membuat formulir kontak HTML dalam enam langkah .

Pilih editor HTML. Untuk membuat kode HTML, Anda memerlukan tempat untuk menulisnya. .

Buat file baru dengan. ekstensi HTML. .

Buat file baru dengan. ekstensi PHP. .

Hasilkan kode PHP untuk menangkap data formulir. .

Buat formulir kontak HTML Anda. .

Tambahkan bidang tambahan

Bagaimana Anda mengirimkan hyperlink ke formulir?

Pada artikel ini, kami telah mengirimkan formulir menggunakan JavaScript dengan mengklik tautan. Di tag tubuh, buat formulir HTML dan tentukan id, metode, dan tindakan formulir. Dalam formulir, tentukan tag jangkar dengan event onclick. Buat fungsi untuk JavaScript yang akan dijalankan saat tautan diklik