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>
这个程序将使用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<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>
的中文翻译为：
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>
OR
<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>
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>
Kami juga boleh mengehadkan bilangan minimum dan maksimum aksara dalam medan carian dengan bantuan atribut
MINLENGTHdan
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>
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>
观察到盒子的大小现在减小了，如果您将其留空，将显示错误。
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Apakah tujuan & lt; kemajuan & gt; unsur?
Mar 21, 2025 pm 12:34 PM
Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati
Adakah HTML mudah belajar untuk pemula?
Apr 07, 2025 am 12:11 AM
HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.
Apakah tujuan & lt; DATALIST & GT; unsur?
Mar 21, 2025 pm 12:33 PM
Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159
Apakah tujuan & lt; meter & gt; unsur?
Mar 21, 2025 pm 12:35 PM
Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?
Mar 20, 2025 pm 05:56 PM
Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Mar 20, 2025 pm 06:05 PM
Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
