Формы элементы html – Формы в html для сайта — теги form, input и их атрибуты | Создание сайтов и заработок в сети

Элементы формы HTML уроки для начинающих академия

В этой главе описаны все элементы HTML-формы.

Элемент <input>

Наиболее важным элементом формы является элемент <input>.

Элемент <input> может отображаться несколькими способами в зависимости от атрибута type.

Пример

<input name=»firstname» type=»text»>

Если атрибут type опущен, поле ввода получает тип по умолчанию: «Text».

Все различные типы входных данных рассматриваются в следующей главе.

Элемент <select>

<select>элемент определяет раскрывающийся список:

Пример

<select name=»cars»>
  <option value=»volvo»>Volvo</option>
  <option value=»saab»>Saab</option>
  <option value=»fiat»>Fiat</option>
  <option value=»audi»>Audi</option>
</select>

Элементы <option> определяют параметр, который может быть выбран.

По умолчанию выбирается первый элемент в раскрывающемся списке.

Чтобы определить предварительно выбранный параметр, добавьте атрибут selected к параметру:

Пример

<option value=»fiat» selected>Fiat</option>

Видимые значения:

Используйте атрибут size для указания количества видимых значений:

Пример

<select name=»cars» size=»3″>
  <option value=»volvo»>Volvo</option>
  <option value=»saab»>Saab</option>
  <option value=»fiat»>Fiat</option>
  <option value=»audi»>Audi</option>
</select>

Разрешить множественный выбор:

Используйте атрибут multiple, чтобы позволить пользователю выбрать более одного значения:

Пример

<select name=»cars» size=»4″ multiple>
  <option value=»volvo»>Volvo</option>
  <option value=»saab»>Saab</option>

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

Глава описывает все элементы форм HTML.

Элемент <input>

Самым важным элементом формы является элемент <input>.

Элемент <input> может быть отображен несколькими способами, в зависимости от атрибута type.

Все различные типы входных данных описаны в следующей главе.

Элемент <select>

Элемент <select> определяет раскрывающийся список:

Пример

<select name=»автомобили»>
 <option value=»Вольво»>Вольво</option>
 <option value=»Сааб»>Сааб</option>
 <option value=»Фиат»>Фиат</option>
 <option value=»Ауди»>Ауди</option>
</select>

Элемент <option> определяет параметр, который может быть выбран.

По умолчанию, первый элемент в раскрывающемся списке выбран.

Чтобы определить выбранный вариант, нужно добавить атрибут selected с параметром:

Элемент <textarea>

Элемент <textarea> определяет многострочное поле для ввода (область текста):

Атрибут rows задает количество видимых строк в области текста.

Атрибут cols атрибут указывает видимая ширина текстовой области.

Вот как код HTML будет отображаться в браузере:

Элемент <button>

Элемент <button> определяет кликабельная кнопка:

Вот как код HTML будет отображаться в браузере:

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

В HTML5 добавлены следующие элементы формы:

• <datalist>
• <keygen>
• <output>

Примечание: Браузеры не отображают неизвестные элементы. Новые элементы, которые не поддерживаются в старых браузерах не будет «уничтожены » веб-странице.

Элемент <datalist> HTML5

Элемент <datalist> задает список предопределенного варианта элемент <input>.

Пользователи будут видеть раскрывающийся список из предварительно заданных вариантов исходных данных.

Атрибут list в элементе <input>, необходимо обратиться к атрибуту id в элементе <datalist>.

Элемент <keygen> HTML5

Цель элемента <keygen> обеспечить безопасный способ для проверки подлинности пользователей.

Элемент <keygen> задает два ключа генератора поля в форме.

Когда форма отправлена, генерируются два ключа, один открытый и другой закрытый.

Закрытый ключ хранится локально, а открытый ключ отправляется на сервер.

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

Элемент <output> HTML5

Элемент <output> представляет результат расчета (как выполняемый скрипт).

Проверьте себя с помощью упражнений!

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

= новый HTML5.

Пример формы HTML, элементы формы

Что такое форма

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

