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

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

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

Password

<input type="password" name="password_repeat" value="">

Показать пароль по чекбоксу:

<div class="password">
	<input type="password" id="password-input" placeholder="Введите пароль" name="password">
	<label><input type="checkbox" class="password-checkbox"> Показать пароль</label>
</div>
$('body').on('click', '.password-checkbox', function(){
	if ($(this).is(':checked')){
		$('#password-input').attr('type', 'text');
	} else {
		$('#password-input').attr('type', 'password');
	}
});

Показать пароль по ссылке:

<div class="password">
	<input type="password" id="password-input" placeholder="Введите пароль" name="password">
	<a href="#" class="password-control">Показать пароль</a>
</div>
$('body').on('click', '.password-control', function(){
	if ($('#password-input').attr('type') == 'password'){
		$(this).html('Скрыть пароль');
		$('#password-input').attr('type', 'text');
	} else {
		$(this).html('Показать пароль');
		$('#password-input').attr('type', 'password');
	}
	return false;
});

Показать пароль по иконке:

<div class="password">
	<input type="password" id="password-input" placeholder="Введите пароль" name="password">
	<a href="#" class="password-control"></a>
</div>
.password {
	position: relative;
}
.password-control {
	position: absolute;
	top: 11px;
	right: 6px;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(/view.svg) 0 0 no-repeat;
}
.password-control.view {
	background: url(/no-view.svg) 0 0 no-repeat;
}
$('body').on('click', '.password-control', function(){
	if ($('#password-input').attr('type') == 'password'){
		$(this).addClass('view');
		$('#password-input').attr('type', 'text');
	} else {
		$(this).removeClass('view');
		$('#password-input').attr('type', 'password');
	}
	return false;
});

Пароль по иконке (скрипт на чистом js):

<div class="password">
	<input type="password" id="password-input" placeholder="Введите пароль" name="password">
	<a href="#" class="password-control" onclick="return show_hide_password(this);"></a>
</div>
function show_hide_password(target){
	var input = document.getElementById('password-input');
	if (input.getAttribute('type') == 'password') {
		target.classList.add('view');
		input.setAttribute('type', 'text');
	} else {
		target.classList.remove('view');
		input.setAttribute('type', 'password');
	}
	return false;
}

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

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

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

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

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

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

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

Ajax форма с вложением файла

Ajax форма с вложением файла

Долго искал и нашел (здесь www.thenerdyblog.com) отличное решение — форма с вложением файла на ajax. Форма Скрипт Файл-обработчик Если нужно чтобы вложение было обязательным, то в условии else прописываем ошибку: Читать далее »

/

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

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

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