Группировка полей
<fieldset> - позволяет сгруппировать связанные поля в логический блок. Выделяет набор элементов рамкой с заголовком.
Заголовок создаётся тегом <legend>.
Доступные атрибуты тега <fieldset>:
disabled - отключить.
name - имя.
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30"><br>
Email: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
Список для автодополнения
<datalist> - позволяет создать список для автодополнения при вводе в полях формы. Можно использовать в случае, если требуется дать возможность вводить любое значение, но можно задать список часто используемых.
Для элементов списка используется тег <option>. Подключается к полю для ввода с помощью атрибута list.
Пример:
<input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
Примеры
Форма обратной связи:
<!DOCTYPE html> <html> <head> <title>Пример формы</title> <meta charset="UTF-8"> </head> <body> <form action="mail.php" autocomlete="on" method="post"> <fieldset> <legend>Обратная связь</legend> Имя: <input type="text" name="usrname" required autofocus><br> E-mail: <input type="email" name="email" required><br> Номер аккаунта: <input type="text" name="acc" required><br> Получатель: <select name="address" required> <option value="support">Техническая поддержка</option> <option value="info">Информационный отдел</option> <option value="domain">Отдел по работе с доменами</option> <option value="billing">Финансовый отдел</option> </select><br> Сообщение: <textarea name="message" cols="30" rows="5" maxlength="1500" required></textarea><br> <button type="submit">Отправить</button> </fieldset> </form> </body> </html>
Форма входа:
<!DOCTYPE html>
<html>
<head>
<title>Пример формы</title>
<meta charset="UTF-8">
</head>
<body>
<form action="login.php" autocomlete="on" method="post">
<input type="text" name="username" id="username" placeholder="Логин">
<input type="password" name="password" id="password" placeholder="Пароль">
<button type="submit" name="submit">Войти</button>
</form>
</body>
</html>