Так как формы связаны с работой сервера, при изучении этой темы некоторые вещи могут быть пока непонятны. Но изучить формы всё равно нужно. Во перывх, потому что отдельные элементы формы могут существовать и без отправки на сервер. А данные в них могут быть использованы при работе различных скриптов. Во вторых, если Вы будете дальше развиваться в области создания сайтов, то Вам нужно будет знать, по крайней мере, один серверный язык, например PHP. И когда Вы будете его изучать, Вам нужно будет знать HTML, чтобы не отвлекаться на это.

Создание формы

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

Рассмотрим несколько важных атрибутов тэга <form>. Форме можно задать имя. Это делается с помощью атрибута name. Имя формы должно быть уникальным. Оно используется для нахождения формы при работе скриптов.

Атрибут action указывает файл, который запускается на сервере и получает данные из формы. Значением атрибута является путь к файлу.

Атрибут method устанавливает метод запроса. Может принимать значения:

method=»get»

method=»post»

Пример HTML формы:

+

<form action="myfile.php" method="post">

</form>

Внутри тэга <form> размещаются элементы формы. Элементы формы — это различные поля для ввода, кнопки и другие способы, с помощью которых пользователь вводит информацию. Для создания элементов формы используются разные тэги. Рассмотрим их подробно.

Тэг <input>

Тэг <input> может выглядеть на странице по-разному в зависимости от типа. В том числе он может создавать разные поля для ввода. Типов тэга <input> достаточно много, поэтому он рассматривается в отдельной теме. А пока мы для примера создадим его на странице. Добавим его внутрь тэга <form>.

<form action="myfile.php" method="post">
<input name="login">
</form>

Атрибут name очень важен. Имя элемента формы передаётся на сервер вместе со значением. Данные отправляются на сервер в следующем виде:

имя = значение

Если в приведённом примере пользователь введёт в поле для ввода — Andrey, то на сервер будут отправлены данные в виде:

login=Andrey

Если элементу формы не задать имя, то данные из этого элемента на сервер отправлены не будут.

Тэг <textarea>

Тэг <textarea> создаёт многострочное поле для ввода текста. От тэга <input> он отличается тем, что имеет размер в несколько строк. Если вводимый текст не помещается в поле, то у него появляется полоса прокрутки. В некоторых браузерах полоса прокрутки есть сразу. С помощью CSS появление прокрутки можно изменить. Добавим <textarea> в форму:

<textarea name="inform"></textarea>

Атрибут name имеет тот же смысл, что и у тэга <input>.

Полю для ввода можно задать размеры. Для этого есть атрибут cols, который устанавливает ширину поля в символах и атрибут rows, который устанавливает высоту поля в строках. Вместо этого можно использовать CSS. Как и любому блоку, тэгу <textarea> можно задать ширину и высоту.

Установим тэгу <textarea> размеры. Он будет выглядеть так:

<textarea name="inform" cols="30" rows="10"></textarea>

Тэг <textarea> является парным. Внутрь него можно пометсить текст, который сразу будет находится в поле для ввода. Пользователь при желании может его удалить.

Пример:

<textarea name="inform" cols="30" rows="10">Текст</textarea>

У тэга <textarea> есть и другие атрибуты, которые используются не часто. Их Вы можете найти в справочниках.

Тэг <select>

Тэг <select> создаёт список, в котором пользователь выбирает один из пунктов. Каждый пункт создаётся с помощью тэга <option>. Пример:

<select name="punkt">
  <option value="p1">Первый пункт</option>
  <option value="p2">Второй пункт</option>
</select>

У тега <select> есть атрибут name, который используется так же, как у других элементов формы. Имя элемента отправляется в виде данных на сервер. А значение берётся из атрибута value того пункта, который выбрал пользователь. Если в приведённом примере пользователь выберет первый пункт, то на сервер отправятся данные в таком виде:

punkt=p1

Если у какого-то пункта списка есть атрибут selected, то этот пункт является выбранным по умолчанию. Никакого значения этому атрибуту устанавливать не нужно, его просто нужно указать в тэге.

Если высота списка не указана, то список имеет высоту в одну строку. Высота меняется с помощью атрибута size. При этом внешний вид списка зависит от его высоты. Если список имеет высоту в одну строку, то он имеет вид раскрывающегося списка. Если высота больше одной строки, то список отображается в виде блока. Ширина списка соответствует ширине самого большого пункта. Её также можно изменить с помощью CSS.

