Образцовый form html. Создания форм в HTML

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

Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега . Значение атрибута for должно соответствовать значению глобального атрибута того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент будет находиться внутри элемента .

Рассмотрим пример использования:

В этом примере мы:

• Внутри первой формы:
  • Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя , значения мы указали разные. Для первой checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes ). Кроме того, мы указали для радиокнопок глобальные атрибуты , которые определяют уникальный идентификатор для элемента.
  • Разместили два элемента , которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for , чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута необходимой нам радиокнопки.
• Внутри второй формы:
  • Разместили две радиокнопки ( ) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked , который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no ). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
  • Разместили два элемента , внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты (идентификатор для элемента), а для текстовых меток использовать атрибут for , чтобы на них сослаться (сделать привязку).

В браузере оба варианта (метода) использования текстовых меток выглядят идентично:

Подсказка для полей ввода

Давайте рассмотри пример использования:

В данном примере мы указали для элемента с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.

Результат нашего примера:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Используя полученные знания составьте следующую форму оформления заказа:

Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

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>Контактная информация</legend> <label>Имя<input type="text" required></label> <label>E-mail<input type="email" required></label> </fieldset> <br><img src='https://i0.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://i0.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://i1.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. Внешний вид формы по умолчанию <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; /*убираем галочку в Mozilla Firefox*/ } 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 замените на ваш адрес электронной почты;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.</p> <p>Весь интерактив - поля ввода, флажки, переключатели, раскрывающиеся списки, кнопки - это веб-формы и их элементы. В форме вы оставляете комментарий, с помощью формы регистрируетесь, через форму авторизуетесь, пользуетесь формой поиска, голосуете в опросах, загружаете файлы, оформляете подписки - всё это вы делаете с помощью веб-форм.</p> <h2>Внутреннее устройство</h2> <p>Фактически форма состоит из двух частей: визуального оформления и скрипта, который обрабатывает введённые данные. Чтобы написать скрипт, нужно владеть одним из языков программирования. Мы здесь их изучением не занимаемся, поэтому будем разбирать HTML-составляющую - учиться создавать интерфейс формы, предполагая, что где-то у нас уже есть обрабатывающий её скрипт.</p> <p>HTML-форма создаётся с помощью парного тега <b><form> </b>, внутри которого располагаются теги её элементов.</p> <h2>Теги</h2> <p>Перед тем, как показывать примеры, пройдёмся по тегам.</p><p><b><form> </b>. Создаёт форму. Если сравнивать форму с таблицей, то тег <b><form> </b> выполняет ту же роль, что и тег <b><table> </b>. К нему прилагаются следующие атрибуты.</p> <ul><li><b>action </b>. Адрес скрипта или документа, который обрабатывает данные формы. В качестве значения указывается URL.</li> <li><b>method </b>. Метод передачи данных обработчику. Можно указать GET (по умолчанию) или POST. GET подразумевает передачу данных в виде части URL. Возможно, вы видели в адресах что-то вроде?id=225. Это оно и есть. Метод POST работает по-другому, а потому передаваемые данные от пользователя скрыты. Он более безопасен, позволяет передавать больше информации, в том числе и файлы. Но всё это больше касается программирования, нежели HTML-разметки.</li> <li><b>accept-charset </b>. Устанавливает кодировку.</li> <li><b>autocomplete </b>. Включает (on) или отключает (off) автозаполнение форм, когда браузер сам подсказывает вам, что вводить, основываясь на том, что вы набирали в прошлый раз. Отключать функцию имеет смысл для конфиденциальных форм, чтобы обозреватель ненароком не показал важных данных.</li> <li>name. Имя формы.</li> </ul><p>Есть и ещё атрибуты, но используются они крайне редко.</p> <p><b><input> </b>. Интересный тег, с помощью которого можно создать любой элемент ввода, какой именно - задаётся атрибутом type. Строго говоря, этот тег можно использовать и вне формы, но тогда вы не сможете указать адрес обработчика, и элемент страницы будет нефункциональным.</p> <ul><li><b>type </b>. Главный атрибут тега <b><input> </b>, определяющий, как уже говорилось, тип элемента ввода. Значений у него так много, и они так важны, что хватило на целую таблицу (см. ниже).</li> </ul><table border="1" cellpadding="0" cellspacing="0"><tbody><tr><td style="width:177px;"> <p><b>Значение </b></p> </td> <td style="width:442px;"> <p><b>Описание </b></p> </td> </tr><tr><td style="width:177px;"> </td> <td style="width:442px;"> </td> </tr><tr><td style="width:177px;"> </td> <td style="width:442px;"> <p>Флажки. С их помощью вы можете выбрать сразу несколько вариантов</p> </td> </tr><tr><td style="width:177px;"> </td> <td style="width:442px;"> <p>Кнопка выбора файла</p> </td> </tr><tr><td style="width:177px;"> </td> <td style="width:442px;"> <p>Скрытое поле, в браузере не отображается</p> </td> </tr><tr><td style="width:177px;"> </td> <td style="width:442px;"> <p>Кнопка с картинкой</p> </td> </tr><tr><td style="width:177px;"> </td> <td style="width:442px;"> <p>Поле для ввода пароля. Обычное текстовое поле, но вводимые символы скрываются за звёздочками (*)</p> </td> </tr><tr><td style="width:177px;"> </td> <td style="width:442px;"> <p>Переключатели. Почти флажки, но с их помощью можно выбрать только один из предложенных вариантов</p> </td> </tr><tr><td style="width:177px;"> </td> <td style="width:442px;"> <p>Кнопка сброса данных формы к первоначальным значениям</p> </td> </tr><tr><td style="width:177px;"> </td> <td style="width:442px;"> <p>Кнопка отправки данных на сервер. Обычно вы нажимаете их, чтобы подтвердить ввод - <b>Сохранить, Применить, ОК </b></p> </td> </tr><tr><td style="width:177px;"> </td> <td style="width:442px;"> <p>Текстовое поле</p> </td> </tr></tbody></table><p>Множество новых значений появилось в HTML5, но они, к сожалению, пока (июнь 2016) поддерживаются только частично.</p> <ul><li><b>autofocus </b>. Фокус ввода будет по умолчанию устанавливаться на том элементе, для которого указан этот атрибут.</li> <li><b>checked </b>. Установить флажок или радиокнопку по умолчанию.</li> <li><b>pattern </b>. С помощью этого атрибута можно заставить пользователя ввести данные в определённом формате. Например, ввести только одну цифру от 0 до 9 или только буквы латинского алфавита (должно быть знакомо). Пока поле не будет заполнено правильно, данные формы не будут переданы на обработку.</li> <li><b>placeholder </b>. Задаёт текст-подсказку.</li> <li><b><select> </b>. Контейнер, с помощью которого создаётся список. Это может быть раскрывающийся список либо список с одним или множественным выбором. За элементы списка отвечают теги <b><option> </b>.</li> <li><b>size </b>. Главное свойство, которое указывает количество отображаемых строк списка. Например, если значение равно 1, то список получается раскрывающимся, в противном случае получается либо список, все элементы которого сразу видны, либо список, по элементам которого можно перемещаться с помощью полосы прокрутки.</li> <li><b>multiple </b>. Атрибут без значений. Укажите его, чтобы получить список со множественным выбором.</li> <li><b>required </b>. Делает список обязательным для выбора, то есть пока пользователь не укажет в нём значение, форма не отправится. Часто так поступают со списком Пол в регистрационных формах.</li> <li><b><option> </b>. Тег элемента списка, используемый внутри <b><select> </b>.</li> <li><b>value </b>. Значение пункта списка для обработки скриптом.</li> <li><b>selected </b>. Пункт с этим атрибутом по умолчанию будет выделен, как будто пользователь выбрал именно его.</li> <li><b><optgroup> </b>. Контейнер позволяет группировать элементы списка <b><option> </b>.</li> <li><b>disabled </b>. Делает группу списка недоступной для выбора (при этом она отображается другим цветом).</li> <li><b>label </b>. Текст заголовка группы.</li> </ul><h2>Пример формы</h2> <p>Теперь, когда все теги известны, создадим небольшую форму авторизации, данные которой обрабатывает файл <b>script.php </b>, находящийся в папке с HTML-страницей.</p> <p>Код будет таким.</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Форма</title> </head> <body> <form method="get" action="script.php"> Логин:<br> <input name="login" type="text" size="25" maxlength="30" value="Михаил"> <br>Пароль: <br> <input name="pass" type="password" size="25" maxlength="30" value=""> <br>Кто вы? <select> <option value="c1">Гость</option> <option value="c2">Администратор</option> </select></p> <input name="save" type="checkbox" value="yes"> Запомнить <br><input type="submit" name="enter" value="Вход"> </form> </body> </html></p> <p>Разберём некоторые его части.</p> <p><b><form method="get" action="script.php"> </b> - создаём форму, обрабатываемую файлом script.php. Данные передаются методом GET.</p> <p><b>< </b><b>br </b><b>> </b> - тег перехода на следующую строку.</p> <p><b>< </b><b>input </b> <b>name </b><b>=" </b><b>login </b><b>" </b><b>type </b><b>=" </b><b>text </b><b>" </b><b>size </b><b>="25" </b><b>maxlength </b><b>="30" </b><b>value </b><b>="Михаил"> </b> - создаём текстовое поле с именем login шириной в 25 символов. В качестве значения по умолчанию указываем Михаил, чтобы пользователю было понятно, что и как вводить.</p> <p><b>< </b><b>input </b> <b>name </b><b>=" </b><b>pass </b><b>" </b><b>type </b><b>=" </b><b>password </b><b>" </b><b>size </b><b>="25" </b><b>maxlength </b><b>="30" </b><b>value </b><b>=""> </b> - создаём поле ввода пароля (символы замещаются звёздочками). Ширина поля - 25, максимальная длина пароля - 30 символов.</p> <p><b>< </b><b>select </b><b>>< </b><b>option </b> <b>value </b><b>=" </b><b>c </b><b>1">Гость</ </b><b>option </b><b>>< </b><b>option </b> <b>value </b><b>=" </b><b>c </b><b>2">Администратор</ </b><b>option </b><b>></ </b><b>select </b><b>> </b> - создаём простой раскрывающийся список из двух пунктов.</p> <p><b>< </b><b>input </b> <b>name </b><b>=" </b><b>save </b><b>" </b><b>type </b><b>=" </b><b>checkbox </b><b>" </b><b>value </b><b>=" </b><b>yes </b><b>"> Запомнить </b> - добавляем флажок и пишем поясняющий текст.</p> <p><b>< </b><b>br </b><b>>< </b><b>input </b> <b>type </b><b>=" </b><b>submit </b><b>" </b><b>name </b><b>=" </b><b>enter </b><b>" </b><b>value </b><b>="Вход"> </b> - создаём кнопку, нажатие которой запускает процесс обработки данных.</p> <p><b></form> </b> - закрываем форму.</p> <p>В браузере веб-форма будет выглядеть, как на рисунке ниже.</p> <p>Её можно заполнять, но чтобы она начала работать, необходимо написать код и сохранить его в файле <b>script.php </b> рядом с HTML-страницей.</p> <p>Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы, например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие <b>HTML формы </b>.</p><p>Собственно, форма состоит из различных элементов ввода: текстовых полей, текстовых областей, радио-кнопок, переключателей, кнопок и так далее.</p><p>И в этой статье Вы научитесь создавать абсолютно любые .</p><p>Сначала создайте простейшую <b>HTML-страницу </b>, в которую добавьте контейнер (тег <b><div> </b>), выравнивающий своё содержимое по центру. Надеюсь, что Вы с этим без труда справитесь.</p><p>А теперь займёмся формой. Форма начинается с тега <b><form> </b>, соответственно, заканчивается закрывающим тегом <b></form> </b>. У этого тега есть несколько атрибутов, которые очень желательно заполнять. Но для начала давайте создадим простейшую форму с атрибутами тега <b><form> </b>, чтобы Вам было понятнее назначение каждого из них:</p><p> <form name = "form1" action = "script/request.php" method = "post"><br></form> </p><p>Здесь у нас начинается описание формы, у которой есть следующие атрибуты:</p><p>1) Атрибут "<b>name </b>". Значение этого атрибута означает имя <b>HTML формы </b>. Встаёт вопрос, зачем это надо? Ответ очень простой: если Вы будете использовать не одну форму, а несколько, то чтобы отличить одну форму от другой, необходимо задавать различные имена. А сами имена нужны для того, чтобы обращаться к формам, например, через <b>JavaScript </b>. Я Вам открою маленький секрет, который я Вам не советую использовать, но честности ради, скажу о нём. На самом-то деле, формы можно легко различать и без имён, поэтому, вообще говоря, имя формы совсем необязательно. Но я <b>НАСТОЯТЕЛЬНО </b> рекомендую давать формам имена, ведь Вам самим так будет проще понять, за что каждая из форм отвечает.</p><p>2) Атрибут "<b>action </b>". Значение этого атрибута отвечает за путь к файлу скрипта, который будет обрабатывать форму. То есть мало ввести данные в форму, их же ведь ещё нужно соответствующим образом обработать, и вот как раз путь к этому <i>файлу-обработчику </i> и находится в значении атрибута "<b>action </b>".</p><p>3) Атрибут "<b>method </b>". У него может быть одно из двух очень популярных значения: "<b>post </b>" и "<b>get </b>". Этот атрибут определяет способ отправки. Не буду вдаваться в подробности, просто скажу, что первый способ является скрытой отправкой данных, а второй открытой. Чтобы стало ещё понятнее, то давайте рассмотрим два адреса перехода:</p><p>а) <b>http://mysite.ru/scipt/request.php </b></p><p>б) <b>http://mysite.ru/script/request.php?a=7&b=Michael </b></p><p>В первом случае, пользователь не видит, что отправляет (метод "<b>post </b>"), а во втором он реально видит имена переменных и их значения (метод "<b>get </b>"). Вы, в конце статьи, можете попытаться отправить форму с помощью двух разных методов и убедиться в их различии. Но пока что скажу, что <b>ГОРАЗДО </b> чаще используют метод "<b>post </b>", то есть скрытую отправку.</p><p>Это было описание самой формы, а теперь же можно заняться добавлением элементов в форму.</p><p>Первое, что мы добавим - это текстовое поле. Добавляется текстовое поле с помощью тега <b><input> </b>, а точнее с помощью атрибута этого тега "<b>type </b>" со значением "<b>text </b>". Также перед созданием текстового поля рекомендуется написать, что это за поле, например, "<i>Ваше имя </i>". Внутри тега <b><form> </b> напишите такую строчку:</p><p>Ваше имя: <input type = "text" name = "firstname" value = "Тут Ваше имя"> </p><p>Опять же, давайте разберём атрибуты:</p><p>1) Атрибут "<b>type </b>" отвечает за тип элемента ввода. В данном случае, мы указали, что это обычное текстовое поле. В следующих элементах мы будем менять значение этого атрибута.</p><p>2) Атрибут "<b>name </b>" отвечает за имя элемента. Здесь мы указали, что имя данного поля <b>firstname </b>.</p><p>3) Атрибут "<b>value </b>" отвечает за значение этого поля по умолчанию.</p><p>Как говорится, лучше один раз увидеть, чем сто раз услышать, поэтому лучше Вы наберите (<b>причём, именно наберите, а не скопируйте! </b>) этот текст в редакторе, а потом посмотрите результат в браузере.</p><p>Теперь создадим ещё одно похожее поле, но только не для ввода обычных символов, а для ввода пароля. То есть должно быть всё то же самое, но только текст должен быть скрыт за <i>звёздочками </i>. Поэтому, перейдя на следующую строку (тег <b><br> </b>), напишем такой код:</p><p>Ваш пароль: <input type = "password" name = "pass" value = "Тут Ваш пароль"> </p><p>Как видите, теперь значением атрибута "<b>type" </b> является "<b>password </b>". Остальные атрибуты те же, что и для обычного текстового поля.</p><p>Следующий элемент - это выпадающий список. Создаётся он чуть посложнее, так как тут необходимо не только объявить создание выпадающего списка, но ещё и добавить элементы в этот список. Напишем, перейдя на следующую строку (далее, упоминать об этом не буду) следующий <b>HTML-код </b>.</p><p>Выберите вариант: <br><select name = "choice"><br> <option value = "1">Вариант 1<br> <option value = "2">Вариант 2<br> <option value = "3">Вариант 3<br></select> </p><p>Тег <b><select> </b> означает начало выпадающего списка. Заканчивается список тегом <b></select> </b>. Атрибут "<b>name </b>" ясен, ибо уже объяснял его несколько раз. Элементы списка создаются с помощью тега <b><option> </b>. Значение атрибута "<b>value </b>" означает, какой значение будет у переменной <b>choice </b> (например, в <b>JavaScript </b>), то есть либо <b>choice = 1 </b>, либо <b>choice = 2 </b>, либо <b>choice = 3 </b>. Сразу после окончания описания тега <b><option> </b> ставится то, что увидит пользователь в выпадающем списке. Опять же, лучше посмотрите в браузере, и Вам всё сразу станет понятно.</p><p>Теперь добавим текстовую область, используя тег <b><textarea> </b>:</p><p>Напишите что-нибудь:<br><br><br><textarea name = "message" rows = "10" cols = "15">Сообщение

