Интернет. Настройки. Тарифы. Телефон. Услуги

Красивые формы ввода данных html. Создание формы в HTML

Описание

Тег

устанавливает форму на веб-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.

Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует ее использование.

Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега . Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега , а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET , то адресная строка может принимать следующий вид.

http://www..cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Параметры перечисляются после вопросительного знака, указанного после адреса CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Допускается внутрь контейнера помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.

Синтаксис

...

Атрибуты

Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные. Адрес программы или документа, который обрабатывает данные формы. Включает автозаполнение полей формы. Способ кодирования данных формы. Метод протокола HTTP. Имя формы. Отменяет встроенную проверку данных формы на корректность ввода. Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Закрывающий тег

Обязателен.

HTML5 IE Cr Op Sa Fx

Тег FORM

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в окне браузера

Весь интерактив - поля ввода, флажки, переключатели, раскрывающиеся списки, кнопки - это веб-формы и их элементы. В форме вы оставляете комментарий, с помощью формы регистрируетесь, через форму авторизуетесь, пользуетесь формой поиска, голосуете в опросах, загружаете файлы, оформляете подписки - всё это вы делаете с помощью веб-форм.

Внутреннее устройство

Фактически форма состоит из двух частей: визуального оформления и скрипта, который обрабатывает введённые данные. Чтобы написать скрипт, нужно владеть одним из языков программирования. Мы здесь их изучением не занимаемся, поэтому будем разбирать HTML-составляющую - учиться создавать интерфейс формы, предполагая, что где-то у нас уже есть обрабатывающий её скрипт.

HTML-форма создаётся с помощью парного тега

, внутри которого располагаются теги её элементов.

action . Адрес скрипта или документа, который обрабатывает данные формы. В качестве значения указывается URL.
method . Метод передачи данных обработчику. Можно указать GET (по умолчанию) или POST. GET подразумевает передачу данных в виде части URL. Возможно, вы видели в адресах что-то вроде?id=225. Это оно и есть. Метод POST работает по-другому, а потому передаваемые данные от пользователя скрыты. Он более безопасен, позволяет передавать больше информации, в том числе и файлы. Но всё это больше касается программирования, нежели HTML-разметки.
accept-charset . Устанавливает кодировку.
autocomplete . Включает (on) или отключает (off) автозаполнение форм, когда браузер сам подсказывает вам, что вводить, основываясь на том, что вы набирали в прошлый раз. Отключать функцию имеет смысл для конфиденциальных форм, чтобы обозреватель ненароком не показал важных данных.
name. Имя формы.

Есть и ещё атрибуты, но используются они крайне редко.

. Интересный тег, с помощью которого можно создать любой элемент ввода, какой именно - задаётся атрибутом type. Строго говоря, этот тег можно использовать и вне формы, но тогда вы не сможете указать адрес обработчика, и элемент страницы будет нефункциональным.

type . Главный атрибут тега , определяющий, как уже говорилось, тип элемента ввода. Значений у него так много, и они так важны, что хватило на целую таблицу (см. ниже).

Значение	Описание

	Флажки. С их помощью вы можете выбрать сразу несколько вариантов
	Кнопка выбора файла
	Скрытое поле, в браузере не отображается
	Кнопка с картинкой
	Поле для ввода пароля. Обычное текстовое поле, но вводимые символы скрываются за звёздочками (*)
	Переключатели. Почти флажки, но с их помощью можно выбрать только один из предложенных вариантов
	Кнопка сброса данных формы к первоначальным значениям
	Кнопка отправки данных на сервер. Обычно вы нажимаете их, чтобы подтвердить ввод - Сохранить, Применить, ОК
	Текстовое поле

Множество новых значений появилось в HTML5, но они, к сожалению, пока (июнь 2016) поддерживаются только частично.