Изменим высоту списка. Посмотрите, как при этом изменится его внешний вид.

<select name="punkt" size="2">

Другие атрибуты тэгов <select> и <option> Вы можете найти в справочниках.

Тэг <label>

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

<label>Login:</label><input name="login">

Но в таком виде это просто текстовый тэг. Основная функция тэга <label> состоит в том, чтобы связывать пояснение с элементом формы. В этом случае нажатие на текст пояснения соответствует нажатию на элемент формы. Это используется тогда, когда элемент формы имеет маленький размер и нажимать на него неудобно. Чтобы связать элемент формы с текстом, его нужно поместить внутрь тэга <label>. Изменим 9 строку так, чтобы тэг <input> был связан с пояснением:

<label>Login:<input name="login"></label>

Нажмите на странице на слово «Login», поле для ввода окажется в фокусе.

Отправка формы

Чтобы отправить данные на сервер, пользователь должен нажать на кнопку с типом submit. Для её создания можно добавить в форму тэг <input> и установить ему тип submit.

Добавим в форму кнопку отправки данных на сервер:

<input type="submit" value="Отправить">

Атрибут value содержит текст, который отображается на кнопке.

При нажатии на кнопку, на сервере запускается файл, который указан в атрибуте action тэга <form>. Этот файл получает данные из формы.

Автофокус

Любому элементу формы можно установить атрибут autofocus. Ему не нужно указывать значение, он просто указывается в тэге. Элемент, которому установлен этот атрибут, оказывается в фокусе после загрузки страницы. Атрибут работает не во всех браузерах.

HTML5 формы: новые элементы

От автора: мы изучили новые значения атрибута type тега input и парочку валидных для большинства элементов атрибутов. Однако HTML5 формам еще есть чем удивить! В HTML5 спецификации появилось 5 новых элементов: datalist, output, keygen, progress и meter. В предыдущей статье мы уже изучили datalist. Также мы показали вам progress и meter в последней главе, их часто используют вне форм. Давайте суммируем все и рассмотрим два оставшихся элемента.

Элементы progress и meter

Progress и meter – два самых известных HTML5 элемента.

Тег meter отображает рисунок, на котором общее значение представлено в диапазоне. Необходимо указать минимум min и максимум max, а также промежуточное значение value. Многие думают, что этот элемент формы с атрибутами похож на некоторые инпуты числового типа, однако в нем нет атрибута name, и он не отправляется на сервер.

По умолчанию meter задает минимум в 0 или приравнивает его к value, зависит от того, что меньше. Максимальное значение по умолчанию равно 1 или value, зависит от того, что больше. Используйте meter, когда есть минимальное, максимальное и оптимальные значения, а само значение может увеличиваться и уменьшаться. Например, оценка за тест, уровень в бензобаке или кровяное давление. Если указать эти три атрибута, то в браузерах с поддержкой meter (в том числе Android 4.4+, но не iOS7 и IE11) отобразится зеленая полоска.

С помощью meter и значений low, high и optimum можно показывать, когда значение находится в нужном диапазоне. Если value находится в промежутке между min и low, метр будет желтым. Если между low и high, полоска будет зеленая. Если value в промежутке high и max, полоса будет красной. На данный момент значение optimum не имеет визуального эффекта.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Тег meter нельзя использовать для индикации прогресса. Для этого есть тег progress, с помощью которого можно выразить прогресс в процентах.

Атрибуты прогресса, в том числе max и value, всегда будут находиться между 0% и 100%. Браузер вычисляет процентное значение от максимума и подстраивает длину прогресс бара. Прогресс бар при заполнении меняет цвет с серого на синий, где полностью серый равен 0%, а полностью синий – 100%.

Если не задан value, прогресс бар будет не определен. Chrome, Opera, Safari и Firefox отображают неопределенные прогресс бары в виде анимированных полосок, IE стилизует их под анимированные точки.

В отличие от meter тег progress движется только в направлении 100% от значения max. По умолчанию прогресс бары имеют вид inline-block, т.е. им можно задать width и height. Высота стилизованного прогресс бара не изменится (в отличие от meter), но под ним добавится отступ.

