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> <p><b>HTML разметка </b></p><p> <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><p><b>Примечание </b><br> action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.</p> <br><img src='https://i2.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><b>HTML-формы </b> являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.</p> <p>Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.</p> <p>Для получения и обработки данных форм используются языки веб-программирования, такие как <b>PHP </b>, <b>Perl </b>.</p> <p>До появления HTML5 веб-формы представляли собой набор нескольких элементов <input type="text"> , <input type="password"> , завершающихся кнопкой <input type="submit"> . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.</p> <p><b>HTML5-формы </b> решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет <b>CSS3 </b>.</p> <img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/html5_form.png' align="left" height="696" width="660" loading=lazy> Рис. 1. Улучшенные веб-формы с помощью HTML5 <h2>Создание HTML5-формы</h2> <i> </i><h3>1. Элемент <form></h3> <p>Основу любой формы составляет элемент <form>...</form> . Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – <b>поля </b>. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.</p> <table class="t3"> Таблица 1. Атрибуты тега <form> <tr><th>Атрибут </th> <th>Значение / описание </th> </tr><tr><td> accept-charset </td> <td>Значение атрибута представляет собой разделенный пробелами <b>список кодировок символов </b>, которые будут использоваться для отправки формы, например, <form accept-charset="ISO-8859-1"> . </td> </tr><tr><td> action </td> <td><b>Обязательный атрибут </b>, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию.<br> В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение # .<br> Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись:<br> <form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form> </td> </tr><tr><td> autocomplete </td> <td><br><br></td> </tr><tr><td> enctype </td> <td>Используется для указания <b>MIME </b>-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data" . Указывается только в случае method="post" .<br> application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а специальный символ, например, такой как! будет закодирован шестнадцатиричной форме как %21 .<br> multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы.<br> text/plain — указывает на то, что передается обычный (не html) текст. </td> </tr><tr><td> method </td> <td>Задает способ передачи данных формы.<br> Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена и значения переменных присоединяются к адресу сервера после знака? и разделяются между собой знаком & . Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.<br> Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.<br> <form action="action.php" enctype="multipart/form-data" method="post"></form> </td> </tr><tr><td> name </td> <td>Задает <b>имя формы </b>, которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros" . </td> </tr><tr><td> novalidate </td> <td>Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения </td> </tr><tr><td> target </td> <td>Указывает окно, в которое будет направлена информация:<br> _blank — новое окно<br> _self — тот же фрейм<br> _parent — родительский фрейм (если он существует, если нет — то в текущий)<br> _top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм. </td> </tr></table><h3>2. Группировка элементов формы</h3> <p>Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.</p> <p>Каждой группе элементов можно присвоить название с помощью элемента <legend> , который идет сразу за тегом <fieldset> . Название группы проявляется слева в верхней границе <fieldset> . Например, если в элементе <fieldset> хранится контактная информация:</p><p> <form> <fieldset> <legend>Контактная информация</legend> <p><label for="name">Имя <em>*</em></label><input type="text" id="name"></p> <p><label for="email">E-mail</label><input type="email" id="email"></p> </fieldset> <p><input type="submit" value="Отправить"></p> </form> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' align="left" width="100%" loading=lazy> Рис. 2. Группировка элементов формы с помощью <fieldset> </p><table class="t3"> Таблица 2. Атрибуты тега <fieldset> <tr><th>Атрибут </th> <th>Значение / описание </th> </tr><tr><td> disabled </td> <td>Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера <fieldset> , отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — <fieldset disabled> . </td> </tr><tr><td> form </td> <td> <form> в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером. </td> </tr><tr><td> name </td> <td>Определяет <b>имя </b>, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id . </td> </tr></table><h3>3. Создание полей формы</h3> <p>Элемент <input> создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.</p> <p>С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .</p> <table class="t3"> Таблица 3. Атрибуты тега <input> <tr><th>Атрибут </th> <th>Значение / описание </th> </tr><tr><td> accept </td> <td>Определяет тип файла, разрешенных для отправки на сервер. Указывается только для <input type="file"> . Возможные значения:<br> file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif" , accept=".pdf" , accept=".doc" <br> audio/* — разрешает загрузку аудиофайлов<br> video/* — разрешает загрузку видеофайлов<br> image/* — разрешает загрузку изображений<br> media_type — указывает на медиа-тип загружаемых файлов. </td> </tr><tr><td> alt </td> <td>Определяет <b>альтернативный текст </b> для изображений, указывается только для <input type="image"> . </td> </tr><tr><td> autocomplete </td> <td>Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:<br> on — означает, что поле не защищено, и его значение можно сохранять и извлекать,<br> off — отключает автозаполнение для полей форм. </td> </tr><tr><td> autofocus </td> <td>Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения. </td> </tr><tr><td> checked </td> <td>Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" . </td> </tr><tr><td> disabled </td> <td></td> </tr><tr><td> form </td> <td>Значение атрибута должно быть равно атрибуту id элемента <form> в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы. </td> </tr><tr><td> formaction </td> <td>Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы. </td> </tr><tr><td> formenctype </td> <td>Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты:<br> application/-x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ + , специальные символы преобразуются в значения ASCII HEX)<br> multipart/form-data — символы не кодируются<br> text/plain — пробелы заменяются на символ + , а специальные символы не кодируются. </td> </tr><tr><td> formmethod </td> <td>Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты:<br> get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение <br> post — данные формы отправляются в виде http-запроса. </td> </tr><tr><td> formnovalidate </td> <td>Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута. </td> </tr><tr><td> formtarget </td> <td>Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы.<br><br><br> _parent – загружает ответ в родительский фрейм<br> _top – загружает ответ во весь экран<br> framename – загружает ответ во фрейм с указанным именем. </td> </tr><tr><td> height </td> <td>Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например, <input type="image" src="img_submit.gif" height="50"> . Рекомендуется одновременно устанавливать как высоту, так и ширину поля. </td> </tr><tr><td> list </td> <td>Является ссылкой на элемент <datalist> , содержит его id .Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. </td> </tr><tr><td> max </td> <td>Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week . </td> </tr><tr><td> maxlength </td> <td>Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов. </td> </tr><tr><td> min </td> <td>Позволяет ограничить допустимый ввод числовых данных минимальным значением. </td> </tr><tr><td> multiple </td> <td>Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута. </td> </tr><tr><td> name </td> <td>Определяет имя, которое будет использоваться для доступа к элементу <form> , к примеру, в таблицах стилей css. Является аналогом атрибута id . </td> </tr><tr><td> pattern </td> <td>Позволяет определять с помощью <b>регулярного выражения </b> синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="{3}-{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9. </td> </tr><tr><td> placeholder </td> <td>Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка). </td> </tr><tr><td> readonly </td> <td>Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута. </td> </tr><tr><td> required </td> <td>Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута. </td> </tr><tr><td> size </td> <td>Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password . </td> </tr><tr><td> src </td> <td>Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля <input type="image"> . </td> </tr><tr><td> step </td> <td>Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг). </td> </tr><tr><td rowspan="21"> type </td> <td> button — создает кнопку.<br><input type="button" value="Кнопка"></td> </tr><tr><td> checkbox — превращает поле ввода во флажок, который можно установить или очистить, например,<br><input type="checkbox" name="vehicle" value="Автомобиль">У меня есть автомобиль </td> </tr><tr><td> color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.<br><input type="color" name="color"></td> </tr><tr><td> date — позволяет вводить дату в формате дд.мм.гггг.<br> День рождения: <input type="date" name="birthday"></td> </tr><tr><td> datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.<br> День рождения — день и время: <input type="datetime-local" name="birthday"></td> </tr><tr><td> email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.<br> E-mail: <input type="email" name="email"></td> </tr><tr><td> file — позволяет загружать файлы с компьютера пользователя.<br> Выберите файл: <input type="file" name="img"></td> </tr><tr><td> hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию. </td> </tr><tr><td> image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.<br><input type="image" src="https://html5book.ru/wp-content/uploads/2015/04/webbutton.png" alt="Submit"></td> </tr><tr><td> month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.<br><input type="month"></td> </tr><tr><td> number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.<br> Укажите количество (от 1 до 5): <input type="number" name="quantity" min="1" max="5"></td> </tr><tr><td> password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.<br> Введите пароль: <input type="password"></td> </tr><tr><td> radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить.<br> Вегетарианец: <input type="radio"></td> </tr><tr><td> range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора <input type="range" min="1" max="10" value="3"></td> </tr><tr><td> reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.<br><input type="reset"></td> </tr><tr><td> search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.<br> Поиск: <input type="search" name="search"></td> </tr><tr><td> submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.<br><input type="submit" value="Отправить"></td> </tr><tr><td> text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.<br><input type="text"></td> </tr><tr><td> time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.<br> Укажите время: <input type="time"></td> </tr><tr><td> url — поле предназначено для указания URL-адресов.<br> Главная страница: <input type="url" name="homepage"></td> </tr><tr><td> week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.<br> Укажите неделю: <input type="week"></td> </tr><tr><td> value </td> <td>Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file. </td> </tr><tr><td> width </td> <td>Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы. </td> </tr></table><h3>4. Текстовые поля ввода</h3> <p>Элемент <textarea>... используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Кошка

