Группировка по тегу fieldset

Если у вас более длинная форма, может быть очень удобно сгруппировать различные виды полей. Для этого вы используете элемент <fieldset>. Название группы дается первой <legend>, которая является дочерним по отношению к <fieldset>. Как только мы это сделаем, я хочу добавить еще один элемент - <label>.. Метка используется для добавления подписи к каждому элементу, который вы собираете.

Теперь давайте рассмотрим пример, где мы используем эти новые элементы;

<form>
	<fieldset>
		<legend>Contact Details</legend>
			<label for="name">Name:</label>
			<input id="name"><br />

			<label for="telephone">Telephone:</label>
			<input id="telephone"><br />

			<label for="user-email">Email:</label>
			<input id="user-email">
	</fieldset>
	<fieldset>
		<legend>User info</legend>
			<label for="username">Username:</label>
			<input id="username"><br />

			<label for="password">Password:</label>
			<input id="password"><br />
	</fieldset>
	<input type="submit" value="Submit now" />
</form>

Зачем использовать fieldset? Представьте, что вы хотите добавить что-то к этой форме, возможно, любимые продукты. Затем вы бы сгруппировали различные виды продуктов в новом наборе полей и проясните свою форму. Я также добавил атрибут id в поле ввода. Это определяет уникальный элемент этих элементов, и мы используем его при назначении меток. Используя атрибут for, мы соединяем поле ввода и метку.

Мы уже рассмотрели некоторые из различных типов полей ввода, которые вы можете использовать в своей веб-форме - текстовое поле и кнопку отправки.
Текстовое поле обычно имеет длину 20 символов, но если вам нужно более крупное текстовое поле, его можно изменить по причине. Все, что вам нужно сделать, это использовать атрибут размера;

<input type="text" size="35" maxlength="140">

Как видите, я добавил еще один атрибут, maxlength. Это точно определяет, сколько символов максимум посетителя может набрать в любом данном поле. Я выбрал 140 символов, чтобы проиллюстрировать, как вы можете использовать максимальную длину для создания сообщений, подобных Твиттеру, например. комментарии в блоге.