Элемент output

Задача output – принимать и отображать результат вычислений. Тег output необходимо задействовать в тех случаях, когда пользователь может видеть значение, но не может напрямую манипулировать им, а также когда значение можно изменять из другого поля формы. Пример – расчет общей стоимости товара с доставкой и сборами в корзине.

Значение output хранится между открывающим и закрывающим тегом. Обновлять значение можно с помощью JS. У output есть атрибут for, который используется для отсылки к полям формы по ID, чьи значения используются для вычисления output.

Атрибуты name и value тега output передаются вместе с формой.

Тег keygen используется для создания пары из открытого и закрытого ключа, а также для передачи открытого ключа из пары. Opera, Chrome, Safari, Android и Firefox полностью поддерживают этот элемент и отображают его в виде выпадающего списка, где можно выбрать длину ключей. Хотя во всех браузерах разные опции. В iOS7 и IE11 поддержки до сих пор нет.

Тег keygen представил также два новых атрибута: challenge, который задает строку для передачи с открытым ключом, а также keytype, задающий тип ключа. На момент написания статьи keytype поддерживает только значение rsa, распространенный алгоритм криптографического шифрования с открытым ключом.

Атрибут contenteditable

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Однако эту проблему можно обойти. Любой элемент в HTML5 можно сделать редактируемым с помощью атрибута contenteditable. Записывается он либо просто contenteditable, либо contenteditable=»true», после чего элемент становится редактируемым. Этот атрибут будет вам часто встречаться на div’ах. Можно даже добавить тег style с «display:block» и менять CSS на лету. Любой не нативный элемент по умолчанию не посылается на сервер вместе с остальной формой, но отредактированные данные можно посылать на сервер асинхронно или по нажатию кнопки с помощью JS.

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

Просто добавьте к любому элементу атрибут contenteditable, и он станет редактируемым во всех браузерах. Все дочерние элементы также становятся редактируемыми, если явно не задать им contenteditable=»false». Атрибут обновляет DOM, но для явного сохранения измененных данных нужно использовать JS.

Изменения в существующих элементах форм

В HTML5 в элементы формы было внесено несколько изменений.

Элемент form

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

Во-первых, мы уже знаем, что HTML5 предлагает множество способов встроенной валидации полей форм. Например, для определенных полей типа email и url, а также есть атрибуты required и pattern. У вас может возникнуть желание использовать эти атрибуты и типы для стилизации или семантики, и чтобы поля отправлялись без проверки. Новый Булев атрибут novalidate позволяет отправлять поля без встроенной проверки.

Во-вторых, больше можно не указывать атрибут action на форме. Больше не нужно явно прописывать UTR для отправки формы. Если не указать action, форма отправится на текущую страницу. Прописать или изменить URL можно в атрибуте formaction, который указывается на поле типа button, которое и отправляет форму.

И наконец, уже знакомый нам атрибут autocomplete можно добавить напрямую в form. Тогда он применится ко всем полям. У полей может быть свой autocomplete , тогда он перепишет значение.

Элемент optgroup

В HTML5 один optgroup можно вставлять в другой, что удобно использовать для создания многоуровневых меню select.

Элемент textarea

В HTML4 размеры textarea необходимо было задавать через rows и cols атрибуты. В HTML5 эти атрибуты больше не нужны. Ширину и высоту текстовой области теперь нужно задавать через CSS.

В HTML5 появился атрибут wrap. Атрибут применяется к textarea и принимает значения soft (по умолчанию) и hard. Со значением soft текст передается без разрывов строк, сохраняются только разрывы, которые пользователь поставил сам. Со значением hard текст передается со всеми разрывами строк, которые могут появиться из-за размера поля. Если wrap задан в hard, необходимо указать атрибут cols.

Заключение

К сожалению, мы не смогли охватить весь материал, остальное есть в книге. Тем не менее, это было довольно подробное введение. По мере развития HTML5 элементов и атрибутов сайтам все меньше будет требоваться JS для клиентских проверок и украшения интерфейса. Браузеры будут обрабатывать основную работу. Старые юзер агенты в обозримом будущем никуда не денутся, но это не причина топтаться на месте и не использовать HTML5 веб-формы. Для заполнения пропусков с поддержкой можно использовать полифилы и фолбэки.