autofocus . Фокус ввода будет по умолчанию устанавливаться на том элементе, для которого указан этот атрибут.
checked . Установить флажок или радиокнопку по умолчанию.
pattern . С помощью этого атрибута можно заставить пользователя ввести данные в определённом формате. Например, ввести только одну цифру от 0 до 9 или только буквы латинского алфавита (должно быть знакомо). Пока поле не будет заполнено правильно, данные формы не будут переданы на обработку.
placeholder . Задаёт текст-подсказку.
.
value . Значение пункта списка для обработки скриптом.
selected . Пункт с этим атрибутом по умолчанию будет выделен, как будто пользователь выбрал именно его.
. Контейнер позволяет группировать элементы списка .
disabled . Делает группу списка недоступной для выбора (при этом она отображается другим цветом).
label . Текст заголовка группы.

Пример формы

Теперь, когда все теги известны, создадим небольшую форму авторизации, данные которой обрабатывает файл script.php , находящийся в папке с HTML-страницей.

Код будет таким.

Форма Логин:

Пароль:

Кто вы?

Запомнить

Разберём некоторые его части.

- создаём форму, обрабатываемую файлом script.php. Данные передаются методом GET.

< br > - тег перехода на следующую строку.

< input name =" login " type =" text " size ="25" maxlength ="30" value ="Михаил"> - создаём текстовое поле с именем login шириной в 25 символов. В качестве значения по умолчанию указываем Михаил, чтобы пользователю было понятно, что и как вводить.

< input name =" pass " type =" password " size ="25" maxlength ="30" value =""> - создаём поле ввода пароля (символы замещаются звёздочками). Ширина поля - 25, максимальная длина пароля - 30 символов.

< select >< option value =" c 1">Гостьoption >< option value =" c 2">Администраторoption >select > - создаём простой раскрывающийся список из двух пунктов.

< input name =" save " type =" checkbox " value =" yes "> Запомнить - добавляем флажок и пишем поясняющий текст.

< br >< input type =" submit " name =" enter " value ="Вход"> - создаём кнопку, нажатие которой запускает процесс обработки данных.

- закрываем форму.

В браузере веб-форма будет выглядеть, как на рисунке ниже.

