Формы

Простой CSS для HTML-форм

Форма по умолчанию

Чтобы создать простую встроенную форму, добавьте класс pure-form к элементу <form>.

Компактная встроенная форма
<form class="pure-form">
	<fieldset>
		<legend>Компактная встроенная форма</legend>

		<input type="email" placeholder="Email">
		<input type="password" placeholder="Пароль">

		<label for="remember">
			<input id="remember" type="checkbox"> Запомнить меня
		</label>

		<button type="submit" class="pure-button pure-button-primary">Войти</button>
	</fieldset>
</form>

Формуляр

Чтобы создать формуляр с полями и связными заголовками, добавьте класс pure-form-stacked к элементу <form> после имени класса pure-form.

Формуляр
<form class="pure-form pure-form-stacked">
	<fieldset>
		<legend>Формуляр</legend>

		<label for="email">Email</label>
		<input id="email" type="email" placeholder="Email">

		<label for="password">Пароль</label>
		<input id="password" type="password" placeholder="Пароль">

		<label for="state">Государство</label>
		<select id="state">
			<option>AL</option>
			<option>CA</option>
			<option>IL</option>
		</select>

		<label for="remember" class="pure-checkbox">
			<input id="remember" type="checkbox"> Запомнить меня
		</label>

		<button type="submit" class="pure-button pure-button-primary">Войти</button>
	</fieldset>
</form>

Унифицированные формы

Чтобы создать унифицированную форму, добавьте имя класса pure-form-aligned для элемента <form> после имени класса pure-form. В унифицированных формах, назания полей выравниваются по правому краю напротив полей форм, но на небольших экранах будут отображаться в формате формуляра.

<form class="pure-form pure-form-aligned">
	<fieldset>
		<div class="pure-control-group">
			<label for="name">Логин</label>
			<input id="name" type="text" placeholder="Логин">
		</div>

		<div class="pure-control-group">
			<label for="password">Пароль</label>
			<input id="password" type="password" placeholder="Пароль">
		</div>

		<div class="pure-control-group">
			<label for="email">Email-адрес</label>
			<input id="email" type="email" placeholder="Email-адрес">
		</div>

		<div class="pure-control-group">
			<label for="foo">Ваш заголовок</label>
			<input id="foo" type="text" placeholder="Введите свой тект здесь...">
		</div>

		<div class="pure-controls">
			<label for="cb" class="pure-checkbox">
				<input id="cb" type="checkbox"> Я прочитал условия предоставления услуг и согласен с ними
			</label>

			<button type="submit" class="pure-button pure-button-primary">Подтверждаю</button>
		</div>
	</fieldset>
</form>

Многоколоночная форма (с Pure Grids)

Чтобы создать многоколоночную форму, вставьте элементы вашей формы в ячейки Pure Grid. Следующий пример использует Pure Grids с формуляром.

Описание
<form class="pure-form pure-form-stacked">
	<fieldset>
		<legend>Описание</legend>

		<div class="pure-g-r">
			<div class="pure-u-1-3">
				<label for="first-name">Имя</label>
				<input id="first-name" type="text">
			</div>

			<div class="pure-u-1-3">
				<label for="last-name">Фамилия</label>
				<input id="last-name" type="text">
			</div>

			<div class="pure-u-1-3">
				<label for="email">Email</label>
				<input id="email" type="email" required>
			</div>

			<div class="pure-u-1-3">
				<label for="city">Город</label>
				<input id="city" type="text">
			</div>

			<div class="pure-u-1-3">
				<label for="state">Страна</label>
				<select id="state" class="pure-input-1-2">
					<option>AL</option>
					<option>CA</option>
					<option>IL</option>
				</select>
			</div>
		</div>

		<label for="terms" class="pure-checkbox">
			<input id="terms" type="checkbox"> Я прочитал условия предоставления услуг и согласен с ними
		</label>

		<button type="submit" class="pure-button pure-button-primary">Подтверждаю</button>
	</fieldset>
</form>

Группировка полей форм