7. Кнопки

Элемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.

Для корректного отображения элемента

разными браузерами нужно указывать атрибут type , например, .

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

8. Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .

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

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

Здравствуйте, уважаемые читатели блога сайт. В продолжение изучения переходим к рассмотрению тегов form и input с их атрибутами (), с помощью которых можно создавать самые разнообразные формы для сайта.

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

Каково же практическое предназначение всего разнообразия возможных форм? Прежде всего, они нужны для отправки вводимых пользователем данных на сервер с целью их дальнейшей обработки посредством специально созданного скрипта (обработчика).

HTML формы — как они создаются с помощью form и input

Как я уже сказал вначале, какая-нибудь вебформа, а то и сразу несколько, обязательно должны присутствовать на любом мало-мальски развитом вебсайте. Чтобы понять, насколько они важны в свете соответствия веб-ресурса современным требованиям, достаточно привести вам навскидку тройку объектов, где используются формы, основанные на тегах form и input, которые по одному названию не оставляют сомнений в своей необходимости проекту той или иной направленности:

Если перейдете, к примеру, по ссылке на статью о создании обратной связи (позволяющей всем юзерам отправлять сообщения администрации сайта), то там как раз представлен код HTML с form, который имеет открывающую () и закрывающую (

Здесь form играет важнейшую роль, так как инициирует установку вебформы. Сам по себе он не выводит некую область на веб-странице, но служит контейнером, содержащим другие тэги.

В нашем случае (см.скриншот выше) в их число входит несколько input (этот ХТМЛ тэг является одиночным, иными словами, не имеет закрывающей составляющей), а также textarea , с разными наборами атрибутов. Каждый из них определяет свой элемент, входящий в форму.

16. Autofocus (параметры отсутствуют) — логический атрибут, который устанавливает фокус в поле сразу при загрузке вебстраницы, в результате чего можно вводить данные без щелчка по нему кнопкой мышки. Не может быть применен только к input type="hidden".

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

18. Form — связывает элемент с формой, когда он располагается вне контейнера

19. Multiple (параметров нет) — устанавливает возможность множественного выбора для пользователя и применяется только совместно с type="file" и type="email".

В случае использования поля для файловой загрузки возможно выбрать сразу несколько файлов с компьютера, задействовав клавиши Ctrl или Shift. Если же выводится поле для ввода адреса электронной почты (type="email"), то вводить эмейлы следует через запятую.

20. Required (значения отсутствуют) — активирует обязательность внесения данных пользователем. Поэтому браузер блокирует отправку вебформы, если обязательное поле остается пустым и выводит соответствующее сообщение о необходимости его заполнения.

Данный атрибут не используется для графических и стандартных кнопок (type="button | image"), а также для скрытого поля ввода (type="hidden").

21. Size — определяет ширину текстового поля в знаках (подходит лишь для элементов type с параметрами "email | password | search | tel | text | url"). Значение по умолчанию 20 символов .

Следующие четыре атрибута (22-25) для тега input несут практически тот же функционал, что и для , но для полноты картины вкратце упомяну и их.

22. Maxlength — налагает лимит на максимальное количество символов, которое можно вводить при заполнении текстового поля. В случае попытки превысить это ограничение последует блокировка дальнейшего ввода. Этот атрибут применим исключительно для текстовых элементов с type="email | password | search | tel | text | url".

23. Minlength — накладывает ограничение на минимальное число символов, требуемых ввести в текстовую область. Если последует попытка отправить данные, содержащие меньшее количество знаков, то появится коротенькое сообщение, в котором указано на необходимость дополнить содержание формы и будет дана информация о количестве уже введенных знаков. Условия использования точно такие же, как и в случае с maxlength.

24. Placeholder — можно поместить подсказку (она и будет служить параметром) прямо в текстовое поле, которая пропадет в тот момент, когда пользователь начнет вводить символы. Только для полей, которые формируются посредством параметров email, password, search, text, tel, url атрибута type тэга input.

25. Readonly (параметры отсутствуют) — указывает на то, что предварительно введенный в поле текст доступен только для чтения и копирования. Обычно применяется вместе со скриптами, где прописываются условия, выполнение которых может активировать этот элемент формы.

И в завершение еще несколько атрибутов, дополняющих функционал различных элементов форм:

26. Pattern — в роли своего значения отражает регулярное выражение, на основании которого задаются правила ввода информации. При этом рекомендуется дополнительно добавить глобальный атрибут title, параметром которого внести разъяснительный текст для помощи юзерам при заполнении полей. Pattern применяется только для элементов email, password, search, text, tel, url. Разберемся на примере. Вот код упрощенной формы регистрации (с ):

Для поля логина (type="text") в качестве значения pattern прописано регулярное выражение {5,}, которое подразумевает использование знаков латинского алфавита, причем введено должно быть не менее пяти символов.

В отношении текстовой области для пароля (type="password") задано значение {8,}, определяющее ввод исключительно латиницы в любом регистре (большие и маленькие буквы), а также цифр, при этом общее количество всех знаков не должно быть меньше восьми.

При нарушении заданных условий ввода браузер не позволит отправить данные и выведет соответствующее предупреждение:

27. Src — определяет путь до изображения (URL, который является его значением) для отображения графической кнопки "image" (см.таблицу параметров input type выше).

28. Step — устанавливает шаг для элементов, предусматривающих выбор числовых значений (input type="date | datetime-local | month | number | range | tel | time | week.").

В качестве параметра может принимать любое целое или дробное число. По умолчанию step="1" . Чтобы установить конечный диапазон ввода, можно опять-таки использовать атрибуты min и max, упомянутые чуть выше. Для наглядности в тестовую форму включим 2 элемента type="number". Для первого выставим step="2", в для второго step="0,1":

29. Value — устанавливает значение элемента формы, которое будет передано обработчику. На сервер посылается пара «имя-параметр», где имя определяется атрибутом name тега input, а параметр — атрибутом value. При этом для различных элементов формы value будет играть разные роли :

• для type="button | reset | submit" — устанавливает текстовую надпись на кнопках;
• для type="checkbox | radio | image" — идентифицирует каждый чекбокс, переключатель или графическую кнопку при отправке и обработке данных на сервере;
• для type="password | text" — сразу при загрузке формы в поле выводит предварительный текст, который может быть изменен или полностью удален пользователем;
• для type="file" (загрузка файлов) не применяется, поскольку не влияет на этот элемент.

Пример использования для каждого из выше перечисленных вариантов:

Здесь значение атрибута value определяет следующие составляющие каждого из элементов: выводит текстовый фрагмент для поля type="text" («Ваше имя»), идентифицирует каждый из переключателей ("1" и "2"), установленных с помощью type="radio", а также активирует надпись на кнопке ("Отправить").

Пример создания красивой HTML формы

Далее попробую представить вам образец вебформы, в состав кода которой вошли не только сочетания input type с разными значениями, образующие стандартные текстовые поля и кнопки, но и, например, которые позволяют инициировать наведение фокуса на элемент не только прямым щелчком мышки, но и кликом по тексту.

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

Back {max-width:350px; margin:50px auto 0; padding:20px; background:#f3ebe1; font-family:"Oswald", sans-serif;} .form-1, .form-2, .form-3, .form-4 {padding:15px; border:4px double #909090} .form-1, .form-2, .form-3 {border-bottom:none} .form-1 input {display:block; margin-bottom:10px; width:100%} .in {padding-left:40px} .in input {width:100%} ..png) no-repeat;background-position:10px 10px} ..png) no-repeat;background-position:10px 10px} .form-4 input {display:block; height:50px; font-size:24px; width:100%; cursor: pointer}

В результате подобная вебформа приобретает вот такие очертания:

Более полная информация по созданию данной конкретной формы на этой странице (к слову, там же вы можете не только проверить функциональность отдельных текстовых областей, введя в них данные, но и поэкспериментировать с вебформой, отредактировав HTML-код или/и свойства CSS, полностью либо частично изменив ее внешний вид).

Моей целью было познакомить вас с алгоритмом использования различных значений атрибута type и тега form для создания разнообразных HTML форм на сайте. Надеюсь, задача выполнена. В любом случае, делитесь своими соображениями по этой многообразной теме в комментариях.

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