Шаблоны са йтов для 1С-Битрикс, готовые решения, разработка сайтов
Профессиональное составление строительных смет
+7 (495) 646 02 52 8 (800) 100 67 79
ежедневно с 9:00 до 18:00

Отображение элементов форм

Legend
Какой-то текст, который может использоваться в качестве пояснения того, как нужно заполнять выше размещенное поле.

Пример поясняющего текста.

<form class="form-horizontal">
	<fieldset>
		<legend>Legend</legend>
		<div class="form-group">
			<label for="inputEmail" class="col-lg-4 control-label">Email</label>
			<div class="col-lg-20">
				<input autocomplete="off" class="form-control" id="inputEmail" placeholder="Email" type="text">
			</div>
		</div>
		<div class="form-group">
			<label for="inputPassword" class="col-lg-4 control-label">Password</label>
			<div class="col-lg-20">
				<input autocomplete="off" class="form-control" id="inputPassword" placeholder="Пароль" type="password">
				<div class="checkbox">
					<label>
						<input type="checkbox"> Checkbox
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" disabled="disabled"> Checkbox в состоянии disabled
					</label>
				</div>
				<div class="checkbox">
					<label>
						<input type="checkbox" disabled="disabled" checked="checked"> Checkbox в состоянии disabled и checked
					</label>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label for="textArea" class="col-lg-4 control-label">Textarea</label>
			<div class="col-lg-20">
				<textarea class="form-control" rows="3" id="textArea"></textarea>
				<span class="help-block">
					Какой-то текст, который может использоваться в качестве пояснения того, как нужно заполнять выше размещенное поле.
				</span>
			</div>
		</div>
		<div class="form-group">
			<label class="col-lg-4 control-label">Radio</label>
			<div class="col-lg-20">
				<div class="radio">
					<label>
					<input name="optionsRadios" id="optionsRadios1" value="option1" checked="" type="radio">
						Первый вариант
					</label>
				</div>
				<div class="radio">
					<label>
						<input name="optionsRadios" id="optionsRadios2" value="option2" type="radio">
						Второй вариант
					</label>
				</div>
				<div class="radio">
					<label>
						<input name="optionsRadios" disabled="disabled" id="optionsRadios3" value="option3" type="radio">
						Трейтий вариант в состоянии disabled
					</label>
				</div>
				<div class="radio">
					<label>
						<input name="optionsRadio" disabled="disabled" checked="checked" id="optionsRadios4" value="option4" type="radio">
						Четвертый вариант в состоянии disabled и checked
					</label>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label for="select" class="col-lg-4 control-label">Selects</label>
			<div class="col-lg-20">
				<select class="form-control" id="select">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
				<br>
				<select multiple="" class="form-control">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="exampleInputFile" class="col-lg-4 control-label">File input</label>
			<div class="col-lg-20">
				<input type="file" id="exampleInputFile" name="file">
				<p class="help-block">Пример поясняющего текста.</p>
			</div>
		</div>
		<div class="form-group">
			<div class="col-lg-20 col-lg-offset-4">
				<button class="btn btn-default">Отменить</button>
				<button type="submit" class="btn btn-primary">Отправить</button>
			</div>
		</div>
	</fieldset>
</form>
$
<form>
	<div class="form-group">
		<label class="control-label" for="focusedInput">Поле в состоянии focus</label>
		<input class="form-control" id="focusedInput" value="В фокусе..." type="text">
	</div>
	<div class="form-group">
		<label class="control-label" for="disabledInput">Поле в состоянии disabled</label>
		<input class="form-control" id="disabledInput" placeholder="Не активно..." disabled="" type="text">
	</div>
	<div class="form-group has-warning">
		<label class="control-label" for="inputWarning">Поле в состоянии warning</label>
		<input class="form-control" id="inputWarning" type="text">
	</div>
	<div class="form-group has-error">
		<label class="control-label" for="inputError">Поле в состоянии error</label>
		<input class="form-control" id="inputError" type="text">
	</div>
	<div class="form-group has-success">
		<label class="control-label" for="inputSuccess">Поле в состоянии success</label>
		<input class="form-control" id="inputSuccess" type="text">
	</div>
	<div class="form-group">
		<label class="control-label" for="inputLarge">Поле увеличенного размера</label>
		<input class="form-control input-lg" id="inputLarge" type="text">
	</div>
	<div class="form-group">
		<label class="control-label" for="inputDefault">Поле стандартного размера (по умолчанию)</label>
		<input class="form-control" id="inputDefault" type="text">
	</div>
	<div class="form-group">
		<label class="control-label" for="inputSmall">Поле уменьшенного размера</label>
		<input class="form-control input-sm" id="inputSmall" type="text">
	</div>
	<div class="form-group">
		<label class="control-label">Дополнительное оформление полей</label>
		<div class="input-group">
			<span class="input-group-addon">$</span>
			<input class="form-control" type="text">
			<span class="input-group-btn">
				<button class="btn btn-default" type="button">Кнопка</button>
			</span>
		</div>
	</div>
</form>