В следующей главе мы продолжим работать над сайтом The HTML5 Herald и добавим самые крутые нововведения в HTML5 – нативное видео и аудио.

Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

HTML5 | Новые элементы форм

Веб-программирование — HTML5 — Новые элементы форм

На данном этапе мы узнали, как усовершенствовать формы с помощью новых возможностей HTML5 — проверки и дополнительных типов данных полей ввода. Это наиболее важные новые возможности с наивысшим уровнем поддержки в браузерах, но HTML5 не останавливается на этом.

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

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

Подсказки ввода <datalist>

Элемент <datalist> предоставляет способ присоединить выпадающий список возможных вариантов ввода к обыкновенному текстовому полю. Заполняющим форму пользователям он дает возможность либо выбрать вариант ввода из списка значений, либо ввести требуемое значение вручную:

Чтобы использовать элемент datalist, сначала нужно создать обычное текстовое поле. Допустим, мы создали обычный элемент <input>:

<fieldset>
     <legend>Выберите любимый фрукт</legend>
     <label for="fruit">Фрукт</label>
     <input>
</fieldset>

Чтобы добавить к этому полю выпадающий список возможных значений, для него нужно создать элемент <datalist>. Технически этот элемент можно разместить в любом месте разметки, т.к. он не отображается браузером, а просто предоставляет данные для использования в текстовом поле ввода. Но логично поместить этот элемент либо непосредственно перед тем элементом <input>, для которого он предоставляет свои данные, либо сразу же после него. Далее показан пример кода для создания списка <datalist>:

<datalist>
        <option label="Яблоко" value="apple">
        <option label="Ананас" value="ananas">
        <option label="Абрикос" value="apricot">
        <option label="Арбуз" value="watermelon">
        <option label="Авокадо" value="avocado">
        <option label="Апельсин" value="Orange">
</datalist>

Как и традиционное поле <select>, список <datalist> использует элементы <option>. Каждый элемент <option> представляет собой отдельное возможное значение, которое браузер может предложить заполняющему форму. Значение атрибута label содержит текст, который отображается в текстовом поле, а атрибут value — текст, который будет отправлен на сервер, если пользователь выберет данную опцию.

Сам по себе список <datalist> не отображается в браузере. Для того чтобы подключить его к текстовому полю, нужно установить значение атрибута list равным значению параметра id соответствующего списка <datalist>:

<input list="dl_fruits">

В браузерах, которые поддерживают <datalist> (а в настоящее время это только Opera 10 и Firefox 4 или более поздние версии), посетители увидят результат, как на рисунке выше. Другие браузеры будут игнорировать атрибут list и разметку <datalist>, делая все предложения возможного ввода бесполезными.

Но эту проблему можно исправить с помощью хитрого резервного решения, которое заставляет старые браузеры вести себя как следует. Трюк заключается в том, чтобы вставить другое содержимое в список <datalist>. Этот подход работает потому, что браузеры, которые поддерживают элемент <datalist>, обращают внимание только на элементы <option> и игнорируют все другое содержимое.

В следующем листинге приводится разметка, в которой используется это поведение:

<fieldset>
     <legend>Выберите любимый фрукт</legend>
     <datalist>
        <span>Выберите из списка:</span>
        <select>
           <option label="Яблоко" value="apple">
           <option label="Ананас" value="ananas">
           <option label="Абрикос" value="apricot">
           <option label="Арбуз" value="watermelon">
           <option label="Авокадо" value="avocado">
           <option label="Апельсин" value="Orange">
        </select>
        <br>
        <span>Или введите вручную:</span>
     </datalist>
     
     <input list="dl_fruits">
</fieldset>

.Label {
   display: inline-block;
   width: 125px;
}

Браузеры, которые распознают элемент <datalist>, будут отображать только одно текстовое поле и выпадающий список предлагаемых вариантов ввода. Но для других браузеров этот дополнительный код облекает предлагаемые варианты ввода в традиционный список <select>, предоставляя пользователю возможность ввести собственное значение или же выбрать готовое значение из списка: