Input form html: Атрибут form | htmlbook.ru

Leave a Comment / Html / By /

Содержание

Атрибут action | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

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

Синтаксис

<form action="URL">...</form>

Значения

В качестве значения принимается полный или относительный путь к серверному файлу (URL).

Обязательный атрибут

В HTML4 и XHTML обязателен, в HTML5 не обязателен.

Значение по умолчанию

Нет.

Пример 1

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут action</title>
 </head>
 <body>

 <form action="handler.php">
  <p>...</p>
 </form> 

 </body>
</html>

В качестве обработчика можно указать адрес электронной почты, начиная его с ключевого слова mailto:. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype=»text/plain» в теге <form>.

Пример 2

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www. w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FORM, атрибут action</title>
 </head>
 <body>

 <form action="mailto:[email protected]" enctype="text/plain">
  <p><input type="submit" value="Написать письмо"></p>
 </form> 

 </body>
</html>

Атрибут enctype | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Определяет способ кодирования данных формы при их отправке на сервер. Обычно устанавливать значение атрибута enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (input type=»file»), следует определить атрибут enctype как multipart/form-data.

Синтаксис

<form enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain">
...
</form>

Значения

application/x-www-form-urlencoded
Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%90%D0%BD%D1%8F вместо Аня).
multipart/form-data
Данные не кодируются. Это значение применяется при отправке файлов.
text/plain
Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Обязательный атрибут

Нет.

Значение по умолчанию

application/x-www-form-urlencoded

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM, атрибут enctype</title>
 </head>
 <body>  
  <form action="handler.
 
 php"
   enctype="multipart/form-data" method="post">
   <p>Загрузите файл с картинкой</p>
   <p><input type="file" name="pic"></p>
  </form>
 </body>
</html>

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

Рис. 1. Поле для отправки файла

Как сделать форму HTML, используя и ?



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

<form>
 <label></label>
 <input>
</form>

но он также упомянул что — то об использовании <span></span> , и я думаю, что именно в этот момент я немного запутался, потому что где я должен его использовать-то есть должен ли я поместить

<label> и <input> между <span></span> ?

Вот несколько причин, по которым я спрашиваю::

  1. Я не считаю себя очень сообразительным, когда дело доходит до HTML
  2. Я бы просто использовал <div></div> , чтобы обернуть вокруг <label> и <input> , а затем использовать css, чтобы поместить его туда, где я хочу, чтобы он появился на веб-странице.

Что касается формы, которую я хочу создать, то я хочу, чтобы она выглядела так:

[Firstname] [lastname]
[textfield] [textfield]
[Street]    [zip-code]  [city]
[textfield] [textfield] [textfield]
[E-mail]    [Phone]
[textfield] [textfield]
[message]
[textarea]

Я надеюсь, что макет моей формы имеет смысл для большинства из вас !

forms input label html
Поделиться Источник NeoFox1972     27 сентября 2013 в 22:46

