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

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

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;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {opacity: 0;}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {opacity: 0;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {opacity: 0;}

Чтобы скрыть placeholder, не убирая параметр. Например, для полей входящих в класс form-label:

.form-label input::-webkit-input-placeholder {color: transparent;}
.form-label input::-moz-placeholder {color: transparent;}
.form-label input:-ms-input-placeholder {color: transparent;}
.form-label input::placeholder {color: transparent;}

Select

<select name="menu-477" class="textbox">

<option value="RedRoyal">RedRoyal</option>
<option value="Sanremo">Sanremo</option>
<option value="Anapa">Anapa</option>

</select>

multiple=»multiple» — параметр для выбора нескольких пунктов через кнопки Cntr и Shift.

Дата

Стандартное поле не является кроссбраузерным решением и выглядит довольно топорно

<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">

Для возможности ввода десятичных дробей (step=»any»):

<input type="number" name="area_vf" placeholder="Площадь (кв.м)" step="any">

У поля, при наведении, появляются стрелочки — их можно отключить так:

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

Datetime

<input class="min-now" type="datetime-local" name="datetime" placeholder="Дата и время">

Чтобы ограничить min дату текущим моментом нужно применять скрипт:

// Минимальная дата и время - сейчас
jQuery(document).ready(function($) {  
	$('.min-now').attr('min', new Date().toJSON().slice(0,16));
});

Если минимум нужен только для даты:

jQuery(function($){
    $('.min-now').prop('min', function(){
        return new Date().toJSON().split('T')[0];
    });
    $('.min-now').prop('value', function(){
        return new Date().toJSON().split('T')[0];
    });
});

Input type File

<input class="form-file" type="file" name="files[]" maxsize="26214400" types="xls,xlsx,pdf,avi" multiple="">

Максимальный размер пишем байтах по формуле: 1 Mb x 1024 x1024

Значение в примере не более 25 Mb.

[site-socialshare]

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

Метки

Input

Select

Дата

Radio кнопки

Textarea

Checkbox

Number

Password

Datetime

Input type File

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

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

Contact Form 7

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