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

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

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

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>

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

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Contact Form 7

Contact Form 7

Contact Form 7 — очень нужный плагин для модулирования различных форм обратной связи. Имеет множество дополнений. Плагин Contact Form 7 Код вставки формы <?php echo do_shortcode( '[[contact-form-7 id="143" title="Контактная форма Читать далее »

/
Заявка на товар

Заявка на товар

Бывает так, что нам не нужно непосредственно продавать товар через сайт, а только лишь получить на него заявку. Данный механизм прост: нам нужно создать форму обратной связи в которую будет Читать далее »

/
Подключаем КЛАДР

Подключаем КЛАДР

Подключаем к сайту систему КЛАДР — это постоянно обновляемая база адресов России. КЛАДР нужен для того, чтобы при вводе первых букв он предлагал варианты заполнения. Причем сделано это довольно интеллектуально, Читать далее »

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

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

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