Её можно заполнять, но чтобы она начала работать, необходимо написать код и сохранить его в файле script.php рядом с HTML-страницей.

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и , списки <select> , подсказки и т.д. Весь код формы заключается в элемент <form> .</p> <p>Большая часть информации веб-форм передаётся с помощью элемента <input> . Для ввода одной строки текста применяется элемент <input type="text"> , для нескольких строк - элемент <textarea> . Элемент <select> создает выпадающий список.</p> <p>Элемент <label> создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label> , то атрибут for указывать не нужно.</p><p> <label for="lastname">Last Name</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Last Name</label> <label>Last Name<input type="text" name="lastname"></label> </p><p>Поля формы можно разделять на логические блоки с помощью элемента <fieldset> . Каждому разделу можно присвоить название с помощью элемента <legend> .</p><p> <fieldset> <legend><a href="/phone/skachat-yandeks-karty-2-gis-na-android-vhod-v-zdanie-shemy-i-kontaktnaya/">Контактная информация</a></legend> <label>Имя<input type="text" required></label> <label>E-mail<input type="email" required></label> </fieldset> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy> Рис. 1. Группировка полей формы </p><p>Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .</p> <p>Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.</p><p> <input type="text" required placeholder="Ваше имя"> </p><p>Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:</p><p>Input:focus { background: #eaeaea; } </p><p>Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).</p> <h2>Пример создания формы регистрации</h2> <div class="form-wrap"> <div class="profile"><img src='https://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy> <h1>Регистрация</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Имя</label> <input type="text" name="name" required> </div> <div class="radio"> Пол <label> <input type="radio" name="sex" value="мужской">мужской <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="женский">женский <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Страна</label> <select name="country"> <option>Выберите страну проживания</option> <option value="Россия">Россия</option> <option value="Украина">Украина</option> <option value="Беларусь">Беларусь</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Отправить</button> </form> </div> <p><b>Примечание </b><br> action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.</p> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. <a href="/internet/kak-otlichit-planshet-original-ot-kitaiskogo-kak-otlichit/">Внешний вид</a> формы по умолчанию <p>Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.</p><p>Form-wrap { width: 550px; background: #ffd500; border-radius: 20px; } .form-wrap *{transition: .1s linear} .profile { width: 240px; float: left; text-align: center; padding: 30px; } form { background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; } .form-wrap:after, form div:after { content: ""; display: table; clear: both; } form div { margin-bottom: 15px; position: relative; } h1 { font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; } h1:after { content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); } /********************** стилизация элементов формы **********************/ label, span { display: block; font-size: 14px; margin-bottom: 8px; } input, input { border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; } input:focus, input:focus { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio label { position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; } .radio input { position: absolute; opacity: 0; } .radio-control { position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; } .male:before { content: "\f222"; font-family: FontAwesome; font-weight: bold; } .female:before { content: "\f221"; font-family: FontAwesome; font-weight: bold; } .radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio input:checked ~ .radio-control { color: red; } select { width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в <a href="/services/kak-mozile-sinhronizirovat-2-kompyutera-kak-nastroit-sinhronizaciyu/">Mozilla Firefox</a>*/ } select::-ms-expand { display: none; /*убираем галочку в IE*/ } .select-arrow { position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; } button { padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; } /********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) { .form-wrap {margin: 20px auto; max-width: 550px; width:100%;} .profile, form {float: none; width: 100%;} h1 {margin-top: auto; padding-bottom: 50px;} form {border-radius: 0 0 20px 20px;} } </p><p><b>Файл form.php </b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){ mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; } ?> </p><p><b>Примечание </b><br> В переменной $subject укажите текст, который будет отображаться как заголовок письма;<br> Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;<br> url_вашего_сайта замените на адрес сайта с формой регистрации;<br> ваш_email замените на ваш адрес <a href="/internet/anonimnye-pochtovye-servisy-elektronnoi-pochty-kak-sozdat/">электронной почты</a>;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет <a href="/internet/beznadezhnyi-otpravit-mne-kopiyu-soobshcheniya-na-pochtu-otpravka-e-mail-v-papku/">скрытую копию</a> на ваш адрес электронной почты.</p> <p>Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали <span>проблему с кодировкой на сайте </span> . В данной статье я бы хотел рассказать о <b>создании форм в HTML </b>. Мне кажется, что это самая важная тема в HTML. Мне вспоминаются слова моей учительницы по <a href="/phone/kak-chitayutsya-nomera-telefonov-v-angliiskom-yazyke-gotovye-frazy-na-angliiskom/">английскому языку</a>. Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML . Если вы знаете формы — вы уже неплохо знаете HTML. Сейчас наверное уже практически и нет сайтов, на которых отсутствуют формы html. Формы используются везде: при создании регистрации, авторизации, подписки, гостевой книги, форума, создании своего движка, да абсолютно везде. Статья наверняка получится большая, так что приготовьтесь. Давайте приступим к изучению формы сразу на примере:</p><p> <html> <meta charset="utf-8"/> <head><title>Создание форм HTML</title></head> <body> <form name="myform" action="" method="post"> Имя<input type = "text" name = "myname" value = "Введите имя"/> </br> Пароль<input type = "password" name = "mypass"> </br> <textarea name = "mytextarea" rows = "10" cols = "30">Введите сообщение...
Выберите поисковую системуGoogle Yandex Rambler
Готовы изучить формы? Да Конечно да=)
Выберите один из вариантов
Файл

Простая кнопка
Отправить форму
Очистить поля формы
При первом взгляде бросает в дрожь. На самом деле здёсь всё просто, давайте разбираться потихоньку:

Создание формы начинается с ключевого слова
. Это парный тег, соответственно создание формы должно завершаться тегом
. У тега
есть несколько атрибутов. Атрибут name задаёт имя формы (это нужно для обработки формы, например в Javascript). Можно, конечно, и не указывать имя, но всё-таки рекомендую это делать. В атрибуте action указывается имя скрипта, который будет обрабатывать форму (обычно это скрипт на php) и выглядит это так action="request.php" . В нашем случае мы не обрабатываем форму. Атрибут method указывает каким способом мы будем передавать данные: открытым (get ) или скрытым (post ). Сразу пример того, что будет показано в строке браузера при этих двух различных атрибутах:

1) Если мы используем метод post: mysite.ru/request.php .
2) Если мы используем метод get: mysite.ru/request.php?myname="Alex"&surname="Gulynin" .
Думаю различия понятны.

Элементы формы:

1) Тестовое поле . Текстовое поле создаётся с помощью тега , как впрочем и все элементы формы. Атрибут type="text" как раз и отвечает за то, что будет создано текстовое поле. Атрибут name — это имя, как и во всех элементах формы. Атрибут value — это значение по умолчанию.

2) Поле для ввода пароля . Задаётся с помощью все то же тега с атрибутом type="password" .

3) Текстовая область . Задаётся с помощью тега . Это парный тег, текстовая область должна закрываться тегом . У этого элемента есть несколько атрибутов. Также можно задать атрибут name . Атрибут rows отвечает за количество строк, атрибут cols — за количество столбцов. Современные браузеры могут расширять текстовую область, чтобы удобнее было вводить в неё текст. Атрибуты rows и cols — это, так сказать, минимальные значения, до которых можно сжать форму (изначально при загрузке страницы текстовая область имеет размеры, которые заданы атрибутами rows и cols).

4) Радиокнопки . Смысл радиокнопок в том, чтобы выбрать какое-то одно значение из нескольких. Радиокнопки также создаются с помощью тега с атрибутом type="radio" . Атрибут value указывает значение, которое соответствует радиокнопке. Хочу обратить ваше внимание вот на какой момент: в нашем примере все 3 кнопки имеют одинаковое значение атрибута name . Если они будут иметь разное значение атрибута name, ты мы сможем нажать на них все. Соответственно не получится их правильно обработать. Атрибут checked (значения у него нет) указывает на то, какая радиокнопка будет выбрана по умолчанию.

5) Флажки . В отличие от радиокнопок, флажки можно прощелкать все. Наберите пример и убедитесь в этом сами. Создаются с помощью тега с атрибутом type="checkbox" . Смысл остальных атрибутов такой же, как и у радиокнопок. Скажу только, если мы все галочки снимем, то у нас передастся пустое значение, т.е. в нашем случае будет mycheck="" .

6) Выпадающий список . Выпадающий список создаётся с помощью тега . В данной конструкции необходимо ещё с помощью тега

7) Поле для отправки файла . Наверняка вы не раз загружали и отправляли файл, например при задании аватарки для своего профиля. Такой элемент реализуется с помощью тега с атрибутом type="file" . Самое сложное — это обработать правильно файл, но этому будет посвящена отдельная статья.

8) Скрытое поле . Иногда встаёт необходимость передать какие-нибудь данные, вместе со всей остальной формой. Именно для этого и служит тег с атрибутом type="hidden" . На самой форме его не видно, но если вы посмотрите исходный код страницы (правой кнопкой по странице и выбрать "исходный код" или нажать сочетание клавиш "ctrl+u"), та данное поле можно будет увидеть.

9) Кнопки . Кнопки создаются с помощью тега с атрибутом type="button" . Атрибут value отвечает за то, что будет написано на кнопке. Кнопки обычно служат для обработки какого-то события. О событиях кнопок можно будет прочитать в одной из следующих статей.

10) Отправка формы . По сути это такая же кнопка, но с атрибутом type="submit" . При нажатии на кнопку форма перейдёт на обработку по пути, указанному в атрибуте action тега

В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам чтобы перемещаться по веб-страницам.
Но понятно, что пользователю иногда требуется обеспечить собственные поля ввода . Эти виды взаимодействия включают в себя:
регистрацию и вход на сайтах;
ввод личной информации (имя, адрес, данные кредитной карты и др.);
фильтрацию контента (с помощью выпадающих списков, флажков и др.);
выполнение поиска;
загрузку файлов.

Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления формы:
текстовые поля (для одной или нескольких строк);
переключатели;
флажки;
выпадающие списки;
виджеты для загрузки;
кнопки отправки.

Эти элементы управления задействуют разные теги HTML, но большинство из них использует тег . Поскольку это самозакрывающий элемент, тип поля определяется его атрибутом type :

