В цілому тру, але не зрозумів наступного:
> Ми створили HTML5-код форми пошуку.
> ... submit "value =" Пошук "/>
Якщо вже по повній їхати, то в HTML5 поодинокі теги не зачиняються, ну да ладно, це причіпки.
> Кнопка для очищення форми.
Ви про стандартну від web-kit? А як-же інші браузери?
А якщо це не критично, то незрозуміло, навіщо ми тоді взагалі створюємо label і submit, якщо їх потім просто display: none; ?
я б ще зрозумів розтягнути на весь рядок і visibility відключити, хоча це теж треба знати толк в збоченнях. Та й подія submit буде після натискання Enter'a в будь-якому випадку.
Але лупа крута така, да ... проста і майже стандартна.
Такі елементи добре сприймаються оком, а тому я б не радив іншим відключати стандартний outline.
> В HTML5 поодинокі теги не зачиняються
Знаю 🙂 Визнаю свою помилку, посту вже майже рік. Виправила.
> Незрозуміло, навіщо ми тоді взагалі створюємо label і submit, якщо їх потім просто display: none;
display: none, тому що вордпресс має звичку підставляти відсутні елементи (в стандартному вигляді).
А в прикладі вгорі я їх просто для наочності залишила.
після прочитання статті ще раз, я подумав, що так у нас немає функціональності звичайної форми з 90-х :))
Тому я зробив так:
- до форми position: relative
- Додаємо input [type = image] + position: absolute
- У input [type = search] як в статті padding'і
- Вирівнюємо input [type = image] поверх пошуку input [type = search], якщо треба, то через z-index, але ніби й так наїде, тому що absolute;
Отримуємо лупу, на яку можна клікати для відправки даних форми.
- Точно також робимо з хрестиком для очищення, type = reset або якийсь там, я не пам'ятаю
- а у хрому приховуємо стандартний, щоб не накладався, через псевдо-клас в css.
- Ну і додаємо атрибути speech і x-webkit-speech для мікрофона,
- тоді справа спочатку повинен бути мікрофон, потім хрестик для очищення, щоб все зійшлося і там, де мікрофон не буде відображатися.
- надаємо мікрофона стиль під тему сайту через псевдо-клас css
- PROFIT.
Може має сенс вам написати і про такий спосіб 🙂
Дякую за ідею 🙂 Відмінний спосіб удосконалити форму!