тип ввода = «текст» против типа ввода = «поиск» в 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 по умолчанию имеет внутреннюю границу, закругленные углы и строгий типографский контроль.

Также,

Это нигде не задокументировано, о чем я знаю, и нет в спецификации, но если вы добавите параметр результатов во входные данные, WebKit применит небольшое увеличительное стекло со стрелкой раскрывающегося списка, показывающей предыдущие результаты.

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

Ссылка

Прежде всего, он придает семантическое значение input type.

Обновить:

В Chrome 51 удалена поддержка атрибута результатов:

Визуально / функционально, 2 различия, если тип ввода - « поиск »: -

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

В некоторых браузерах он также поддерживает атрибуты «результаты» и «автосохранение», которые обеспечивают функцию автоматического «недавнего поиска» с помощью значка лупы.

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

На самом деле будьте очень осторожны, предполагая, что он ничего не делает. Когда вы переходите к входам стиля с поиском типа, у них есть определенные атрибуты, которые нельзя изменить. Попробуйте поменять границу на одной, и вам это будет совершенно невозможно. Есть несколько других Disallowed атрибутов CSS, проверить это для всех деталей.

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

Существует разница в действиях браузера: когда вы вводите несколько слов, а затем нажимаете ESC для ввода type="search"в chrome / safari, поле ввода очищается. но в type="text"сценарии слова не проясняются. Поэтому будьте осторожны при выборе типа, особенно когда вы используете его для автозаполнения или функции поиска.

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

используя input type = "search", заставьте текстовую клавиатуру enterkey отображать "search", что может улучшить взаимодействие с пользователем. однако при использовании этого типа стиль необходимо отрегулировать.

Это зависит от точки зрения программиста, программист может легко определить цель ввода, посмотрев на тип, и для стилизации CSS и для JavaScript или JQuery легко проверить правило во входных данных.

Но это плохо влияет на элемент ввода yout, если вы установите

<input type="search">

И в вашем css вы устанавливаете

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

Он вообще не появится.