Формы

Оформление элементов может меняться взависимости от дизайна
Вид элементов в примере верстки

Посмотреть код html

<div class="itemBlock">
	<p class="el_blockTitle_xxxxxx">Элементы формы без обертки .form-group</p>
 
	<label>Заголовок инпута</label>
	<input type="text" name="inputName" placeholder="Инпут">
 
	<label>Заголовок селекта</label>
	<select name="selectName" placeholder="Селект">
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
		<option value="5">Option 5</option>
	</select>
 
	<label>Заголовок текстариа</label>
	<textarea name="textareaName" placeholder="Tекстариа"></textarea>
 
	<div class="form-check">
		<input type="radio" name="gridRadios1" id="radio_1_1" value="option1" checked>
		<label for="radio_1_1">Первый radio</label>
	</div>
	<div class="form-check">
		<input type="radio" name="gridRadios1" id="radio_1_2" value="option2">
		<label for="radio_1_2">Второй radio</label>
	</div>
	<div class="form-check disabled">
		<input type="radio" name="gridRadios1" id="radio_1_3" value="option3" disabled>
		<label for="radio_1_3">Третий disabled radio</label>
	</div>
 
	<div class="form-check">
		<input type="checkbox" id="checkbox1" checked>
		<label for="checkbox1">Первый checkbox</label>
	</div>
	<div class="form-check">
		<input type="checkbox" id="checkbox2">
		<label for="checkbox2">Второй checkbox</label>
	</div>
	<div class="form-check">
		<input type="checkbox" id="checkbox3" disabled>
		<label for="checkbox3">Третий disabled checkbox</label>
	</div>
 
	<button type="submit">Кнопка</button>
</div>
 
<div class="itemBlock">
	<p class="el_blockTitle_xxxxxx">Элементы формы с оберткой .form-group</p>
 
	<form>
		<div class="form-group">
			<label>Заголовок инпута</label>
			<input type="text" name="inputName" placeholder="Инпут">
		</div>
 
		<div class="form-group">
			<label>Заголовок селекта</label>
			<select name="selectName" placeholder="Селект">
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>
				<option value="4">Option 4</option>
				<option value="5">Option 5</option>
			</select>
		</div>
 
		<div class="form-check">
			<input type="radio" name="gridRadios2" id="radio_2_1" value="option1" checked>
			<label for="radio_2_1">Первый radio</label>
		</div>
		<div class="form-check">
			<input type="radio" name="gridRadios2" id="radio_2_2" value="option2">
			<label for="radio_2_2">Второй radio</label>
		</div>
		<div class="form-check disabled">
			<input type="radio" name="gridRadios2" id="radio_2_3" value="option3" disabled>
			<label for="radio_2_3">Третий disabled radio</label>
		</div>
 
		<div class="form-check">
			<input type="checkbox" id="checkbox1" checked>
			<label for="checkbox1">Первый checkbox</label>
		</div>
		<div class="form-check">
			<input type="checkbox" id="checkbox2">
			<label for="checkbox2">Второй checkbox</label>
		</div>
		<div class="form-check">
			<input type="checkbox" id="checkbox3" disabled>
			<label for="checkbox3">Третий disabled checkbox</label>
		</div>
 
		<div class="form-group">
			<label>Заголовок текстариа</label>
			<textarea name="textareaName" placeholder="Tекстариа"></textarea>
		</div>
 
		<button type="submit">Кнопка</button>
	</form>
</div>

Посмотреть код css

input,
select,
textarea
{
	border: 1px solid #d4d2d2;
	border-radius: 3px;
	background-color: #FFFFFF;
	margin: 0px 0px;
	padding: 10px 10px;
	width: 100%;
	font-size: 1.6rem;
	font-weight: 400;
	color: #000000;
}
input[type="radio"],
input[type="checkbox"]
{
	margin-right: 5px;
	width: auto;
	cursor: pointer;
}
input[disabled]
{
}
select
{
	padding: 7px 10px 8px 10px;
}
textarea
{
	height: 100px;
	line-height: 1.5;
	resize: vertical;
}
input:hover,
input:active,
input:focus,
select:hover,
select:active,
select:focus,
textarea:hover,
textarea:active,
textarea:focus
{
	border: 1px solid #307ECC;
}
 
button
{
	border: 1px solid #d4d2d2;
	border-radius: 3px;
	margin: 0px 0px;
	padding: 0px 10px;
	min-height: 40px;
	font-size: 1.6rem;
	font-weight: 400;
	color: #484646;
	cursor: pointer;
}
button:hover
{
	border: 1px solid #307ECC;
}
 
.form-group
{
	margin-bottom: 10px;
}
.form-group label
{
	display: inline-block;
	margin-bottom: 3px;
	font-size: 1.6rem;
	color: #484646;
}
.form-group label .required
{
	color: #FF0000;
}
 
