Введение
HTML-тег <fieldset> используется для группировки HTML-элементов вместе, и он может помочь создать организованные и хорошо структурированные документы. Использование тега
Группировка элементов формы HTML
💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал
Создание HTML-страницы
Создайте файл с именем index.html и напишите базовую структуру HTML-страницы.
<!doctype html>
<html>
<head>
<title>Creating a Form with Fieldset Tag</title>
</head>
<body></body>
</html>Создание формы с использованием <fieldset>
Добавьте элемент формы в тело HTML, а затем используйте тег <fieldset> для группировки связанных полей формы. Мы также добавим тег label к элементам формы, чтобы добавить описание к полю ввода.
<form>
<fieldset>
<legend>User Details</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="firstname" /><br /><br />
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lastname" /><br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" /><br /><br />
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="uname">Username:</label>
<input type="text" id="uname" name="username" /><br /><br />
<label for="pass">Password:</label>
<input type="password" id="pass" name="password" /><br /><br />
</fieldset>
<input type="submit" value="Submit" />
</form>В приведенном выше коде будет создана форма, которая структурирована в два <fieldset>. Первое <fieldset> группирует личные данные пользователя, а второе <fieldset> группирует данные учетной записи. Возможно, вы заметите, что мы использовали тег label, чтобы дать некоторый контекст для полей.
Интерактивное обучение без установки.
Добавление CSS
Мы можем стилизовать <fieldset> с использованием CSS, чтобы дать ему соответствующий дизайн. Мы можем добавить границу, цвет фона и некоторый отступ, чтобы <fieldset> выглядел лучше.
<style>
fieldset {
padding: 10px;
border: 1px solid #c0c0c0;
border-radius: 4px;
margin: 5px;
background-color: #f8f8f8;
}
</style>Откройте HTML-файл в своем браузере, чтобы просмотреть форму и протестировать ее.
Резюме
Тег <fieldset> создает организованный и хорошо структурированный документ. Он полезен для создания форм. Используйте теги label, чтобы дать контекст для полей ввода. Тег <fieldset> группирует связанные поля формы и добавляет границу вокруг связанных полей. Наконец, стилизация CSS дает дизайн <fieldset>, который делает его более привлекательным.