3 ответа

  • Как сделать <span> такой же высоты, как <input type=»text»>

    Я пытаюсь поместить элемент слева от элемента, однако не могу сделать их одинаковой высоты и выровнять друг с другом. Пролет всегда кажется расположенным немного выше. У кого-нибудь есть идеи? Sparkles* Редактировать: раздел HTML <label for=name>Username: </label> <input type=text. ..

  • переключатель simple_form (нужно добавить тег <span> внутри <label>

    Что является лучшим способом, чтобы создать следующие HTML используя simple_form_for gem? <label> <input name=form-field-radio type=radio /> **<span class=lbl> radio option 2</span>** </label> Обратите внимание, что по умолчанию, когда я создаю переключатели с помощью…


2

Попробуйте что-нибудь вроде этого:

<form action="action.php">
  <label for="firstName">First Name</label>
  <input type="text" name="fname"><br>

  <label for="lastName">First Name</label>
  <input type="text" name="lname"><br>
  ....
</form>

и чтобы выстроить все это, вы могли бы использовать некоторые css, как это:

label{
      width: 100px;
      text-align:left;
}

Поделиться lmno     27 сентября 2013 в 22:53


0

Хотя технически вы можете использовать SPAN. . поскольку это встроенный элемент, а также LABEL и INPUT, он не совсем хорошо сидит. Встроенные элементы на самом деле не предназначены для контейнеров, поэтому использование элемента уровня блока, такого как DIV, было бы лучшим способом его структурирования.

Помимо этого, чтобы выстроить его в линию, вы переходите в рельсы CSS, чтобы плавали ваши элементы.

Так что-то в одиночку линии:

<form action="">
    <fieldset>
        <div>
            <label for="FirstName">First Name</label>
            <input type="text" name="FirstName">
        </div>
        <div>
            <label for="LastName">Last Name</label>
            <input type="text" name="LastName">
        </div>
    </fieldset>
</form>

<style type="text/css">

fieldset {
    width:500px;
    overflow:hidden;
}

fieldset .left {
    float:left;
    width:50%;
}
fieldset .right {
    float:right;
    width:50%;
}
fieldset label {
    display:block;
}
fieldset block {
    display:block;
}
</style>

Поделиться Ricky S     27 сентября 2013 в 22:58


0

Ваш учитель, вероятно, имеет в виду, что вы должны обернуть каждую пару input и label в span . Вы совершенно правы, думая, что там следует использовать div вместо span . Просто скажите своему учителю, чтобы он посмотрел на страницу, когда таблицы стилей отключены. На аналогичных основаниях вы должны доказать ей/ему, что он совершенно не прав, говоря, что a

table не следует использовать.

Чтобы выполнить упражнение по написанию формы (которая по сути является табличными данными) без использования table markup, просто используйте свой подход div и используйте функции табличного макета CSS: установите display: table на form , display: table-row на div элементах и display: table-cell на input и label элементах. При необходимости добавьте отступы и выравнивание по горизонтали. Не забудьте сообщить своему учителю, что это будет работать только в достаточно современных браузерах, в то время как логический подход использования HTML table работает во всех браузерах.

Поделиться

Jukka K. Korpela     28 сентября 2013 в 05:16

Похожие вопросы:


Создайте форму HTML и таблицу, используя код JavaScript.

Я попытался сделать форму и таблицу, используя код JavaScript на странице HTML. Но код был написан не совсем правильно. Поэтому мне нужно сделать форму и таблицу в JavaScript образом. И HTML код…


Как отформатировать эту форму, используя только CSS

Учитывая следующий фрагмент HTML: <form> <p> <label for=id_name>Name:</label> <input id=id_name maxlength=40 name=name type=text> </p> <p> <label…


Вложенность HTML <span> внутри тега rails form_for label?

Я хочу вложить элемент в тег form_for label. Я хочу сделать это так, чтобы я мог нацелиться на определенную часть метки с помощью правил CSS, в данном случае, чтобы сделать текст красным.

Из…


Как сделать <span> такой же высоты, как <input type=»text»>

Я пытаюсь поместить элемент слева от элемента, однако не могу сделать их одинаковой высоты и выровнять друг с другом. Пролет всегда кажется расположенным немного выше. У кого-нибудь есть идеи?…


переключатель simple_form (нужно добавить тег <span> внутри <label>

Что является лучшим способом, чтобы создать следующие HTML используя simple_form_for gem? <label> <input name=form-field-radio type=radio /> **<span class=lbl> radio option…


Сделать элемент span отправить форму редактирования

У меня есть красивая, загрузочная форма, которая выглядит так (в rails & HTML) <%= form_for(current_user) do |f| %> <div class=input-group input-group-lg> <%= f.text_field…


Как переадресовать входные данные формы html в форму входа Drupal 7?

Я создал форму в html следующим образом: <form class=login active> <h4>Login</h4> <div> <label>Username:</label> <input type=text name=username/>. ..


jQuery измените <span> на <label> и добавьте for=»» с предыдущим идентификатором <input>

У меня есть несколько jQuery, чтобы превратить выбранные промежутки в метки. Проблема, которая у меня сейчас есть, заключается в том, что мне нужно добавить for=, чтобы он работал как кнопка (Я…


Bootstrap3 HTML set <label> length in a input-group

Я хотел бы сделать так, чтобы все этикетки имели тот же размер, что и img ниже: Это фрагмент HTML: <div class=form-inline> <div class=col-xs-3 col-sm-3 input-group> <span…


Использовать aria-label, чтобы сделать форму доступной?

Я искал какое-то решение, чтобы сделать форму < /> доступной, и я нашел следующее: Элемент <label> указывает, какое поле формы он помечает, ссылаясь на его значение атрибута id: <label…

Создание HTML-форм и присоединение поведений JavaScript к объектам форм

а. Чтобы выбрать форму, щелкните контур формы в окне документа.

б. В поле «Имя формы» введите уникальное имя, по которому можно будет идентифицировать форму.

Присвоив форме имя, вы сможете ссылаться на нее или контролировать ее, используя язык сценариев, например JavaScript или VBScript. Если не присвоить форме имя, Dreamweaver автоматически генерирует имя, используя синтаксис formn, увеличивая значение n для каждой добавляемой на страницу формы.

в. В поле «Действие» укажите страницу или сценарий, в котором будут обрабатываться данные формы, указав путь или щелкнув значок папки, чтобы перейти на нужную страницу или в нужный сценарий. Пример: processorder.php.

г. Во всплывающем меню «Метод» укажите метод передачи данных формы на сервер.

Задайте любой из следующих параметров.

По умолчанию — для отправки данных формы на сервер будет использована настройка браузера по умолчанию. Как правило, значение по умолчанию — метод GET.

GET — добавляет значение в URL-адрес, запрашивающий страницу.

POST — вставляет данные формы в HTTP-запрос.

Не используйте метод GET для отправки длинных форм. Длина URL-адреса ограничена 8192 символами. Если объем отправленных данных слишком велик, данные будут обрезаны, что приведет к неожиданным результатам или сбою обработки.

Динамические страницы, созданные параметрами, которые передаются методом GET, можно пометить закладками, потому что все значения, необходимые для повторного создания страницы, содержатся в URL-адресе, отображаемом в поле «Адрес» браузера. А динамические страницы, созданные параметрами, которые передаются методом POST, пометить закладкой невозможно.

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

 

д. Во всплывающем меню «Тип шифрования» укажите MIME-тип кодировки данных, которые отправляются на сервер для обработки (необязательно).

Параметр по умолчанию application/x-www-form-urlencode обычно используется вместе с методом POST. При создании поля для загрузки файла укажите тип MIME multipart/form-data.

 

е. Во всплывающем меню «Назначение» укажите окно, в котором нужно отображать данные, которые возвращаются вызываемой программой (необязательно).

Если названное окно не открыто, открывается новое окно с этим именем. Задайте любое из следующих значений целевого объекта.

_blank — открывает целевой документ в новом неименованном окне.

_parent — открывает целевой документ в родительском окне окна, в котором отображается текущий документ.

_self — открывает целевой документ в том же окне, где была отправлена форма.

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

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

Большинство элементов добавляется в форму с помощью элемента <input>. Назначение и внешний вид элемента <input> меняются в зависимости от значения атрибута type.

Элемент <textarea> (текстовая область)

Для создания больших текстовых полей применяется элемент <textarea>, который в отличие от других элементов формы не является пустым, а следовательно, для него должны быть указаны открывающий и закрывающий теги. Текст, вводимый по умолчанию, находится между открывающим и закрывающим тегами. Размеры поля устанавливаются с помощью атрибутов cols и rows.
cols — число столбцов видимого текста:

<textarea name="pole" cols="20">

rows — число строк видимого текста:

<textarea name="pole" cols="20" rows="15">

При этом, если пользователю потребуется ввести в текстовую область больше строк текста, чем указано с помощью атрибута rows, в текстовой области появится вертикальная прокрутка.
При разработке форм для новых проектов используйте правила CSS для установки ширины и высоты текстовой области <textarea>. Однако при просмотре исходного кода сайтов вы еще часто можете встретить атрибуты cols и rows.
При необходимости можно запретить пользователю изменять текст в текстовом поле, например, если поле используется для представления какого-нибудь договора. Такой запрет вводится с помощью атрибута readonly.
В следующем примере представлен вариант создания больших текстовых полей. Первое поле предназначено только для чтения, а во второе поле можно ввести текст:

Пример: Текстовая область (textarea)

Ознакомтесь с соглашеием:
Условия нашего соглашения…

Ваше мнение о этом соглашении:
Введите свой комментарий…

<form action="" method="POST">
<p>Ознакомьтесь с соглашеием:</p> 
  <textarea cols="24" rows="3" name="about" readonly>
  Условия нашего соглашения…</textarea><br/>
<p>Ваше мнение о этом соглашении:</p>
  <textarea name="comments" cols="24" rows="4">
  Введите свой комментарий…</textarea>
</form>

Раскрывающийся список (select)

Элемент <select> создает на веб-странице раскрывающийся список (также называемый раскрывающимся или выпадающим меню), позволяющий выбрать одно значение из множества возможных.
Как и в рассмотренных других элементах формы, элементу <select> назначается уникальное имя, с помощью атрибута name. Элемент <select> работает в паре с элементом <option>, создающим меню. Элемент <option> задается для каждого пункта меню. Текст, расположенный между тегами <option> и </option>, будет выведен в окне браузера как пункт раскрывающегося списка.
Атрибут value используется в каждом элементе <option> для установки значения, которое будет отправлено на сервер вместе с именем выбранного элемента. Указав для элемента <option> атрибут selected, вы сделаете его значением по умолчанию для данного списка. При загрузке страницы такие элементы будут выделены. Если атрибут selected не установлен, то при загрузке страницы будет отображен первый вариант ответа из созданного списка. Если пользователь не выберет другой пункт списка, то на сервер будет отправлен пункт, отмеченный атрибутом selected по умолчанию:

Пример: Раскрывающийся список (select)

Выберите вариант

ПервыйВторойТретийЧетвертыйПятый
<form action="" method="POST">
<p>Выберите вариант</p>
  <select name="form_select">
    <option value="Значение 1">Первый</option>
    <option value="Значение 2">Второй</option>
    <option  selected="selected" value="Значение 3">Третий</option>
    <option value="Значение 4">Четвертый</option>
    <option value="Значение 5">Пятый</option>
  </select>
</form>

Прокручиваемые списки

По умолчанию с помощью тега <select> создается раскрывающийся список, в котором изначально видно только одно значение. Для создания прокручиваемого списка укажите число видимых строк, введя соответствующее значение атрибута size. Если количество элементов списка превышает значение, указанное в атрибуте size, справа появляется полоса прокрутки. Несмотря на то, что атрибут size позволяет отобразить сразу несколько пунктов списка, посетитель может выбрать из списка по-прежнему только один пункт.
Чтобы посетитель мог выбрать из списка одновременно несколько элементов (с помощью клавиши Shift или Ctrl), нужно использовать атрибут multiple. Как и в случае с раскрывающимся списком, указав в элементе <option> атрибут selected, вы сделаете его значением по умолчанию. Если для тега <select> или для <option> установить уже известный вам атрибут disabled, то в первом случае становится отключенным весь список, а во втором — только отдельный пункт списка.
Пример прокручиваемого списка, в котором выбраны сразу несколько элементов:

Пример: Прокручиваемый список

<p>Выберите вариант</p>
  <select name="form_select" size="5" multiple="multiple">
    <option value="Значение 1">Первый вариант</option>
    <option value="Значение 2">Второй вариант</option>
    <option selected="selected" value="Значение 3">Третий вариант</option>
    <option selected="selected"value="Значение 4">Четвертый вариант</option>
    <option value="Значение 5">Пятый вариант</option>
    <option value="Значение 6">Шестой вариант</option>
  </select>

Группировка пунктов списка (optgroup)

Если в списке находится большое количество пунктов, то посетителю довольно сложно найти нужный пункт. В этом случае можно воспользоваться элементом <optgroup>, предназначенным для создания смысловых групп пунктов списка. Элементы <option> помещаются внутрь контейнера <optgroup>, а заголовок группы указывается в атрибуте label.
Пример группировки пунктов списка с заголовками:

Пример: Создание списка с заголовками

<p>Желаемая работа (можно выбрать несколько): </p>
      <select name="job" size="8" multiple="multiple" >
        <optgroup label="Журналистика">
          <option value="isk">Искусство</option>
          <option value="ecol">Экология</option>
          <option value="tur">Туризм</option>
        </optgroup>
        <optgroup label="Программирование">
          <option value="html">HTML5</option>
          <option value="php">PHP</option>
          <option value="del">Delphi</option>
        </optgroup>
        <optgroup label="Создание сайтов">
          <option value="diz">Дизайн</option>
          <option value="verst">Верстка</option>
        </optgroup>
        <optgroup label="Переводчик">
          <option value="eng">Английский</option>
          <option value="fr">Французский</option>
          <option value="kit">Китайский</option>
        </optgroup>
        <optgroup label="Строительство">
          <option value="zd">Здания</option>
          <option value="most">Мосты</option>
          <option value="road">Дороги</option>
        </optgroup>
          </select>

Элемент <buttоn>

В отличие от кнопок отправки данных и сброса, в самой кнопке Ьuttоn нет встроенных функций. Благодаря элементу можно сочетать на кнопке текст и изображение, располагая их внутри контейнера <button>.
В следующем примере на кнопке отображается содержимое элемента <button> — текст и изображение:

Пример: Использование кнопки <button>

<p>Добавить email в список:</p> 
<input type="text" name="email" value="Ваш email">
<button>
<img src="images/add.gif" alt="add"> Добавить</button>

HTML5 Элемент <datalist>

Элемент <datalist> позволяют предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. Но если ни один из них не подходит, пользователь может ввести собственный текст. Значение, заданное для атрибута list (planet), аналогично идентификатору id элемента <datalist>. Это позволяет ассоциировать <datalist> с соответствующим полем ввода:

Пример: Использование элемента <datalist>

<form action="">
  <p>Выбор планеты: <input list="planet"></p>
  <datalist>
    <option value="Солнце">
    <option value="Земля">
    <option value="Меркурий">
    <option value="Марс">
    <option value="Венера">
  </datalist> 
</form>

Метки элементов формы (label)

У каждого элемента формы может быть своя пояснительная надпись, или метка, создаваемая при помощи элемента <label> и повышающая доступность, создавая четкие семантические связи между компонентами формы.
Использование элемента <label> при работе с переключателями и флажками — самый распространенный вариант, однако это не ограничение. С таким же успехом можно связать текст с любым элементом формы, и при щелчке кнопкой мыши на тексте связанный элемент автоматически берется в фокус. Связывание текста с элементом формы осуществляется просто: присваиваете атрибуту for элемента <label> значение такое же, как значение атрибута id у элемента, с которым связан <label>. Соответствие значений атрибутов for и id связывает два элемента вместе, что позволяет пользователям нажать на <label> и передать фокус нужному полю формы:

<input type="checkbox" name="form_checkbox" value="1">
<label for="id_checkbox">Наша метка</label>

Использование элемента <label> для создания меток предпочтительнее обычного текста. В первую очередь из-за удобства для конечного пользователя, ведь при применении элемента <label> установить/снять флажок можно не только щелчком на поле флажка, но и на его метке — пояснительном тексте:

Пример: Использование элемента <label>

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

ЭлементОписание
<form>Устанавливает форму на веб-странице
<input>Создает различные элементы формы (текстовые поля, кнопки, переключатели и т.д.) в зависимости от значения атрибута type
<textarea>Создает многострочное текстовое поле
<fieldset>Группирует элементы формы. Может также содержать внутри себя элемент legend с условными обозначениями элементов формы, составляющих логическую группу
<button>Многофункциональная кнопка
<label>Устанавливает связь между определенной меткой и элементом формы (input, select, textarea)
<legend>Применяется для создания заголовка группы элементов формы, которая определяется с помощью тега fieldset
<optgroup>Представляет собой контейнер, внутри которо-го располагаются теги option, объединенные в одну группу
<option>Определяет отдельные пункты списка, созда-ваемого с помощью контейнера select
<select>Позволяет создать элемент интерфейса в виде раскрывающегося или прокручиваемого списка
<datalist>Позволяет предоставить раскрывающийся список с предложенными значениями для любого типа поля ввода

Задачи

  • Многострочное текстовое поле

    Создайте многострочное текстовое поле, присвойте ему имя name=»pole», а также установите запрет на ввод текста в данное поле пользователем.

    Задача HTML: Реши сам »
    Многострочное текстовое поле:

    
HTML-код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="">
<p>Многострочное текстовое поле:</p>
...
</form>
</body>
    </html>

  • Подсказка в поле ввода текста

    Дополните HTML-код, чтобы в результате получилась форма, приведенная в задании. Когда пользователь начинает вводить значение в поле ввода, ему предоставляется несколько вариантов на выбор: «Среднее», »Среднее специальное» и «Высшее».

    Задача HTML: Реши сам »
    HTML-код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="">
<p>Ваше образование: <input type="text" list="teach" name="education">
...
</form>
</body>
    </html>

  • Ниспадающее меню

    В задании представлена форма имеющая вид ниспадающего меню с перечнем профессий: «Учитель», «Слecapь», «Дизайнер», «Водитель», «Aктep». Дополните HTML-код, чтобы в результате получилась такая же форма. Присвойте имя списку name=»profession», а значения пунктам списка: «Теасher», «Technic», «Designer», «Driver» и «Actor».

    Задача HTML: Реши сам »
    Ваша профессия?
УчительСлecapьДизайнерВодительAктep
    HTML-код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="">
<p>Ваша профессия?</p>
...
</form>
</body>
    </html>

  • Многофункциональная кнопка

    Доработайте HTML-код так, чтобы в результате получилась кнопка с изображением: «Star.png» и надписью — «Звезда».

    Задача HTML: Реши сам »
    
Звезда
    HTML-код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<button>
Звезда
</button>
</body>
    </html>


HTML-тег формы


Пример

HTML-форма с двумя полями ввода и одной кнопкой отправки:

<форма action = "/ action_page. php» method = «get»>









Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Тег

используется для создания HTML-формы для пользовательского ввода.

Элемент может содержать один или несколько из следующих элементов формы:

Поддержка браузера

Элемент
<форма> Есть Есть Есть Есть Есть

Атрибуты

Атрибут Значение Описание
принять кодировку набор символов Определяет кодировки символов, которые должны использоваться для отправки формы
действие URL Указывает, куда отправлять данные формы при отправке формы.
автозаполнение на
от		 Указывает, должно ли автозаполнение формы включаться или отключаться.
enctype приложение / x-www-form-urlencoded
multipart / form-data
text / plain		 Определяет, как данные формы должны быть закодированы при их отправке на сервер (только для method = «post»).
метод получить
пост		 Определяет метод HTTP для использования при отправке данных формы
наименование текст Задает имя формы
novalidate novalidate Указывает, что форма не должна проверяться при отправке
отн. external
help
license
next
nofollow
noopener
noreferrer
opener
prev
search		 Определяет отношение между связанным ресурсом и текущим документ
цель _blank
_self
_parent
_top		 Указывает, где отображать ответ, полученный после отправки формы.

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

HTML-форма с флажками:













Попробуй сам »

Пример

HTML-форма с радиокнопками:

php «method =» get «>











Попробуй сам »

Связанные страницы

Учебное пособие по HTML: формы и ввод HTML

Ссылка на HTML DOM: объект формы

Учебное пособие по CSS: стилизация форм

Настройки CSS по умолчанию

Большинство браузеров отображают элемент

со следующими значениями по умолчанию:


Как создавать HTML-формы

В этом руководстве вы узнаете, как создать форму в HTML для сбора данных, вводимых пользователем.

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

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

Формы

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

Тег используется для создания HTML-формы. Вот простой пример формы входа:

  <форма>

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

Элемент ввода

Это наиболее часто используемый элемент в HTML-формах.

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

Ниже описаны наиболее часто используемые типы входов.

Текстовые поля

Текстовые поля — это однострочные области, которые позволяют пользователю вводить текст.

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

  <форма>

— Результат приведенного выше примера будет выглядеть примерно так:

Примечание: Тег используется для определения меток для элементов . Если вы хотите, чтобы ваш пользователь вводил несколько строк, вы должны вместо этого использовать

— Результат приведенного выше примера будет выглядеть примерно так:

Ящики для выбора

Поле выбора — это раскрывающийся список параметров, который позволяет пользователю выбрать один или несколько параметров из раскрывающегося списка параметров. Поле выбора создается с использованием элементов определяют каждый элемент списка. 

  <форма>

— Результат приведенного выше примера будет выглядеть примерно так:

Кнопки отправки и сброса

Кнопка отправки используется для отправки данных формы на веб-сервер. При нажатии кнопки отправки данные формы отправляются в файл, указанный в атрибуте action формы для обработки отправленных данных.

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

Введите свое имя в текстовое поле выше и нажмите кнопку «Отправить», чтобы увидеть его в действии.

Примечание: Кнопки также можно создавать с помощью элемента <КНОПКА name = "reset" type = "reset"> Сбросить oops

Напомним, что авторы должны предоставить альтернативный текст для Элемент IMG .

Незаконно связать карту изображения с IMG , который отображается как содержимое КНОПКА элемент.

НЕЗАКОННЫЙ ПРИМЕР:
Следующее ниже не является допустимым HTML. 

<КНОПКА>

Начальный тег: требуется , Конечный тег: требуется

SELECT Определения атрибутов

имя = cdata [CI]
Этот атрибут назначает имя элемента управления.
размер = номер [CN]
Если Элемент SELECT представлен в виде прокручиваемого списка, этот атрибут указывает количество строк в списке, которые должны быть видны одновременно время.Визуальные пользовательские агенты не обязаны представлять SELECT элемент в виде списка; они могут использовать любой другой механизм, например раскрывающийся список меню.
кратное [CI]
Если установлено, этот логический атрибут допускает множественный выбор. Если не установлен, Элемент SELECT допускает только одиночный выбор.

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (информация о языке), dir (текст направление)
  • заголовок (элемент title)
  • стиль (рядный информация о стиле)
  • отключено (отключено управление вводом)
  • tabindex (навигация с вкладками)
  • onclick , ondblclick , onmousedown , onmouseup , на мыши над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

Элемент SELECT создает меню.Каждый выбор Предлагаемое меню представлено элементом OPTION . A ВЫБРАТЬ Элемент должен содержать хотя бы один элемент OPTION .

Элемент OPTGROUP позволяет авторам группировать варианты выбора логически. Это особенно полезно, когда пользователь должен выбирать из длинного список опций; группы связанных вариантов легче понять и запомнить чем один длинный список вариантов. В HTML 4 все Элементы OPTGROUP должны быть указаны непосредственно в SELECT элемент (я.е., группы не могут быть вложенными).

17.6.1 Предварительно выбрано варианты

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

  • Если нет Элемент OPTION имеет набор атрибутов selected , пользовательский агент поведение при выборе изначально выбранной опции не определено. Примечание. Поскольку существующие реализации обрабатывают этот случай иначе, текущая спецификация отличается от RFC 1866 ([RFC1866] раздел 8.1.3), в котором говорится:
    В исходном состоянии выбран первый вариант, если только не ВЫБРАН Атрибут присутствует в любом из элементов

    Поскольку поведение пользовательских агентов различается, авторы должны убедиться, что каждое меню включает предварительно выбранный по умолчанию ОПЦИЯ .

  • Если один В элементе OPTION установлен атрибут selected , он должен быть предварительно выбранный.
  • Если Элемент SELECT имеет набор атрибутов , несколько атрибутов и более один В элементе OPTION установлен атрибут selected , все они должны быть предварительно выбранным.
  • Считается ошибкой, если более одного элемента OPTION имеют значение selected атрибут установлен, а элемент SELECT не имеет набор нескольких атрибутов . Пользовательские агенты могут различаться в том, как они справляются с этим. ошибка, но не следует предварительно выбирать более одного варианта.

Начальный тег: требуется , Конечный тег: требуется

OPTGROUP Определения атрибутов

этикетка = текст [CS]
Этот атрибут определяет метку для группы опций.

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (информация о языке), dir (текст направление)
  • заголовок (элемент title)
  • стиль (рядный информация о стиле)
  • отключено (отключено управление вводом)
  • onclick , ondblclick , onmousedown , onmouseup , на мыши над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

Примечание. Разработчикам рекомендуется, чтобы будущие версии HTML может расширить механизм группировки, чтобы разрешить вложенные группы (например, Элементы OPTGROUP могут быть вложенными). Это позволит авторам представлять более богатая иерархия выбора.

Начальный тег: требуется , Конечный тег: дополнительный

ОПЦИЯ Определения атрибутов

выбран [CI]
Если установлено, этот логический атрибут указывает, что эта опция предварительно выбранный.
значение = cdata [CS]
Этот атрибут определяет начальное значение контроль. Если этот атрибут не установлен, начальный value устанавливается равным содержимому элемента OPTION .
этикетка = текст [CS]
Этот атрибут позволяет авторам указывать более короткую метку для параметра, чем содержимое элемента OPTION . Если указано, пользовательские агенты должны использовать значение этого атрибута, а не содержимое OPTION элемент в качестве метки опции.

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (информация о языке), dir (текст направление)
  • заголовок (элемент title)
  • стиль (рядный информация о стиле)
  • отключено (отключено управление вводом)
  • onclick , ondblclick , onmousedown , onmouseup , на мыши над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

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

Метка атрибут Элемент OPTGROUP определяет метку для группы вариантов.

В этом примере мы создаем меню, которое позволяет пользователю выбрать, какой из семь программных компонентов для установки. Первый и второй компоненты: предварительно выбран, но может быть отменен пользователем. Остальные компоненты не выбрано заранее. В Размер Атрибут указывает, что меню должно иметь только 4 строки, даже если пользователь может выбрать один из 7 вариантов.Остальные параметры должны быть доступны через механизм прокрутки.

SELECT сопровождается кнопками отправки и сброса.

Только выбранные варианты будут успешными (используя имя элемента управления «выбор компонента»). Когда никакие параметры не выбраны, элемент управления не работает, и ни имя, ни любые значения отправляются на сервер при отправке формы. Обратите внимание, что где установлен атрибут значение , он определяет начальное значение, иначе это элемент содержание.

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

представляет следующую группу: 

  Никто
  PortMaster 3
      3.7.1
      3,7
      3.5
  PortMaster 2
      3,7
      3.5
  IRX
      3,7R
      3.5R

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

Графический пользовательский агент может отображать это как:

На этом изображении показан элемент SELECT , отображаемый в виде каскадных меню. Вершина Метка меню отображает текущее выбранное значение (PortMaster 3, 3.7.1). Пользователь развернул два каскадных меню, но еще не выбрал новое. значение (PortMaster 2, 3.7). Обратите внимание, что в каждом каскадном меню отображается метка OPTGROUP или Элемент OPTION .

Начальный тег: требуется , Конечный тег: требуется

Определения атрибутов

имя = cdata [CI]
Этот атрибут назначает имя элемента управления.
строк = число [CN]
Этот атрибут определяет количество видимых текстовых строк. Пользователи должны быть может вводить больше строк, поэтому пользовательские агенты должны предоставлять некоторые средства для прокрутите содержимое элемента управления, когда содержимое выходит за пределы видимая область.
столбцов = число [CN]
Этот атрибут определяет видимую ширину в средней ширине символа. Пользователи должны иметь возможность вводить более длинные строки, чем это, поэтому пользовательские агенты должны предоставить средства для прокрутки содержимого элемента управления, когда содержимое выходит за пределы видимой области.Пользовательские агенты могут переносить видимый текст строки, чтобы длинные строки оставались видимыми без необходимости прокрутки.

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (информация о языке), dir (текст направление)
  • заголовок (элемент title)
  • стиль (рядный информация о стиле)
  • только для чтения (элементы управления вводом только для чтения)
  • отключено (отключено управление вводом)
  • tabindex (навигация с вкладками)
  • onfocus , onblur , onselect , onchange , onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

Элемент TEXTAREA создает управление вводом многострочного текста.Пользовательские агенты следует использовать содержимое этого элемента в качестве начального значение элемента управления и должен изначально отображать этот текст.

В этом примере создается TEXTAREA элемент управления, состоящий из 20 строк на 80 столбцов и изначально содержит две строки текста. Модель TEXTAREA сопровождается кнопками отправки и сброса. 


   

   <ТЕКСТАРА name = "thetext" rows = "20" cols = "80">
   Первая строка исходного текста.Вторая строка исходного текста.

Установка атрибута только для чтения позволяет авторам отображать неизменяемые текст в TEXTAREA . Это отличается от использования стандартного размеченного текста в документ, потому что значение TEXTAREA представлено с форма.

ISINDEX — это устарело. Этот элемент создает элемент управления вводом текста в одну строку.Авторы должны использовать INPUT элемент для создания элементов управления вводом текста.

См. Переходный DTD для формальное определение.

Атрибуты, определенные в другом месте

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

УСТАРЕВШИЙ ПРИМЕР:
Следующая декларация ISINDEX :

можно переписать с INPUT следующим образом: 



 Введите поисковую фразу:

Семантика ISINDEX. В настоящее время семантика для ISINDEX хорошо определены только тогда, когда базовый URI для прилагаемого документа — это HTTP URI. На практике входная строка ограничен Latin-1, поскольку нет механизма для URI, чтобы указать другой набор символов.

Некоторым элементам управления формы автоматически присваиваются метки (нажмите кнопки), а большинство — нет (текстовые поля, флажки и переключатели, а также меню).

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

Элемент LABEL используется для указания меток для элементов управления, которые не иметь неявные метки,

17.9.1 Модель

LABEL элемент

Начальный тег: требуется , Конечный тег: требуется

Определения атрибутов

для = idref [CS]
Этот атрибут явно связывает определяемую метку с другим контроль.Если присутствует, значение этого атрибута должно быть таким же, как значение атрибута id некоторого другого элемента управления в том же документ. При отсутствии определяемая метка связана с элементом содержание.

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (информация о языке), dir (текст направление)
  • заголовок (элемент title)
  • стиль (рядный информация о стиле)
  • accesskey (доступ ключи)
  • onfocus , onblur , onclick , ondblclick , onmousedown , onmouseup , на мыши над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

Элемент LABEL может использоваться для прикрепления информации к элементам управления.Каждые Элемент LABEL связан ровно с одним элементом управления формой.

Атрибут для связывает метку с другим элементом управления. явно: значение для атрибута должно быть таким же, как значение id атрибута связанного элемента управления. Более одного LABEL может быть связан с одним и тем же элементом управления путем создания нескольких ссылки через для атрибута .

В этом примере создается таблица, которая используется для выравнивания двух элементов управления вводом текста и связанных с ними меток.Каждая этикетка явно связан с одним вводом текста: 


<ТАБЛИЦА>

Этот пример расширяет форму предыдущего примера, чтобы включить LABEL элементы.

 

    

    
               

    
               

    
               

     Мужской 

     Женский

Чтобы связать метку с другим элементом управления неявно элемент управления должен находиться в пределах содержимого LABEL элемент.В этом случае LABEL может содержать только один элемент управления. Этикетка сам может быть расположен до или после связанного элемента управления.

В этом примере мы неявно связываем две метки с двумя элементами управления вводом текста: 




<ЭТИКЕТКА>
   Имя
   

<ЭТИКЕТКА>
   
   Фамилия

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

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

Ярлыки могут отображаться пользовательскими агентами несколькими способами (например, визуально, читает синтезаторы речи и т. д.)

Начальный тег: требуется , Конечный тег: требуется

ОБОЗНАЧЕНИЯ Определения атрибутов

выровнять = сверху | снизу | слева | справа [CI]
Не рекомендуется. Это Атрибут определяет положение легенды по отношению к набору полей. Возможные значения:
  • вверху: Легенда находится вверху набора полей. Это значение по умолчанию.
  • внизу: Легенда находится внизу набора полей.
  • слева: Легенда находится в левой части набора полей.
  • справа: Легенда находится справа от набора полей.

Атрибуты, определенные в другом месте

  • id , класс (идентификаторы на уровне документа)
  • lang (информация о языке), dir (текст направление)
  • заголовок (элемент title)
  • стиль (рядный информация о стиле)
  • accesskey (доступ ключи)
  • onclick , ondblclick , onmousedown , onmouseup , на мыши над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

Элемент FIELDSET позволяет авторам группировать тематические группы соответствующие элементы управления и метки.Группирование элементов управления упрощает пользователям понимать их цель, одновременно облегчая навигацию с помощью табуляции для визуальных пользовательских агентов и речевой навигации для пользовательских агентов, ориентированных на речь. Правильное использование этого элемента делает документы более доступными.

Элемент LEGEND позволяет авторам присваивать заголовок элементу . ПОЛЯ . Легенда улучшает доступность, когда FIELDSET визуализируется невизуально.

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


 

 

   Личная информация 
  Фамилия: 
  Имя: 
  Адрес: 
   ...подробнее личная информация ... 
 

 

   История болезни 
   Оспа
   Свинка
   Головокружение
   Чихание
   ...подробнее история болезни ... 
 

 

   Текущее лекарство 
  Вы в настоящее время принимаете какие-либо лекарства?
   Да
   Нет

  Если вы в настоящее время принимаете лекарства, укажите
  это в пространстве ниже:
  <ТЕКСТАРА name = "current_medication"
            rows = "20" cols = "50"
            tabindex = "40">

Обратите внимание, что в этом примере мы могли бы улучшить визуальное представление формы, выравнивая элементы внутри каждого FIELDSET (с таблицами стилей), добавляя информация о цвете и шрифте (с таблицами стилей), добавление сценариев (скажем, только открыть текстовую область «текущее лекарство», если пользователь указывает, что он или она в настоящее время принимает лекарства) и т. д.

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

Есть несколько способов установить фокус на элементе:

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

17.11.1 Навигация с вкладками

Определения атрибутов

tabindex = число [CN]
Этот атрибут определяет позицию текущего элемента в табуляции. заказ для текущего документа.Это значение должно быть числом от 0 до 32767. Пользовательские агенты должны игнорировать ведущие нули.

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

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

  1. Те элементы, которые поддерживают атрибут tabindex и назначают положительное значение к нему переходит в первую очередь.Навигация происходит от элемента с наименьшим значением tabindex элементу с наибольшим значением. Значения не обязательно должны быть последовательными и не должны начинаться с какого-либо конкретного значения. Элементы с одинаковыми значениями tabindex следует перемещаться в том порядке, в котором они появляются в потоке символов.
  2. Те элементы, которые не поддерживают атрибут tabindex или поддерживают его и присвоить ему значение «0», переходят дальше. Эти элементы перемещаются в том порядке, в котором они появляются в потоке символов.
  3. Отключенные элементы не участвуют в порядок табуляции.

Следующие элементы поддерживают атрибут tabindex : A , ОБЛАСТЬ , КНОПКА , ВВОД , ОБЪЕКТ , ВЫБОР , и ТЕКСТАРА .

В этом примере порядок табуляции будет КНОПКА , INPUT элементов по порядку (обратите внимание, что «field1» и кнопка совместно используют тот же tabindex, но «field1» появляется позже в потоке символов), и, наконец, ссылка, созданная Элемент .



<ГОЛОВА>
 Документ с FORM 

<ТЕЛО>
  ... немного текста ... 

 Перейти к
 Веб-сайт W3C. 
  ... еще ... 

  ... еще немного...

Клавиши табуляции. Фактическая последовательность клавиш, которая вызывает переход по вкладкам или активация элемента зависит от конфигурации агент пользователя (например, клавиша «tab» используется для навигации, а клавиша «ввод» — используется для активации выбранного элемента).

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

17.11.2 Ключи доступа

Определения атрибутов

ключ доступа = символа [CN]
Этот атрибут назначает ключ доступа к элементу. Доступ key — это отдельный символ из набора символов документа. Примечание. Авторы должны учитывать метод ввода ожидаемого читателя при указании ключа доступа.

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

Следующие элементы поддерживают атрибут accesskey : A , ОБЛАСТЬ , КНОПКА , ВХОД , LABEL и LEGEND и ТЕКСТАРА .

В этом примере ключ доступа «U» назначается метке, связанной с Управление INPUT . При вводе клавиши доступа фокус переходит к метке, которая в свою очередь передает его соответствующему элементу управления.Затем пользователь может ввести текст в ВХОД площадь.

В этом примере мы назначаем ключ доступа ссылке, определенной в A элемент. При вводе этого ключа доступа пользователь переходит к другому документу, в этом случай, оглавление. 

 
    Содержание

Вызов ключей доступа зависит от базовой системы. Для например, на машинах под управлением MS Windows обычно нужно нажимать «alt» ключ в дополнение к ключу доступа. В системах Apple обычно нужно нажимать ключ «cmd» в дополнение к ключу доступа.

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

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

17.12.1 Отключено контролирует

Определения атрибутов

отключено [CI]
При установке для элемента управления формы этот логический атрибут отключает элемент управления. для пользовательского ввода.

Если установлено, атрибут disabled имеет следующие эффекты на элемент:

Следующие элементы поддерживают атрибут disabled : BUTTON , ВХОД , OPTGROUP , ОПЦИЯ , ВЫБОР , и ТЕКСТАРА .

Этот атрибут наследуется, но локальные объявления переопределяют унаследованные значение.

Как отображаются отключенные элементы, зависит от пользовательского агента. Например, некоторые пользовательские агенты «затеняют» отключенные пункты меню, ярлыки кнопок и т. д.

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

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

17.12.2 Только чтение контролирует

Определения атрибутов

только для чтения [CI]
При установке для элемента управления формы этот логический атрибут запрещает изменение контроль.

атрибут readonly указывает, может ли элемент управления быть изменен Пользователь.

Если установлено, атрибут только для чтения имеет следующие эффекты на элемент:

Следующие элементы поддерживают атрибут только для чтения : INPUT и ТЕКСТАРА .

Как отображаются элементы только для чтения, зависит от пользовательского агента.

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

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

17.13.1 Подача формы метод

Атрибут метода элемента FORM определяет метод HTTP используется для отправки формы агенту обработки.Этот атрибут может занимать два значения:

  • get: С помощью метода HTTP «get» набор данных формы добавляется к URI, указанному действием атрибут (с вопросительным знаком («?») в качестве разделителя), и этот новый URI отправляется на обрабатывающий агент.
  • post: При использовании HTTP-метода «post» набор данных формы включается в тело формы и отправляется к обрабатывающему агенту.

Метод «get» следует использовать, когда форма идемпотентна (т.е.е., не вызывает побочные эффекты). Многие поиски по базам данных не имеют видимых побочных эффектов и делают идеальные приложения для метода «получить».

Если служба, связанная с обработкой формы, вызывает побочные эффекты (например, если форма изменяет базу данных или подписку на услугу), следует использовать метод «пост».

Примечание. Метод «get» ограничивает значения набора данных формы символами ASCII. Только «post» метод (с enctype = «multipart / form-data») указан для покрытия весь набор символов [ISO10646].

17.13.2 Успешный контроль

Успешный контроль «действителен» для отправки. Каждый успешный control имеет имя элемента управления в паре с его текущим значением как часть отправленного набора данных формы. Успешный контроль должен быть определен в Элемент FORM и должен иметь элемент управления название.

Однако:

  • Элементы управления, которые отключен не может быть успешным.
  • Если форма содержит более одной кнопки отправки, только активированная кнопка отправки успешна.
  • Все флажки «включены» могут быть установлены успешно.
  • Для переключателей с одинаковым значением name , только переключатель «on» может быть успешным.
  • Для меню имя элемента управления предоставляется элементом SELECT , а значения — параметром OPTION элементы. Только выбранные варианты могут быть успешными. Когда нет вариантов выбрано, элемент управления не работает, и ни имя, ни какие-либо значения не отправляется на сервер при отправке формы.
  • Текущее значение выбора файла — это список из одного или нескольких файлов имена. После отправки формы содержимое каждого файла отправлено вместе с остальными данными формы. Содержимое файла упаковано в соответствии с типом содержимого формы.
  • Текущее значение объекта управления определяется выполнение.

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

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

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

по-прежнему приведет к тому, что значение будет связано с именем «invisible-password» и отправлено с формой.

17.13.3 Форма обработки данные

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

Шаг первый: Определите успешных элементы управления
Шаг 2. Создайте набор данных формы

А Набор данных формы представляет собой последовательность построены пары имя-элемент / текущее значение от успешного управления

Шаг третий: закодируйте данные формы набор

Затем набор данных формы кодируется в соответствии с типом содержимого, указанным в enctype атрибут элемента FORM .

Шаг четвертый: отправьте набор данных закодированной формы

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

Эта спецификация не определяет все допустимые методы отправки или типы контента, которые могут использоваться с формами. Тем не мение, Пользовательские агенты HTML 4 должны поддерживать установленные соглашения в следующих кейсы:

  • Если метод — это «получить», а действие — это HTTP URI, пользовательский агент принимает значение , действие , добавляет `? ‘ , затем добавляет набор данных формы, закодированный с помощью контент «application / x-www-form-urlencoded» тип.Затем пользовательский агент переходит по ссылке на этот URI. В этом сценарии данные формы ограничены кодами ASCII.
  • Если метод — это «сообщение», а действие — это HTTP URI, пользовательский агент выполняет «почтовую» транзакцию HTTP, используя значение действия атрибут и сообщение, созданное в соответствии с тип содержимого, указанный атрибутом enctype .

Для любого другого значения action или method поведение не определено.

Пользовательские агенты должны отображать ответ от HTTP «get» и «post». сделки.

17.13.4 Типы содержимого формы

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

Также обратитесь к разделу по экранированию амперсандов в URI. значения атрибутов.

приложение / x-www-form-urlencoded

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

  1. Имена и значения элементов управления экранированы. Пробелы заменяются на `+ ‘, а затем зарезервированные символы экранируются, как описано в [RFC1738], раздел 2.2: не буквенно-цифровые символы заменяются на % HH , знак процента и две шестнадцатеричные цифры, представляющие ASCII код персонажа.Разрывы строк представлены парами «CR LF» (т. Е. `% 0D% 0A ‘).
  2. Имена / значения элементов управления перечислены в том порядке, в котором они появляются в документ. Имя отделяется от значения `= ‘ и Пары имя / значение отделяются друг от друга `& ‘.
multipart / form-data

Примечание. Дополнительные сведения см. В [RFC2388]. информация о загрузке файлов, включая проблемы обратной совместимости, взаимосвязь между multipart / form-data и другими типами контента, производительность вопросы и т. д.

Информацию о проблемах безопасности форм см. В приложении.

Тип содержимого «application / x-www-form-urlencoded» неэффективен для отправка больших объемов двоичных данных или текста, содержащих не-ASCII символы. Тип содержимого «multipart / form-data» следует использовать для отправка форм, содержащих файлы, данные не в формате ASCII и двоичные данные.

Контент multipart / form-data следует правилам всех multipart MIME. потоки данных, как описано в [RFC2045].Определение «multipart / form-data» доступно в реестре [IANA].

Сообщение «multipart / form-data» содержит ряд частей, каждая представляющий успешный контроль. Части отправляются агенту обработки в том же порядке, что и соответствующие элементы управления появятся в потоке документов. Границы деталей не должны встречаться ни в одном из данные; как это делается, выходит за рамки данной спецификации.

Как и все составные MIME-типы, каждая часть имеет необязательный Content-Type. заголовок, который по умолчанию имеет значение «text / plain».Пользовательские агенты должны предоставлять Заголовок Content-Type, сопровождаемый параметром charset.

Ожидается, что каждая часть будет содержать:

  1. заголовок «Content-Disposition», значение которого — «form-data».
  2. атрибут имени, определяющий имя элемента управления соответствующий элемент управления. Имена элементов управления, изначально закодированные в наборах символов, отличных от ASCII, могут быть закодированы с помощью метода описано в [RFC2045].

Таким образом, например, для элемента управления с именем «mycontrol» соответствующая часть будет указано: 

Content-Disposition: данные формы; name = "mycontrol"

Как и все передачи MIME, «CR LF» (т.е., `% 0D% 0A ‘) является используется для разделения строк данных.

Каждая часть может быть закодирована и предоставлен заголовок Content-Transfer-Encoding. если значение этой части не соответствует кодировке по умолчанию (7BIT) (см. [RFC2045], раздел 6)

Если содержимое файла отправляется с формой, ввод файла должен идентифицироваться соответствующими тип содержимого (например, «приложение / октет-поток»). Если несколько файлов должны быть возвращены как результат одной записи формы, они должны быть возвращены как «multipart / mixed» встроено в «multipart / form-data».

Пользовательский агент должен попытаться предоставить имя файла для каждого отправленного файла. Имя файла можно указать с помощью параметра «filename» в Заголовок Content-Disposition: form-data или, в случае нескольких файлов, в заголовок «Content-Disposition: file» подчасти. Если имя файла операционная система клиента не в US-ASCII, имя файла может быть аппроксимировано или закодировано с использованием метода [RFC2045]. Это удобно для тех случаев, когда, например, загруженные файлы могут содержать ссылки друг на друга (например,g., файл TeX и его вспомогательный стиль «.sty» описание).

Следующий пример иллюстрирует кодирование «multipart / form-data». Предположим, мы иметь следующий вид: 

 

   

   Как тебя зовут?  

   Какие файлы вы отправляете?

Если пользователь вводит «Ларри» в текстовый ввод и выбирает текстовый файл «файл1.txt «, пользовательский агент может отправить обратно следующие данные: 

   Тип содержимого: multipart / form-data; Граница = AaB03x

   --AaB03x
   Content-Disposition: данные формы; name = "имя-отправки"

   Ларри
   --AaB03x
   Content-Disposition: данные формы; name = "файлы"; filename = "file1.txt"
   Тип содержимого: текст / простой

   ... содержимое file1.txt ...
   --AaB03x--

Если пользователь выбрал второй файл (изображение) «file2.gif», пользовательский агент может Соберите детали следующим образом: 

   Тип содержимого: multipart / form-data; Граница = AaB03x

   --AaB03x
   Content-Disposition: данные формы; name = "имя-отправки"

   Ларри
   --AaB03x
   Content-Disposition: данные формы; name = "files"
   Content-Type: составной / смешанный; Граница = BbC04y

   --BbC04y
   Content-Disposition: файл; имя_файла = "файл1.текст"
   Тип содержимого: текст / простой

   ... содержимое file1.txt ...
   --BbC04y
   Content-Disposition: файл; filename = "file2.gif"
   Тип содержимого: изображение / gif
   Content-Transfer-Encoding: двоичный

   ... содержимое file2.gif ...
   --BbC04y--
   --AaB03x--

Работа с формами | Документация Django

В HTML форма — это набор элементов внутри

...
, которые позволить посетителю делать такие вещи, как ввод текста, выбор параметров, манипулирование объекты или элементы управления и т. д., а затем отправить эту информацию обратно в сервер.

Некоторые из этих элементов интерфейса формы — ввод текста или флажки — встроены в сам HTML. Другие намного сложнее; интерфейс, который всплывает выбор даты или позволяет перемещать ползунок или управлять элементами управления. обычно используют JavaScript и CSS, а также элементы HTML формы для добиться этих эффектов.

В качестве примера форма входа для администратора Django содержит несколько элементов: один из type = "text" для имени пользователя, один из type = "password" для пароля и один из type = "submit" для Кнопка «Войти».Он также содержит некоторые скрытые текстовые поля, которые пользователь не видит, что Django использует для определения дальнейших действий.

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

— / admin / — и что он должны быть отправлены с использованием механизма HTTP, указанного в атрибуте method — пост .

Когда срабатывает элемент , данные возвращаются на / admin / .

GET и POST

GET и POST — единственные методы HTTP, которые можно использовать при работе с формами.

Форма входа в Django возвращается с использованием метода POST , в котором браузер объединяет данные формы, кодирует их для передачи, отправляет на сервер, а затем получает ответ.

GET , напротив, объединяет представленные данные в строку и использует это составить URL.URL-адрес содержит адрес, по которому должны быть отправлены данные, как а также ключи и значения данных. Вы можете увидеть это в действии, если выполните поиск в документации Django, которая создаст URL-адрес формы https://docs.djangoproject.com/search/?q=forms&release=1 .

GET и POST обычно используются для разных целей.

Любой запрос, который может быть использован для изменения состояния системы — например, запрос, который вносит изменения в базу данных — должен использовать POST . ПОЛУЧИТЬ следует использовать только для запросов, не влияющих на состояние системы.

GET также не подходит для формы пароля, потому что пароль будет отображаться в URL-адресе и, следовательно, также в истории браузера и журналах сервера, все в виде обычного текста. Он также не подходит для больших объемов данных, или для двоичных данных, таких как изображение. Веб-приложение, использующее GET запросы на формы администратора представляют собой угрозу безопасности: злоумышленник может легко имитируйте запрос формы, чтобы получить доступ к конфиденциальным частям системы. POST в сочетании с другими средствами защиты, такими как защита CSRF от Django, обеспечивает больший контроль над доступом.

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

25,1. Forms — Введение в профессиональную веб-разработку в документации по JavaScript

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

25.1.1. Создать форму

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

 
   
       Пример формы

Пустой

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

 
   
       Пример формы 
   
   
      <форма>

25.1.2. Элемент ввода

Элемент input используется для добавления интерактивных полей, которые позволяют пользователю вводить данные. input Элементы имеют два очень важных атрибута: name и type .

  • Имя Атрибут используется для идентификации входного значения при отправке данных
  • Атрибут типа определяет, какой тип значения входных данных представляет