.form-group.row label.col
{
	margin-bottom: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	-ms-flex: 0 0 calc(100%/3);
	flex: 0 0 calc(100%/3);
	max-width: calc(100%/3);
}
 
.form-check
{
	position: relative;
	display: block;
	padding-left: 20px;
	margin-bottom: 10px;
}
.form-check label
{
	display: inline-block;
	font-size: 1.6rem;
	color: #484646;
	cursor: pointer;
}
.form-check input[type="radio"],
.form-check input[type="checkbox"]
{
	position: absolute;
	top: 2px;
	left: 0px;
}
.form-check input[disabled] + label,
.form-check label + input[disabled]
{
	color: #8A8A8A;
	cursor: not-allowed;
}
 
.btn
{
	display: inline-block;
	border: 1px solid #2091C9;
	background-color: #23B6EC;
	border-radius: 3px;
	padding: 0px 15px;
	line-height: 38px;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	color: #FFFFFF;
}
.btn:hover
{
	background-color: #2091C9;
}

Можно располагать эти элементы по разному

№1 Пример 1

Посмотреть код html

<div class="itemBlock">
	<p class="el_blockTitle_xxxxxx">Блок 1</p>
 
	<form>
		<div class="row">
			<div class="col">
				<div class="form-group">
					<label>Заголовок инпута 1</label>
					<input type="text" name="inputName" placeholder="Инпут 1">
				</div>
			</div>
			<div class="col">
				<div class="form-group">
					<label>Заголовок инпута 1</label>
					<input type="text" name="inputName" placeholder="Инпут 1">
				</div>
			</div>
		</div>
 
		<div class="row">
			<div class="col">
				<div class="form-group">
					<label>Заголовок инпута 3</label>
					<input type="text" name="inputName" placeholder="Инпут 3">
				</div>
			</div>
			<div class="col">
				<div class="form-group">
					<label>Заголовок селекта</label>
					<select name="selectName" placeholder="Селект">
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
						<option value="5">Option 5</option>
					</select>
				</div>
			</div>
		</div>
 
		<div class="form-group">
			<label>Заголовок текстариа</label>
			<textarea name="textareaName" placeholder="Tекстариа"></textarea>
		</div>
 
		<button type="submit">Кнопка</button>
	</form>
</div>

№1 Пример 2

Посмотреть код html

<div class="itemBlock">
	<p class="el_blockTitle_xxxxxx">Блок 2</p>
 
	<form>
		<div class="form-group row">
			<label class="col">Заголовок инпута</label>
			<div class="col">
				<input type="text" name="inputName" placeholder="Инпут">
			</div>
		</div>
 
		<div class="form-group row">
			<label class="col">Заголовок селекта</label>
			<div class="col">
				<select name="selectName" placeholder="Селект">
					<option value="1">Option 1</option>
					<option value="2">Option 2</option>
					<option value="3">Option 3</option>
					<option value="4">Option 4</option>
					<option value="5">Option 5</option>
				</select>
			</div>
		</div>
 
		<div class="form-group row">
			<label class="col">Заголовок текстариа</label>
			<div class="col">
				<textarea name="textareaName" placeholder="Tекстариа"></textarea>
			</div>
		</div>
 
		<button type="submit">Кнопка</button>
	</form>
</div>

№1 Пример 3

Посмотреть код html

<div class="itemBlock">
	<p class="el_blockTitle_xxxxxx">Блок 3</p>
 
	<form>
		<div class="row">
			<div class="col">
				<div class="form-group row">
					<label class="col">Заголовок инпута 1</label>
					<div class="col">
						<input type="text" name="inputName" placeholder="Инпут 1">
					</div>
				</div>
			</div>
			<div class="col">
				<div class="form-group row">
					<label class="col">Заголовок селекта</label>
					<div class="col">
						<select name="selectName" placeholder="Селект">
							<option value="1">Option 1</option>
							<option value="2">Option 2</option>
							<option value="3">Option 3</option>
							<option value="4">Option 4</option>
							<option value="5">Option 5</option>
						</select>
					</div>
				</div>
			</div>
		</div>
 
		<div class="row">
			<div class="col">
				<div class="form-group row">
					<label class="col">Заголовок инпута 2</label>
					<div class="col">
						<input type="text" name="inputName" placeholder="Инпут 2">
					</div>
				</div>
			</div>
			<div class="col">
				<div class="form-group row">
					<label class="col">Заголовок текстариа</label>
					<div class="col">
						<textarea name="textareaName" placeholder="Tекстариа"></textarea>
					</div>
				</div>
			</div>
		</div>
 
		<button type="submit">Кнопка</button>
	</form>
</div>