type type = "текст" проти вхідного типу = "пошук" в HTML5

Я новачок у HTML5, коли почав працювати з новими полями введення форми HTML5. Коли я працюю з полями введення форми, особливо, <input type="text" />і <input type="search" />IMO, не було різниці у всіх основних браузерах, включаючи Safari, Chrome, Firefox та Opera. І поле пошуку також поводиться як звичайне текстове поле.

Отже, у чому різниця між input type="text"та input type="search"в HTML5?

Яка реальна мета <input type="search" />?

Зараз між ними не існує великої угоди - можливо, їх ніколи не буде. Однак суть полягає в тому, щоб надати розробникам браузера можливість зробити щось особливе з цим, якщо вони хочуть.

Подумайте про <input type="number">мобільні телефони, піднімаючи цифрові клавіатури або type="email"створюючи спеціальну версію клавіатури, з @ і .com та іншими доступними.

На мобільному телефоні пошук може створити аплет внутрішнього пошуку, якщо вони захочуть.

З іншого боку, це допомагає поточним розробникам з css.

input[type=search]:after { content : url("magnifying-glass.gif"); }

Він не робить абсолютно нічого в більшості браузерів. Він просто поводиться як введення тексту. Це не проблема. Спеціалізація не вимагає від неї нічого особливого. Веб-браузери, однак, ставляться до цього дещо інакше, в першу чергу за допомогою стилів.

Пошук за замовчуванням в WebKit має рамку вставки, закруглені кути та суворий друкарський контроль.

Також,

Це не зафіксовано ніде, про що я не знаю, і це не в специфікації, але якщо ви додасте параметр результатів на вході, WebKit застосує трохи лупи зі стрілкою, що падає, що показує попередні результати.

<input type=search results=5 name=s>

Довідково

Перш за все, це надає смисловому значенню input type.

Оновлення:

Підтримка атрибута результатів Chrome 51 видалена:

Візуально / функціонально, 2 відмінності, якщо тип введення " пошук ": -

1. Ви отримуєте символ " X " в кінці поля введення / пошуку, щоб очистити тексти у полі
2. Натискання клавіші " Esc " на клавіатурі також очищає тексти

У деяких браузерах він також підтримує атрибути "результати" та "автоматичне збереження", що забезпечує функцію автоматичного "нещодавнього пошуку" за допомогою піктограми лупи.

Більше інформації

Насправді будьте дуже обережні, припускаючи, що це нічого не робить. Коли ви переходите до вкладів стилів із пошуком типу, вони мають певні атрибути, які неможливо змінити. Спробуйте змінити кордон на одному, і вам це стане неможливо. Є кілька інших Disallowed атрибутів CSS, перевірити це для всіх деталей.

Також, як згадував Jashwant, є атрибут результату, хоча він працює не дуже добре, якщо ви також не включаєте атрибут autosave. Однак випадання не працюватиме в більшості браузерів, тому використовуйте на свій страх.

Існує різниця в браузері в дії, коли ви вводите деякі слова, після чого вводимо ESC у введенні type="search"в chrome / safari, поле введення буде очищено. але в type="text"сценарії слова не очистяться. Тому будьте обережні, вибираючи тип, особливо коли ви використовуєте його для функції автозаповнення або пошуку

Бонусний бал: input type="search"має можливість використовувати onsearchатрибут (хоча я помітив, це НЕ працює в новому браузері Edge Microsofts), що позбавляє від необхідності писати спеціальну onkeypress=if(key=13) { function() }річ.

використовуючи type type = "search", переведіть текст клавіші enterkey клавіші "search", що може покращити роботу користувачів. однак вам доведеться коригувати стиль, якщо ви використовуєте цей тип.

Це залежить від точки зору програмістів, програміст може легко визначити мету введення, переглянувши тип, і для CSS-стилів та для JavaScript або JQuery легко перевірити правило на входах.

Але це погано вплине на елемент введення, якщо ви встановили

<input type="search">

І в своєму css ви встановили

input {background: url("images/search_bg.gif");}

Це звичайно не зовсім.