Поиск по страницу

Поиск по страницу

Обновлено: 30 апреля 2019 Поиск по страницу

Поле поиска для сайта — один из важнейших элементов пользовательского интерфейса на веб-странице. С его помощью пользователь может найти нужный контент на вашем сайте.

В этом уроке вы узнаете, как создать разметку для поля поиска с помощью HTML5, а также как стилизовать элементы формы, используя возможности CSS3, без использования скриптов.

See the Pen yaBZRk by Elena (@html5book) on CodePen.

1. Разметка HTML

<form action="" method="get">    <input name="s" placeholder="Искать здесь..." type="search">    <button type="submit">Поиск</button>  </form>

Элемент <form> является контейнером для формы поиска, поле поиска создается при помощи элемента <input type="search"> или <input type="text">, а кнопка отправки данных на сервер может создаваться с помощью элемента <input type="submit"> или <button type="submit">.

searchbox-structure

Чем отличается <input type="search"> от <input type="text">? Оба этих поля создают однострочное текстовое поле для ввода текста, но type="search" добавлено в стандарт HTML5 и является семантической подсказкой для браузеров. Все браузеры, кроме Mozilla Firefox, добавляют крестик очистки в поле. Чтобы его убрать, можно поменять тип поля на type="text".

Чем отличается <input type="submit"> от <button type="submit">? Разницы в действии кнопок отправки, созданных первым или вторым способом, нет. Отличие состоит в том, что элемент <button> является контейнером, следовательно внутрь него можно помещать другие элементы, например, изображения или иконки.

Текст в поля формы можно добавлять двумя способами:
1) <input type="text" placeholder="текст">
Цвет отображаемого текста будет серого цвета. С помощью следующих правил можно задать тексту-подсказке любой цвет, поменять начертание и фон поля. Эти селекторы нельзя совмещать в одно правило, иначе они не будут работать.

input::-webkit-input-placeholder {    color: #B6C0A5;     font-style: italic;     background: #E0EFCA;  }  input:-moz-placeholder {    color: #B6C0A5;     font-style: italic;     background: #E0EFCA;  }  input:-ms-input-placeholder {    color: #B6C0A5;     font-style: italic;     background: #E0EFCA;  }

2) <input type="text" value="текст">
Цвет отображаемого текста будет черного цвета. Задать свой цвет можно при помощи свойства color, например:

input {    color: white;  }

Для отображения иконок не забудьте подключить FontAwesome.

2. Поле поиска с кнопкой-иконкой

<form>    <input type="text" placeholder="Искать здесь...">    <button type="submit"></button>  </form>
* {box-sizing: border-box;}  form {    position: relative;    width: 300px;    margin: 0 auto;  }  input {    width: 100%;    height: 42px;    padding-left: 10px;    border: 2px solid #7BA7AB;    border-radius: 5px;    outline: none;    background: #F9F0DA;    color: #9E9C9C;  }  button {    position: absolute;     top: 0;    right: 0px;    width: 42px;    height: 42px;    border: none;    background: #7BA7AB;    border-radius: 0 5px 5px 0;    cursor: pointer;  }  button:before {    content: "\f002";    font-family: FontAwesome;    font-size: 16px;    color: #F9F0DA;  }

3. Поле поиска с кнопкой внутри

<form>    <input type="text" placeholder="Искать здесь...">    <button type="submit"></button>  </form>
* {box-sizing: border-box;}  form {    position: relative;    width: 300px;    margin: 0 auto;  }  input, button {    border: none;    outline: none;    border-radius: 3px;  }  input {    width: 100%;    height: 42px;    background: #F9F0DA;    padding-left: 15px;  }  button {    height: 26px;    width: 26px;    position: absolute;    top: 8px;    right: 8px;    background: #F15B42;    cursor: pointer;  }  button:before {    content: "\f105";    font-family: FontAwesome;    color: #F9F0DA;    font-size: 20px;    font-weight: bold;  }

4. Поле поиска в стиле «flat»

<form>    <input type="text" placeholder="Искать здесь...">    <button type="submit"></button>  </form>
* {box-sizing: border-box;}  form {    position: relative;    width: 300px;    margin: 0 auto;    background: #A3D0C3;  }  input, button {    border: none;    outline: none;    background: transparent;  }  input {    width: 100%;    height: 42px;    padding-left: 15px;  }  button {    height: 42px;    width: 42px;    position: absolute;    top: 0;    right: 0;    cursor: pointer;  }  button:before {    content: "\f002";    font-family: FontAwesome;    font-size: 16px;    color: #F9F0DA;  }

5. Поле поиска с толстой нижней границей

<form>    <input type="text" placeholder="Искать здесь...">    <button type="submit"></button>  </form>
* {box-sizing: border-box;}  form {    position: relative;    width: 300px;    margin: 0 auto;    background: #F9F0DA;    border-bottom: 4px solid #be290e;  }  input, button {    border: none;    outline: none;    background: transparent;  }  input {    width: 100%;    height: 42px;    padding-left: 15px;  }  button {    height: 42px;    width: 42px;    position: absolute;    top: 0;    right: 0;    cursor: pointer;  }  button:before {    content: "\f178";    font-family: FontAwesome;    font-size: 20px;    color: #be290e;  }

6. Поле поиска с меняющимся цветом границы

<form>    <input type="text" placeholder="Искать здесь...">    <button type="submit"></button>  </form>
* {box-sizing: border-box;}  form {    position: relative;    width: 300px;    margin: 0 auto;  }  input, button {    outline: none;    background: transparent;  }  input {    width: 100%;    height: 42px;    padding-left: 15px;    border: 3px solid #F9F0DA;  }  button {    border: none;    height: 42px;    width: 42px;    position: absolute;    top: 0;    right: 0;    cursor: pointer;  }  button:before {    content: "\f002";    font-family: FontAwesome;    font-size: 16px;    color: #F9F0DA;  }  input:focus {    border-color: #311c24;  }

7. Выезжающее поле поиска

Поле поиска появляется при нажатии на кнопку с иконкой.

<form>    <input type="text" placeholder="Искать здесь...">    <button type="submit"></button>  </form>
* {box-sizing: border-box;}  form {    position: relative;    width: 300px;    margin: 0 auto;    height: 42px;  }  input {    height: 42px;    width: 0;    padding: 0 42px 0 15px;    border: none;    border-bottom: 2px solid transparent;    outline: none;    background: transparent;    transition: .4s cubic-bezier(0, 0.8, 0, 1);    position: absolute;    top: 0;    right: 0;    z-index: 2;  }  input:focus {    width: 300px;    z-index: 1;    border-bottom: 2px solid #F9F0DA;  }  button {    background: #683B4D;    border: none;    height: 42px;    width: 42px;    position: absolute;    top: 0;    right: 0;    cursor: pointer;  }  button:before {    content: "\f002";    font-family: FontAwesome;    font-size: 16px;    color: #F9F0DA;  }

8. Увеличивающееся в ширину поле поиска

<form>    <input type="text" placeholder="Искать здесь...">    <button type="submit"></button>  </form>
* {box-sizing: border-box;}  form {    width: auto;    float: right;    margin-right: 30px;  }  input {    width: 250px;    height: 42px;    padding-left: 15px;    border-radius: 42px;    border: 2px solid #324b4e;    background: #F9F0DA;    outline: none;    position: relative;    transition: .3s linear;  }  input:focus {    width: 300px;  }  button {    width: 42px;    height: 42px;    background: none;    border: none;    position: absolute;    top: -2px;    right: 0;  }  button:before{    content: "\f002";    font-family: FontAwesome;    color: #324b4e;  }



Источник: html5book.ru


Добавить комментарий