Bagaimana untuk menggunakan jenis input carian dalam HTML?-html tutorial-php.cn

Bagaimana untuk menggunakan jenis input carian dalam HTML?

WBOY

Lepaskan： 2023-09-06 11:45:04

ke hadapan

1340 orang telah melayarinya

Bagaimana untuk menggunakan jenis input carian dalam HTML?

Internet menyediakan kami banyak perkhidmatan yang boleh kami akses melalui laman web masing-masing. Banyak kali, kita perlu mencari maklumat mengenai topik tertentu. Untuk melakukan carian di Internet, kita boleh membuat enjin carian seperti Google, Yahoo, Ask, Bing dan lain-lain. Anda mesti memerhatikan kotak teks yang tersedia untuk memasukkan kata kunci carian. Kami menaip kata kunci dan ia membawa kami ke halaman seterusnya di mana hasil yang dipadankan, yang diambil dari pelayan, dipaparkan. Apabila kami mereka bentuk borang dalam HTML untuk menangkap data daripada pengguna, kami menggunakan beberapa kawalan. Kami juga boleh membuat kotak teks dalam bentuk HTML yang boleh berkelakuan seperti medan carian dan kami boleh melakukan carian Google.

Untuk membuat kawalan sedemikian, kami menggunakan teg dalam HTML dalam borang. Ia kelihatan seperti kotak teks biasa, tetapi ia mampu melakukan carian tapak.

让我们来看一个基本的SEARCH控件程序。

示例

<html>
<head><title></title>
   <script>
      function show(){
         s=searchForm.searchField.value;
         document.write("You have searched for "+s);
      }
   </script>
</head>
<body>
   <form id="searchForm">
         <label for="sea">Search for : <label>
         <input type="search" name="searchField">
         <br><br>
         <input type="submit" value="Search" onclick="show()">
   </form>   
</body>
</html>

Salin selepas log masuk

这个程序将使用JavaScript代码在下一页上显示搜索到的文本。

您可能在使用Google时注意到，默认情况下搜索框中会出现一些文本，###纜🎜🎉示例

要做到这一点，我们可以在标签中使用PEMEGANG TEMPAT属性。让我们看一东。

<html>
<body>
   <form id="searchForm">
      <label for="sea">Search for : </label>
      <input type="search" name="searchField" placeholder="Type URL">
      <br><br>
      <input type="submit" value="Search" onclick="show()">
   </form>
</body>
</html>

Salin selepas log masuk

NILAI ATRIBUTI

的中文翻译为：

NILAI属性

Untuk menetapkan nilai lalai dalam kotak carian, anda boleh menggunakan atribut VALUE dalam tag.

这是一个非常有趣的属性，可以在标签中使用，那就是#🎜🎜可以在标签中使用，那就是#🎜🎜朎城朎圎可在在在天服性可以打开或关闭拼写检查功能。如果它是#🎜 🎜#ON

，它将在拼写错误的单词下显示红色波浪线，但如果它是#🎜#🎜，#OFF#🎜，#OFF地忽略拼写错误。默认情况下，semak ejaan属性设置为palsu。

Jadi, mari kita lihat bagaimana kita boleh menggunakan atribut ini.Contoh

<html>
<body>
   <form id="searchForm">
      <label for="sea">Search for : </label>
      <input type="search" name="searchField"><br><br>
      <input type="submit" value="Search" onclick="show()">
   </form>
</body>
</html>

Salin selepas log masuk

<html>
<body>
   <form id="searchForm">
      <label for="sea">Search for : </label>
      <input type="search" name="searchField" spellcheck=false><br><br>
      <input type="submit" value="Search">
   </form>
</body>
</html>

Salin selepas log masuk

Dalam kedua-dua kes, atribut semakan ejaan adalah MATI iaitu palsu. Dalam keadaan ini, ia akan mengabaikan ralat. Katakan, kami memasukkan "Heaith" dalam kotak carian sedangkan ejaan yang betul ialah "Kesihatan". Tetapi ia tidak menunjukkan sebarang garis beralun di bawah perkataan.

Sekarang marilah kita menjadikannya benar dan lihat hasilnya.Contoh

<html>
<body>
   <form id="searchForm">
      <label for="sea">Search for : </label>
      <input type="search" name="searchField" spellcheck=true><br><br>
      <input type="submit" value="Search">
   </form>
</body>
</html>

Salin selepas log masuk

Kami juga boleh mengehadkan bilangan minimum dan maksimum aksara dalam medan carian dengan bantuan atribut

MINLENGTH

dan

MAXLENGTH

. Katakan dalam contoh, di mana pengguna perlu menaip/mencari nombor kemasukan untuk institusi tertentu, ia boleh menerima minimum 4 aksara dan maksimum 6 aksara. Tetapi jika anda tidak akan meletakkan sekatan, pengguna boleh menaip data pada sebarang panjang.

Contoh

<html>
<body>
   <form id="searchForm">
      <label for="reg">Type Admission Number : </label>
      <input type="search" name="adm" minlength="4" maxlength="6"><br><br>
      <input type="submit" value="Search">
   </form>
</body>
</html>

Salin selepas log masuk

Ia menunjukkan ralat pada halaman kerana pengguna belum memasukkan panjang minimum data. Dan jika anda cuba melebihi had maksimumnya, ia tidak akan membenarkan untuk menaip. 我们还可以通过使用SIZE属性来控制文本框的宽度。而且，我们还可以们还可以们还可以们还可以们还可以们还可以们还可以们还可以们还可以们还可以们还可以们还可以们还可以使羨过置为必填字段。示例

<html>
<body>
   <form id="searchForm">
      <label for="reg">Type Admission Number : </label>
      <input type="search" name="adm" minlength="4"  
      maxlength="6" size="6" required><br><br>
      <input type="submit" value="Search">
   </form>
</body>
</html>

Salin selepas log masuk

观察到盒子的大小现在减小了，如果您将其留空，将显示错误。

Atas ialah kandungan terperinci Bagaimana untuk menggunakan jenis input carian dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!