Для удобства и быстроты верстки привожу основные типы полей форм, а также их некоторые особенности.
Input
Классный эффект для любых форм на сайте. При нажатии на форму placeholder плавно исчезает. Тут же настройка цвета плейсхолдера.
/* плавное изменение прозрачности placeholder-а при фокусе */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #ccc; opacity: 1; transition: opacity 0.3s ease;}
input::-moz-placeholder, textarea::-moz-placeholder {color: #ccc; opacity: 1; transition: opacity 0.3s ease;}
input:-moz-placeholder, textarea:-moz-placeholder {color: #ccc; opacity: 1; transition: opacity 0.3s ease;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #ccc; opacity: 1; transition: opacity 0.3s ease;}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}Select
<select name="menu-477" class="textbox">
<option value="RedRoyal">RedRoyal</option>
<option value="Sanremo">Sanremo</option>
<option value="Anapa">Anapa</option>
</select>Дата
Стандартное поле не является кроссбраузерным решением и выглядит довольно топорно
<input type="date" name="date-68" value="" class="textbox">Можно ограничить выбор даты min и max
<input type="date" name="date-724" value="" class="textbox" min="2017-05-10" max="2017-05-14">Для расширения функционала необходимо подключить скрипт и стили Datepicker
Если используем Contact Form 7, то для него есть специальный плагин — Contact Form 7 Datepicker.
Radio кнопки
Группа input’ов с общим name. Каждый input надо оборачивать label, для того чтобы выбор срабатывал при нажатии на текст, а не только на саму кнопку.
<label><input type="radio" name="radio-921" value="Командировка" checked="checked">Командировка</label>
<label><input type="radio" name="radio-921" value="Отдых">Отдых</label>
<label><input type="radio" name="radio-921" value="Деловое мероприятие">Деловое мероприятие</label>
<label><input type="radio" name="radio-921" value="Экскурсии">Экскурсии</label>
<label><input type="radio" name="radio-921" value="Личные дела">Личные дела</label>
<label><input type="radio" name="radio-921" value="Корпоративное мероприятие">Корпоративное мероприятие</label>
<label><input type="radio" name="radio-921" value="Другое">Другое</label>Произвольный стиль радио кнопок
input[type="radio"]:after {
width: 12px;
height: 12px;
border-radius: 15px;
top: -3px;
left: -2px;
position: relative;
background: #fff;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid #d32f2f;
}
input[type="radio"]:checked:after {
background: #d32f2f;
border: 2px solid #d32f2f;
}Textarea
<textarea name="your-message" cols="40" rows="8" class="textbox" aria-required="true"></textarea>cols — ширина поля в символах
rows — высота поля в строках текста
aria-required=»true» — обязательное поле
Если необходимо запретить изменять размер, нужно применить на textarea css свойство resize: none;.
Checkbox
Input’ы объедены общим name (у которого после названия идут квадратные скобки, т.к. собирается массив из нескольких вариантов). Необходимо оборачивать в label, чтобы пункт срабатывал при нажатии на текст. а не только на квадрат.
<label><input type="checkbox" name="checkbox-353[]" value="От друзей/коллег/знакомых">От друзей/коллег/знакомых</label>
<label><input type="checkbox" name="checkbox-353[]" value="Реклама в СМИ (печатные, ТВ, радио)">Реклама в СМИ (печатные, ТВ, радио)</label>
<label><input type="checkbox" name="checkbox-353[]" value="Забронировала принимающая сторона">Забронировала принимающая сторона</label>
<label><input type="checkbox" name="checkbox-353[]" value="Другое">Другое</label>Number
<input type="number" name="number-479" value="" min="1" max="1000" class="textbox">У поля, при наведении, появляются стрелочки — их можно отключить так:
input[type='number'] { -moz-appearance:textfield;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none;}Чтобы добавить для поля number кнопки + и — нужно добавить в верстке эти кнопки. Также добавим placeholder:
<div class="number">
<div class="dec change">-</div>
[number* number-542 class:textbox placeholder "Сколько человек"]
<div class="inc change">+</div>
</div>И теперь скриптом «оживим» кнопки +-
// Кнопки + - для поля с номером
$(".change").on("click", function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == "+") {
// Если есть playsholder меняем его на единицу
if( !oldValue =="" ) {
var newVal = parseFloat(oldValue) + 1;
} else {
newVal = 1;
}
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$button.parent().find("input").val(newVal);
});