Для группировки полей ввода текстовой нформации, поместите их внутрь элемента <fieldset> с классом pure-group. Группировка полей ввода хорошо подходит для форм регистрации пользователей и выглядеть естественно на экранах мобильных устройств.

<form class="pure-form">
	<fieldset class="pure-group">
		<input type="text" class="pure-input-1-2" placeholder="Логин">
		<input type="text" class="pure-input-1-2" placeholder="Пароль">
		<input type="email" class="pure-input-1-2" placeholder="Email">
	</fieldset>

	<fieldset class="pure-group">
		<input type="text" class="pure-input-1-2" placeholder="Другая группа">
		<input type="text" class="pure-input-1-2" placeholder="Прочее">
	</fieldset>

	<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Войи</button>
</form>

Изменение размеров полей ввода

Элементы полей ввода input имеютсвойства и поведение, схожее с Pure Grids. Вы можете применять классы pure-input-* для этих элементов.






<form class="pure-form">
	<input class="pure-input-1" type="text" placeholder=".pure-input-1"><br>
	<input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br>
	<input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br>
	<input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br>
	<input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br>
 </form>

Вы также можете изменять размер полей ввода в большую сторону, поместив их в контейнер с классом сетки. В приведенном ниже примере, элемент <input>, имеет класс pure-input-1, но обернут в <div> с классом ячейки сетки.

<form class="pure-form pure-g">
	<div class="pure-u-1-4">
		<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
	</div>
	<div class="pure-u-3-4">
		<input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
	</div>

	<div class="pure-u-1-2">
		<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
	</div>
	<div class="pure-u-1-2">
		<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
	</div>

	<div class="pure-u-1-8">
		<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
	</div>
	<div class="pure-u-1-8">
		<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
	</div>
	<div class="pure-u-1-4">
		<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
	</div>
	<div class="pure-u-1-2">
		<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
	</div>

	<div class="pure-u-1-5">
		<input class="pure-input-1" type="text" placeholder=".pure-u-1-5">
	</div>
	<div class="pure-u-2-5">
		<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
	</div>
	<div class="pure-u-2-5">
		<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
	</div>

	<div class="pure-u-1">
		<input class="pure-input-1" type="text" placeholder=".pure-u-1">
	</div>
</form>

Обязательные поля ввода

Чтобы пометить элемент формы, как обязательныйк заполнению, добавьте атрибут required к элементу input. To mark a form control as required, add the required attribute.

<form class="pure-form">
	<input type="email" placeholder="Требуется Email" required>
</form>

Неактивные поля ввода

Чтобы сделать поле ввода неактивным, добавьте атрибут disabled к элементу input.

<form class="pure-form">
	<input type="text" placeholder="Неактивное поле" disabled>
</form>

Нередактируемое поле ввода

Чтобы сделать форму ввода нередактируемой, добавьте атрибут readonly к элементу input. Разница между атрибутами disabled и readonly в том, что с нередактируемым полем пользователь может взаимодействовать, утанавлиявая фокус и копируя текст, в то время, как неактивное поле ведёт себя словно картинка.

<form class="pure-form">
	<input type="text" value="Нередактируемое поле" readonly>
</form>

Поля ввода со скруглённымиуглами

Для создания поля формы с закругленными углами, добавьте к элементу поля класс pure-input-rounded.

<form class="pure-form">
	<input type="text" class="pure-input-rounded">
	<button type="submit" class="pure-button">Поиск</button>
</form>

Поля выбора значения checkbox и radio

Для нормализации размеров и выравнивания элементов checkbox и radio, добавьте соответствующим полям имена классов pure-checkbox или pure-radio.

<form class="pure-form">
	<label for="option-one" class="pure-checkbox">
		<input id="option-one" type="checkbox" value="">
		Вот первый вариант.
	</label>

	<label for="option-two" class="pure-radio">
		<input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
		Вот переключатель. Вы можете выбрать этот...
	</label>

	<label for="option-three" class="pure-radio">
		<input id="option-three" type="radio" name="optionsRadios" value="option2">
		Или этот!
	</label>
</form>