Здесь мы с Вами создаём текстовую область высотой в 10 строк (значение атрибута "rows ") и шириной в 15 символов (значение атрибута "cols ").

Внутри этого парного тега указывается текст в текстовой области по умолчанию. Собственно, здесь больше нечего сказать. Двигаемся дальше.

Следующий элемент - это радио-кнопка. Радио-кнопка - это набор таких "кружочков ", из которых можно выбрать только один. Создаются радио-кнопки с помощью HTML-тега , а, точнее, с помощью значения "radio " атрибута "type ". Напишем такой HTML-код :

Выберите что-нибудь одно:
Вариант 1
Вариант 2
Вариант 3

Тут я остановлюсь на атрибуте "name ", потому что помимо задания имени у него есть ещё одна очень важная особенность. Если Вы НЕ сделаете одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов. Чтобы в этом убедиться, поменяйте имена, а потом попытайтесь выбрать сразу несколько вариантов, и Вы сразу убедитесь в моих словах. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута "name ". Атрибут "value " означает значение переменной "choiceradio " (опять же, например, в JavaScript ). Сразу после описания тега идёт текст, который увидит пользователь рядом с соответствующей радио-кнопкой.

Ещё одним элементом формы являются переключатели (checkbox ). Создаются они опять же с помощью тега . Напишем следующие строчки:

Вы согласны с нашими правилами:

Я думаю, что здесь всё прозрачно, поэтому объяснять не буду. Советую лишь просто посмотреть, как это выглядит, в браузере. И скажу, что если флажок будет стоять, то значение переменной "terms " будет "yes ", если не будет стоять, то значение этой переменной будет "", то есть пустой строкой.

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

Выберите файл для загрузки:

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали проблему с кодировкой на сайте . В данной статье я бы хотел рассказать о создании форм в HTML . Мне кажется, что это самая важная тема в HTML. Мне вспоминаются слова моей учительницы по английскому языку. Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML . Если вы знаете формы — вы уже неплохо знаете HTML. Сейчас наверное уже практически и нет сайтов, на которых отсутствуют формы html. Формы используются везде: при создании регистрации, авторизации, подписки, гостевой книги, форума, создании своего движка, да абсолютно везде. Статья наверняка получится большая, так что приготовьтесь. Давайте приступим к изучению формы сразу на примере:

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

Создание формы начинается с ключевого слова