Элемент
является блочным элементом, который определяет интерактивную часть веб-страницы. Как результат, все элементы управления (такие как , или <button> ) должны находиться <i>внутри </i> элемента <form> .</p><p>Два <a href="/rates/kakoi-teg-ustanavlivaet-bazovyi-razmer-shrifta-spravochnik-tegov-html/">атрибута HTML</a> <b>необходимы </b>:</p><ul><li>action содержит адрес, который определяет, <i>куда </i> будет отправлена информация формы;</li><li>method может быть либо GET, либо POST и определяет, <i>как </i> будет отправлена информация формы.</li> </ul><p>Как правило, информация формы посылается на <b>сервер </b>. <i>Как </i> эти данные затем будут обработаны выходит за рамки данного руководства.</p><p>Подумайте о форме как о наборе элементов управления, которые работают вместе, чтобы выполнить <b>одну </b> операцию. Если вы написали форму входа на сайт, у вас могло быть <b>три </b> поля:</p><ul><li>поле для электронной почты <input type="email"> </li><li>поле для пароля <input type="password"> </li><li>кнопка отправки <input type="submit"> </li> </ul><p>Эти три <a href="/services/kak-sbrosit-nastroiki-css-po-umolchaniyu-ispolzovanie-znacheniya-po/">элемента HTML</a> будут заключены внутри одной формы <span><form action="/login" method="POST"> </span>.</p><p>Вы можете аналогично добавить форму регистрации на той же HTML-странице, в отдельном элементе <form> .</p><h2>Текстовые поля</h2><p>Почти всем формам требуется <b>текстовый </b> ввод от пользователей, чтобы ввести своё имя, адрес электронной почты, пароль, адрес и др. Текстовые поля формы приходят в разных вариантах.</p><p>Хотя эти поля очень похожи и позволяют пользователям вводить текст любого рода (даже неправильный), их тип обеспечивает специфическую <b>семантику </b> для ввода, определяя, какую информацию поле <b>должно </b> содержать.</p><p>Браузеры могут впоследствии немного изменить интерфейс элемента управления, чтобы повысить <i>интерактивность </i> или подсказать, какое содержимое ожидается.</p><p>К примеру, поле для пароля показывает точки вместо символов. А поле для чисел позволяет увеличивать/уменьшать значение с помощью клавиш вверх и вниз.</p><h2>placeholder</h2><p>Текстовые поля могут отображать <b>подсказывающий </b> текст, который исчезнет, как только будет введён некоторый текст.</p><p> <input type="text" placeholder="Введите своё имя"> </p><p>Если вы начинаете набирать что-то, то увидите как текст «Введите своё имя» исчезнет.</p><h2><label></h2><p>Так как элементы формы сами по себе не очень описательны, им, как правило, предшествует текстовая <b>метка </b>.</p><p> <label>Email</label> <input type="email"> </p><p>В то время как placeholder уже обеспечивает некоторую подсказку о том, какое ожидается содержание, метки имеют преимущество оставаясь видимыми в любое время и могут использоваться наряду с другими типами элементов формы, таких как флажки или переключатели.</p><p>Хотя вы можете применять короткие абзацы для описания элементов формы, использование <label> является семантически более правильным, потому что они существуют только в формах. <label> также может быть связан с определённым элементом формы с помощью атрибута for , соответствующему значению id у поля.</p><p> <label for="first_name">Имя</label> <input id="first_name" type="text"> </p><p>При щелчке по метке фокус переходит к текстовому полю и помещает курсор внутрь него. Пока эта связка кажется бесполезной, но пригодится с флажками и переключателями.</p><h2>Флажки</h2><p><b>Флажки </b> - это элементы формы, которые имеют только два состояния: включено или выключено. Они в основном позволяют пользователю сказать: «Да» или «Нет» для чего-то.</p><p> <input type="checkbox"> Запомнить меня </p><p>Поскольку может оказаться сложно щёлкнуть по небольшому флажку, рекомендуется поместить флажок и его описание внутрь <label> .</p><p> <label> <input type="checkbox"> Я согласен с условиями </label> </p><p>Вы можете щёлкнуть по тексту «Я согласен с условиями» чтобы переключить флажок.</p><p>По умолчанию флажок выключен. Вы можете пометить его включенным, просто используя атрибут checked .</p><p> <label> <input type="checkbox" checked> Использовать мой платёжный адрес </label> </p><h2>Переключатели</h2><p>Вы можете предоставить пользователю <b>список вариантов </b> на выбор с помощью переключателей.</p><p>Для работы этого элемента формы, ваш HTML-код должен <b>сгруппировать </b> список переключателей вместе. Это достигается с помощью одного и того же значения для атрибута name:</p><p> <label>Семейное положение</label> <label> <input type="radio" name="status"> Холост </label> <label> <input type="radio" name="status"> Женат </label> <label> <input type="radio" name="status"> Разведён </label> <label> <input type="radio" name="status"> Вдовец </label> </p><p>Поскольку все переключатели используют одинаковое значение атрибута name (в данном случае значение status ), выбор одного из вариантов отменит все остальные. Переключатели являются <b>взаимоисключающими </b>.</p><h3>Разница между переключателями и флажками</h3><p>Хотя флажок существует <b>сам по себе </b>, переключатели могут появляться только в виде <b>списка </b> (что означает, по меньшей мере два варианта).</p><p>Кроме того, щелчок по флажку является <b>произвольным </b>, в то время как выбор одного из переключателей является <b>обязательным </b>. Вот почему невозможно выключить переключатель, если выбрать ближайший вариант. В конце концов, всегда выбирается один из переключателей.</p><h2>Выпадающие меню</h2><p>Если количество вариантов для выбора занимает слишком много места, вы можете воспользоваться выпадающими меню <select> .</p><p>Они работают подобно переключателям, отличается только компоновка.</p><p> <select> <option>Январь</option> <option>Февраль</option> <option>Март</option> <option>Апрель</option> <option>Май</option> <option>Июнь</option> <option>Июль</option> <option>Август</option> <option>Сентябрь</option> <option>Октябрь</option> <option>Ноябрь</option> <option>Декабрь</option> </select> </p><h3>Множественный выбор из выпадающего меню</h3><p>Если добавить атрибут multiple , вы можете предоставить возможность выбрать несколько вариантов.</p><p> <label>Какими браузерами вы пользуетесь?</label> <select multiple> <option><a href="/services/ustanovit-google-chrome-kak-brauzer-po-umolchaniyu-kak-sdelat-google-chrome-brauzerom-po/">Google Chrome</a></option> <option><a href="/phone/yandeks-elementy-skachat-i-ustanovit-bar-v-firefox-internet-explorer-opera-i-chrome-chto-takoe/">Internet Explorer</a></option> <option>Mozilla Firefox</option> <option>Opera</option> <option>Safari</option> </select> </p><p>Выберите несколько вариантов посредством удержания Ctrl (или ⌘) и щелчка. Это может быть хорошей альтернативой применению несколько флажков в строке.</p><h2>Пример: полная форма регистрации</h2> <form action="/signup" method="POST"> <p> <label>Обращение</label> <label> <input type="radio" name="title" value="mr"> Г-н </label> <label> <input type="radio" name="title" value="mrs"> Г-жа </label> </p> <p> <label>Имя</label> <input type="text" name="first_name"> </p> <p> <label>Фамилия</label> <input type="text" name="last_name"> </p> <p> <label>Email</label> <input type="email" name="email"> </p> <p> <label>Телефон</label> <input type="tel" name="phone"> </p> <p> <label>Пароль</label> <input type="password" name="password"> </p> <p> <label>Подтвердите пароль</label> <input type="password" name="password_confirm"> </p> <p> <label>Страна</label> <select name="country"> <option>Канада</option> <option>Франция</option> <option>Германия</option> <option>Италия</option> <option>Япония</option> <option>Россия</option> <option>Великобритания</option> <option>США</option> </select> </p> <p> <label> <input type="checkbox" name="terms"> Я согласен с условиями использования </label> </p> <p> <button> Зарегистрироваться </button> </p> </form> <p>Также доступны и другие элементы форм, но мы рассмотрели наиболее используемые.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> </article> <div class="mblock"> <div class="block_header">Также по теме</div> <article class="shortstory news2 cf"> <div class="short_info"> <div class="short_title"><a href="/internet/skachat-novyi-proigryvatel-windows-media-chasto-skachivayut-s-windows-media-player/">Часто скачивают с Windows Media Player</a> </div> </div> <div class="short_info"> <div class="short_title"><a href="/internet/chto-luchshe-android-libo-ios-chto-luchshe-android-windows-ili-ios-proshivki-i-obnovleniya/">Что лучше Android, Windows или iOS</a> </div> </div> <div class="short_info"> <div class="short_title"><a href="/rates/kak-v-noutbuke-vklyuchit-sensornuyu-mysh-kak-upravlyat-kursorom-s/">Как управлять курсором с клавиатуры в Windows</a> </div> </div> <div class="short_info"> <div class="short_title"><a href="/phone/mr-lc-vnukovo-ceh-1-telefon-otdeleniya-mr-lc-vnukovo-prishlo-zakaznoe-pismo-chto/">Мр Лц Внуково пришло заказное письмо: что это такое</a> </div> </div> <div class="short_info"> <div class="short_title"><a href="/settings/vhod-v-lichnyi-kabinet-atlant-telekom-nastroika-interneta-i-wi-fi/">Настройка интернета и Wi-Fi сети Атлант Телеком</a> </div> </div> </article> </div> </div> </div> </div> </div> </div> <div class="right"> <div class="block_header"><a href="/">Популярное</a></div> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/services/kak-uznat-razryadnost-operacionnoi-sistemy-i-processora-v-windows-vvedenie/">Введение в Windows XP Professional для работы в сети 64 битная windows 7 требования</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/services/karta-zona-pokrytiya-internet-mts-karta-zony-pokrytiya/">Карта зоны покрытия мегафон</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/settings/yazyk-programmirovaniya-php-s-nulya-izuchaem-php-i-mysql-pravilno-zashchishchaite/">Изучаем PHP и MySQL правильно</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/rates/sovershaem-vnutriigrovye-pokupki-v-lyubom-ios-prilozhenii-besplatno-kak/">Как осуществлять встроенные (внутриигровые) покупки бесплатно (джейлбрейк, видео) Как взломать любую игру на iPhone и iPad без джейлбрейка</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/rates/ipad-nevernoe-vremya-kak-pomenyat-vremya-i-datu-na-iphone-kak-vruchnuyu/">Как поменять время и дату на iPhone?</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/settings/promokody-lamoda-promokody-lamoda-promokod-lamoda-na-novuyu-kollekciyu-avgust/">Промокоды Lamoda Промокод lamoda на новую коллекцию август</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/services/kak-sobrat-kitaiskii-blok-pitaniya-dorabotka-deshevyh-kitaiskih/">Доработка дешевых китайских блоков питания ATX</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/phone/tesak-na-golovy-tinker-universalnyi-boevoi-tesak-pochemu/">Универсальный боевой тесак</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/internet/reshenie-problemy-nerabotayushchego-povorota-ekrana-na-android-planshete-ne/">Не поворачивается экран на iPad: почему и что делать?</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/internet/mobilnyi-telefon-nomi-i177-instrukciya-po-ekspluatacii-iluv/">Инструкция по эксплуатации Iluv, модель i177 Инструкция по эксплуатации телефона номи ай 177</a> </div> </div> </article> <div> </div> </div> <div class="cf"></div> <div class="mblock cf"> </div> <div class="wblock cf"> <div class="col5"> <div class="block_header"><a href="/category/internet/">Интернет</a></div> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/phone/vykidyvaet-na-rabochii-stol-sniper-elite-v2-vykidyvaet-na-rabochii-stol-sniper-elite-v2-ne/">Выкидывает на рабочий стол Sniper Elite V2 Не запускается снайпер элит 3 стим</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/phone/unix-rasshifrovka-hesh-parol-sol-onlain-md5-rasshifrovka-onlain-chto/">Unix расшифровка хэш пароль соль онлайн</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/services/kak-ubrat-otstup-u-spiska-sleva-css-doloi-otstupy-mezhdu-strochnymi-elementami-i/">Долой отступы между строчными элементами (и блоками)</a> </div> </div> </article> </div>  <div class="col5"> <div class="block_header"><a href="/category/settings/">Настройки</a></div> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/services/hdd-zagruzhen-na-100-procentov-kak-pomoch-chto-delat-esli-bolshaya-nagruzka-na/">Что делать если большая нагрузка на диск</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/phone/veroyatnye-prichiny-nepoladok-s-internet-svyazyu-sekrety-sistemshchika/">Причины, почему не работает интернет на ПК и их устранения?</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/internet/skachat-novyi-proigryvatel-windows-media-chasto-skachivayut-s-windows-media-player/">Часто скачивают с Windows Media Player</a> </div> </div> </article> </div>  <div class="col5"> <div class="block_header"><a href="/category/rates/">Тарифы</a></div> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/internet/chto-luchshe-android-libo-ios-chto-luchshe-android-windows-ili-ios-proshivki-i-obnovleniya/">Что лучше Android, Windows или iOS</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/rates/kak-v-noutbuke-vklyuchit-sensornuyu-mysh-kak-upravlyat-kursorom-s/">Как управлять курсором с клавиатуры в Windows</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/phone/mr-lc-vnukovo-ceh-1-telefon-otdeleniya-mr-lc-vnukovo-prishlo-zakaznoe-pismo-chto/">Мр Лц Внуково пришло заказное письмо: что это такое</a> </div> </div> </article> </div>  <div class="col5"> <div class="block_header"><a href="/category/phone/">Телефон</a></div> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/settings/vhod-v-lichnyi-kabinet-atlant-telekom-nastroika-interneta-i-wi-fi/">Настройка интернета и Wi-Fi сети Атлант Телеком</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/services/kak-uznat-razryadnost-operacionnoi-sistemy-i-processora-v-windows-vvedenie/">Введение в Windows XP Professional для работы в сети 64 битная windows 7 требования</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/services/karta-zona-pokrytiya-internet-mts-karta-zony-pokrytiya/">Карта зоны покрытия мегафон</a> </div> </div> </article> </div>  <div class="col5"> <div class="block_header"><a href="/category/services/">Услуги</a></div> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/settings/yazyk-programmirovaniya-php-s-nulya-izuchaem-php-i-mysql-pravilno-zashchishchaite/">Изучаем PHP и MySQL правильно</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/rates/sovershaem-vnutriigrovye-pokupki-v-lyubom-ios-prilozhenii-besplatno-kak/">Как осуществлять встроенные (внутриигровые) покупки бесплатно (джейлбрейк, видео) Как взломать любую игру на iPhone и iPad без джейлбрейка</a> </div> </div> </article> <article class="shortstory news4 cf"> <div class="short_info"> <div class="short_title"><a href="/rates/ipad-nevernoe-vremya-kak-pomenyat-vremya-i-datu-na-iphone-kak-vruchnuyu/">Как поменять время и дату на iPhone?</a> </div> </div> </article> </div>  </div> </section> <footer class="footer wrap cf"> <div class="footer_links"> <ul> <li><a href="">О проекте</a></li> <li><a href="/feedback/">Контакты</a></li> <li><a href="/sitemap.xml">Карта сайта</a></li> </ul> </div> <div class="copyrights">© 2024 Интернет. Настройки. Тарифы. Телефон. Услуги</div> <section class="about cf"> </section> <div class="counters"> </div> </footer> <script type="text/javascript"> $(function() { $(window).scroll(function() { if($(this).scrollTop() != 0) { $('#totop').fadeIn(); } else { $('#totop').fadeOut(); } } ); $('#totop').click(function() { $('body,html').animate({ scrollTop:0} ,800); } ); } ); </script> <div id="totop"> <div class="uparrow icon-angle-up"></div> </div> </body> </html>