fieldset, legend и другие.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>наша первая Web-страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Описание нашей первой Web-страницы." />
<meta name="keywords" content="web-страница, первая web-страницаб html" />
</head>
<body>
<!-- <fieldset> - разбивка формы на блоки. -->
<form name="form" action="#" method="get" enctype="multipart/form-data">
<fieldset>
<legend>Основные данные</legend> <!-- Подпись для fieldset. -->
<div>
<label for="firstname">Ваше имя:</label>
<input id="firstname" type="text" name="firstname" value="Ваше имя" disabled="disabled">
</div>
<div>
<label for="surname">Ваше фамилия:</label>
<input id="surname" type="text" name="surname" placeholder="Ваша фамилия">
</div>
<!-- Пароль. -->
<div>
<label for="password">Ваше пароль:</label>
<input id="password" type="password" name="password" placeholder="Ваше пароль">
</div>
<!-- Email. -->
<div>
<label for="email">E-mail:</label>
<input id="email" type="email" name="email">
</div>
<!-- Телефон. -->
<div>
<label for="phone">Телефон:</label>
<input id="phone" type="tel" name="phone">
</div>
<!-- Сайт. -->
<div>
<label for="site">Сайт:</label>
<input id="site" type="url" name="usite">
</div>
</fieldset>
<fieldset>
<!-- Радио кнопка. Можно выбрать только одно значение.-->
<div>
<label>Ваш любимый цвет:</label>
<input type="radio" name="color" value="1">Зеленый
<input type="radio" name="color" value="2">Красный
<input type="radio" name="color" value="3">Желтый
</div>
<div>
<label>Ваше любимое блюдо:</label>
<input type="radio" name="food" value="1">Суп
<input type="radio" name="food" value="2">Мясо
<input type="radio" name="food" value="3">Рыба
</div>
<!-- Чекбокс. Можно выбрать несколько значений. -->
<div>
<label>Что вам принести?:</label>
<input type="checkbox" name="order" value="1">Суп
<input type="checkbox" name="order" value="2">Мясо
<input type="checkbox" name="order" value="3">Рыба
</div>
<div>
<label for="news">Подписаться на новости:</label>
<input id="news" type="checkbox" name="news" checked="checked" value="1">Новости
</div>
<!-- Поиск. Тип: text -->
<!-- Ускоряем выбор данных с помощью datalist. -->
<div>
<label for="search">Ваш любимый поисковик:</label>
<input id="search" type="text" name="search" list="search_list">
<datalist id="search_list">
<option value="Google"></option>
<option value="Yandex"></option>
</datalist>
</div>
<!-- Файл. -->
<div>
<label for="file">Файл:</label>
<input id="file" type="file" name="file">
</div>
<!-- Счетчик для ввода цифр. -->
<div>
<label for="count">Количество копий:</label>
<input id="count" type="number" name="count" min="1" max="10">
</div>
<!-- Ползунок. step - шаг -->
<div>
<label for="range">Диапазон:</label>
<input id="range" type="range" name="range" min="1" max="10" step="2">
</div>
<!-- Поле для ввода даты. -->
<div>
<label for="date">Дата: </label>
<input id="date" type="date" name="date">
</div>
<!-- Выбор цвета. -->
<div>
<label for="color">Цвет: </label>
<input id="color" type="color" name="color">
</div>
<!-- Текстовое поле. Здесь не выводится value. -->
<div>
<label for="message">Сообщение:</label>
<textarea name="message" id="message" placeholder="Введите ваше сообщение">Какой-то текст</textarea>
</div>
<!-- Выпадающий список select - option. selected="selected" - выбор по умолчанию -->
<div>
<label for="city">Город:</label>
<select name="city" id="city" size="3">
<optgroup label="Крупнейшие города">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
</optgroup>
<optgroup label="Крупные города">
<option value="3" selected="selected">Омск</option>
<option value="4">Владивосток</option>
<option value="5">Краснодар</option>
</optgroup>
</select>
</div>
</fieldset>
<div>
<!-- Скрытое поле. -->
<input type="hidden" name="a" value="1">
<!-- Кнопка сброса. -->
<input type="reset" value="Сбросить">
<input type="submit" name="submit" value="Отправить">
</div>
</form>
<hr>
<h2>Форма регистрации</h2>
<form action="#" method="post">
<div>
<label for="name">Имя:</label>
<input id="name" name="name" type="text">
</div>
<div>
<label for="email">E-mail:</label>
<input id="email" name="email" type="email">
</div>
<div>
<label for="password">Пароль:</label>
<input id="password" name="password" type="password">
</div>
<div>
<label for="confirm_password">Пароль:</label>
<input id="confirm_password" name="confirm_password" type="password">
</div>
<div>
<label for="phone">Телефон:</label>
<input id="phone" name="phone" type="tel">
</div>
<div>
<label for="city">Город проживания:</label>
<select name="city" id="city">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
<option value="3">Сочи</option>
<option value="4">Севастополь</option>
</select>
</div>
<div>
<label for="wishes">Ваши пожелания:</label>
<textarea name="wishes" id="wishes" placeholder="Ваши пожелания"></textarea>
</div>
<div>
<label for="news">Подписка на новости:</label>
<input id="news" name="news" type="checkbox" checked="checked">
</div>
<div>
<input type="submit" value="Отправить">
</div>
</form>
</body>
</html>
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>наша первая Web-страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Описание нашей первой Web-страницы." />
<meta name="keywords" content="web-страница, первая web-страницаб html" />
</head>
<body>
<!-- <fieldset> - разбивка формы на блоки. -->
<form name="form" action="#" method="get" enctype="multipart/form-data">
<fieldset>
<legend>Основные данные</legend> <!-- Подпись для fieldset. -->
<div>
<label for="firstname">Ваше имя:</label>
<input id="firstname" type="text" name="firstname" value="Ваше имя" disabled="disabled">
</div>
<div>
<label for="surname">Ваше фамилия:</label>
<input id="surname" type="text" name="surname" placeholder="Ваша фамилия">
</div>
<!-- Пароль. -->
<div>
<label for="password">Ваше пароль:</label>
<input id="password" type="password" name="password" placeholder="Ваше пароль">
</div>
<!-- Email. -->
<div>
<label for="email">E-mail:</label>
<input id="email" type="email" name="email">
</div>
<!-- Телефон. -->
<div>
<label for="phone">Телефон:</label>
<input id="phone" type="tel" name="phone">
</div>
<!-- Сайт. -->
<div>
<label for="site">Сайт:</label>
<input id="site" type="url" name="usite">
</div>
</fieldset>
<fieldset>
<!-- Радио кнопка. Можно выбрать только одно значение.-->
<div>
<label>Ваш любимый цвет:</label>
<input type="radio" name="color" value="1">Зеленый
<input type="radio" name="color" value="2">Красный
<input type="radio" name="color" value="3">Желтый
</div>
<div>
<label>Ваше любимое блюдо:</label>
<input type="radio" name="food" value="1">Суп
<input type="radio" name="food" value="2">Мясо
<input type="radio" name="food" value="3">Рыба
</div>
<!-- Чекбокс. Можно выбрать несколько значений. -->
<div>
<label>Что вам принести?:</label>
<input type="checkbox" name="order" value="1">Суп
<input type="checkbox" name="order" value="2">Мясо
<input type="checkbox" name="order" value="3">Рыба
</div>
<div>
<label for="news">Подписаться на новости:</label>
<input id="news" type="checkbox" name="news" checked="checked" value="1">Новости
</div>
<!-- Поиск. Тип: text -->
<!-- Ускоряем выбор данных с помощью datalist. -->
<div>
<label for="search">Ваш любимый поисковик:</label>
<input id="search" type="text" name="search" list="search_list">
<datalist id="search_list">
<option value="Google"></option>
<option value="Yandex"></option>
</datalist>
</div>
<!-- Файл. -->
<div>
<label for="file">Файл:</label>
<input id="file" type="file" name="file">
</div>
<!-- Счетчик для ввода цифр. -->
<div>
<label for="count">Количество копий:</label>
<input id="count" type="number" name="count" min="1" max="10">
</div>
<!-- Ползунок. step - шаг -->
<div>
<label for="range">Диапазон:</label>
<input id="range" type="range" name="range" min="1" max="10" step="2">
</div>
<!-- Поле для ввода даты. -->
<div>
<label for="date">Дата: </label>
<input id="date" type="date" name="date">
</div>
<!-- Выбор цвета. -->
<div>
<label for="color">Цвет: </label>
<input id="color" type="color" name="color">
</div>
<!-- Текстовое поле. Здесь не выводится value. -->
<div>
<label for="message">Сообщение:</label>
<textarea name="message" id="message" placeholder="Введите ваше сообщение">Какой-то текст</textarea>
</div>
<!-- Выпадающий список select - option. selected="selected" - выбор по умолчанию -->
<div>
<label for="city">Город:</label>
<select name="city" id="city" size="3">
<optgroup label="Крупнейшие города">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
</optgroup>
<optgroup label="Крупные города">
<option value="3" selected="selected">Омск</option>
<option value="4">Владивосток</option>
<option value="5">Краснодар</option>
</optgroup>
</select>
</div>
</fieldset>
<div>
<!-- Скрытое поле. -->
<input type="hidden" name="a" value="1">
<!-- Кнопка сброса. -->
<input type="reset" value="Сбросить">
<input type="submit" name="submit" value="Отправить">
</div>
</form>
<hr>
<h2>Форма регистрации</h2>
<form action="#" method="post">
<div>
<label for="name">Имя:</label>
<input id="name" name="name" type="text">
</div>
<div>
<label for="email">E-mail:</label>
<input id="email" name="email" type="email">
</div>
<div>
<label for="password">Пароль:</label>
<input id="password" name="password" type="password">
</div>
<div>
<label for="confirm_password">Пароль:</label>
<input id="confirm_password" name="confirm_password" type="password">
</div>
<div>
<label for="phone">Телефон:</label>
<input id="phone" name="phone" type="tel">
</div>
<div>
<label for="city">Город проживания:</label>
<select name="city" id="city">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
<option value="3">Сочи</option>
<option value="4">Севастополь</option>
</select>
</div>
<div>
<label for="wishes">Ваши пожелания:</label>
<textarea name="wishes" id="wishes" placeholder="Ваши пожелания"></textarea>
</div>
<div>
<label for="news">Подписка на новости:</label>
<input id="news" name="news" type="checkbox" checked="checked">
</div>
<div>
<input type="submit" value="Отправить">
</div>
</form>
</body>
</html>
Комментариев нет:
Отправить комментарий