Я новичок в 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.
Update:
Визуально/функционально, 2 различия, если тип ввода " поиск": -
В некоторых браузерах он также поддерживает атрибуты "результаты" и "автосохранение", которые обеспечивают автоматическую "последние поисковые функции" с помощью значка лупы.
Собственно, будьте очень осторожны, считая, что он ничего не делает. Когда вы идете в входы стиля с типом поиска, у них есть определенные атрибуты, которые нельзя изменить. Попытайтесь изменить границу на одном, и вы найдете это совершенно невозможным. Есть еще несколько других запрещенных атрибутов CSS, посмотрите этот для всех деталей.
Также, как упоминалось Jashwant, есть атрибут result, хотя он не работает очень хорошо, если вы также не включаете атрибут autosave. Однако выпадающее меню не работает в большинстве браузеров, поэтому используйте свою собственную угрозу.
Там разница браузера в действии, когда вы вводите несколько слов, а затем вводите ESC на вход type="search" в chrome/safari, поле ввода будет очищено. но в сценарии type="text" слова не будут очищены. Поэтому будьте осторожны при выборе типа, особенно когда вы используете его для функции автозаполнения или поиска.
Бонусная точка: input type="search "имеет возможность использовать атрибут onsearch (хотя я заметил, что это НЕ работает в новом Microsoft Edge Browser), что устраняет необходимость создания пользовательской вещи onkeypress=if(key=13) { function() }.
используя тип ввода = "поиск", введите текст "keybord enterkey" "поиск", что может улучшить работу пользователя. однако при использовании этого типа вы должны настроить стиль.
Большинство функциональных возможностей одинаковы, но 1 различие, которое мы видим в браузерах, состоит в том, что вход search немного отличается в SAFARI и CHROME. Они добавляют значок "x" в правой части, но это то же самое для FireFox, IE и т.д.
Короче говоря, нет никакой разницы для Firefox, IE, Opera, только для сафари и хром.
Данные вставки RAW
Большинство функциональных возможностей одинаковы, но одна разница, которую мы можем видеть в браузерах, заключается в том, что вход search немного отличается в SAFARI и CHROME. Они добавляют значок "x" в правой части, но это то же самое для FireFox, IE и т.д.
Короче говоря, нет никакой разницы для Firefox, IE, Opera, только для сафари и хром.
Это зависит от точки зрения программистов, программист может легко определить цель ввода, посмотрев тип и легко стилизуя CSS, а для JavaScript или JQuery - проверить правило на входах.
Но это плохо влияет на элемент ввода yout, если вы установили
<input type="search">
И в вашем css вы установили
input {background: url("images/search_bg.gif");}
Он вообще не будет отображаться.