/ Адаптивность / Типовые поля форм

Типовые поля форм

HIT

Для удобства и быстроты верстки привожу основные типы полей форм, а также их некоторые особенности.

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);
});

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Вложение файла при отправке формы

Вложение файла при отправке формы

Как настроить в WordPress вложение и отправку файла с формы без использования плагинов. Форма с нужным полем для вложения и указанием обработчика: Содержимое файла process_upload.php, на который мы переходим после Читать далее »

Contact Form 7

Contact Form 7

Contact Form 7 — очень нужный плагин для модулирования различных форм обратной связи. Имеет множество дополнений. Плагин Contact Form 7 Код вставки формы Отключить обертку в <p> и добавление <br> Читать далее »

/
Ajax форма без плагина

Ajax форма без плагина

Создаем формы без использования плагинов (например Contact Form 7). Делаем форму Ajax. Создание простой формы Добавляем скрипт обработчик (с валидацией полей) Прописываем функцию формы Данное решение взято с сайта inprocess.by Читать далее »

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

Пока нет комментариев. Будь первым!

Типовые поля форм
Полная загрузка сайта перед показом
Рекомендации для васПолная загрузка сайта перед показомOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.