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

Что для вас означает термин «заполнение формы»? Это правильно! Это то же самое значение, что и в HTML. В наших предыдущих уроках все это, пока мы видели, как можно поиграть с макетом. Если вам нужно заполнить некоторые детали, как это возможно? В такой ситуации вам на помощь приходит форма. Это похоже на то, как вы заполняете свои данные в форме заявки, в которой будут поля для ввода вашего имени, адреса, выбора пола и т. Д. В этой статье мы объясним, как создавать формы в HTML, а также различные параметры управления формами.

Структура HTML-формы

Давайте создадим простую HTML-форму, чтобы понять структуру:

<FORM NAME=”form” ACTION=”call_script.asp” METHOD=”GET”>
<!– NAME is used in the script to process the form data. ACTION is nothing but a program on the server which will be called when this form is submitted. METHOD is the way the form is submitted to the server – example methods are GET/POST –>

(Here goes all your form elements!!!)

</FORM>

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

….

. Тег формы имеет следующие атрибуты:

  • Имя — это имя формы, которое не является обязательным. Он используется в сценарии для получения данных, на которые ссылается имя формы. Поскольку имя не поддерживается в HTML5, вместо него можно использовать атрибут ID.
  • Действие — это не что иное, как URL-адрес на стороне сервера. Указанная страница URL получит данные формы при отправке.
  • Метод — это способ отправки данных формы на сервер. Данные в форме, отправленной с помощью метода GET, отправляются как часть URL-адреса. Это будет часть после вопросительного знака, называемая строкой запроса. С другой стороны, данные формы, отправленные с помощью метода POST, отправляются в заголовке HTTP для запроса новой страницы.

Как работает HTML-форма?

Давайте рассмотрим практический пример поисковой формы, доступной на сайте Google. Пользователь вводит запрос и нажимает кнопку поиска. Здесь запрос представляет собой ввод формы, а кнопка поиска похожа на кнопку отправки. Содержание запроса вместе с элементами управления формы отправляется на сервер Google. Затем сервер обрабатывает запрос, используя языки сценариев, такие как PHP, и отправляет страницу вывода в браузер. И, наконец, пользователь видит страницу результатов поиска.

Атрибуты INPUT Tag

Тег используется для добавления элементов в форму и имеет следующие атрибуты:

  • NAME — это управляющее имя элемента, которое может быть использовано при обработке скрипта
  • ТИП — текст / пароль / текстовое поле / флажок / радио / отправить / сбросить / кнопка / скрытый / файл
  • ЗНАЧЕНИЕ — может использоваться для заполнения значения по умолчанию в текстовом поле.
  • MAXLENGTH — относится к общему количеству символов, которые можно ввести.
  • РАЗМЕР — указывает физический размер текстового поля.

В дополнение к перечисленным выше типам вы также можете добавить в форму список.

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

Тег

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

1. Текстовое поле

Сначала мы поместим на него текстовое поле. Для этого нужно написать код:

Enter Your Name: <INPUT TYPE="text" NAME="textbox" MAXLENGTH="10" SIZE="50">

Вот как это выглядит — попробуйте ввести в него 11 символов и посмотрите, что произойдет.

  • Атрибут size используется для ограничения ширины формы до 50 символов. Помните, что это не фактические символы вводимого текста, это просто размер поля ввода. Также атрибут размера не поддерживается в HTML, поэтому вы должны использовать CSS для настройки размера полей ввода.
  • Атрибут Type = ”text” используется для создания однострочного ввода текста.
  • Имя — используется в серверном скрипте, чтобы определить, какой элемент формы отправляет данные для их дальнейшей обработки.
  • Maxlength — максимальное количество символов, которое позволяет поле ввода. В приведенном выше примере вы не можете вручную ввести более 10 символов.

2. Пароль

Далее мы поместим поле пароля, набрав:

Enter Your Password: <INPUT TYPE="password" NAME="password" SIZE="50" MAXLENGTH="12">

Посмотрите, какие символы появляются при вводе!

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

3. Textarea

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

<TEXTAREA NAME="textarea" ROWS="3" COLS="50"></TEXTAREA>

И отображается это так…

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

4. Флажок

Теперь добавим несколько механизмов выбора. Первый — это флажок.

<INPUT TYPE="checkbox" NAME="chkbox" VALUE="1"> Unchecked Box

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

<INPUT TYPE="checkbox" NAME="chkbox" VALUE="2" CHECKED> Checked Box

5. Радиокнопки

Второй механизм выбора — это набор переключателей. Одновременно можно выбрать только одну кнопку из набора — для этого всем кнопкам должно быть присвоено одинаковое значение для атрибута NAME. Например:

<INPUT TYPE="radio" NAME="rdb" VALUE="1"> Radio button 1
<INPUT TYPE="radio" NAME="rdb" VALUE="2"> Radio button 2

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

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

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

6. Список

И третий — это список (не комбо), который включается в форму путем кодирования следующего:

<SELECT NAME="lstLocation" SIZE="10">
<OPTION VALUE="America">America</OPTION>
<OPTION VALUE="England">England</OPTION>
<OPTION VALUE="China">China</OPTION>
<OPTION VALUE="India">India</OPTION>
<OPTION VALUE="Russia">Russia</OPTION>
<OPTION VALUE="Canada">Canada</OPTION>
</SELECT>
  • Атрибут SIZE указывает количество элементов, отображаемых в списке одновременно.
  • Атрибут VALUE указывает, что будет отправлено на сервер при отправке формы.
  • Текст между двумя тегами OPTION будет использоваться для отображения.

Вы обнаружите, что некоторые браузеры прощают вас, даже если вы не используете атрибут VALUE — однако рекомендуется играть по правилам и выполнять все кодирование :-). Вот как это выглядит…

Вот список без первоначального выбора.

И в этом списке по умолчанию выбрана «Америка». Как? Нет, на этот раз ключевое слово НЕ ПРОВЕРЕНО, оно ВЫБРАНО :-)!

7. Загрузка файла

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

<FORM ACTION="script-URL"
METHOD="post">
<p>Upload Document</p>
<INPUT TYPE="file" NAME="file1" /><br />
<INPUT TYPE="submit" value="submit" />
</FORM>

Хотя можно использовать атрибуты MAXLENGTH и SIZE, это не рекомендуется, поскольку длина пути к файлу может превышать указанный размер. Вывод в браузере будет выглядеть следующим образом:

Пользователи могут нажать кнопку «Выбрать файл» и выбрать файл на локальном компьютере. Обратите внимание, что внешний вид окна просмотра зависит от операционной системы и не может управляться через ввод формы. Кнопка отправки отправит файл сценарию, указанному в URL-адресе действия. Вы должны использовать метод post для загрузки файлов, а метод get использовать нельзя.

8. Кнопки

В HTML-форму можно добавить кнопки трех типов.

Отправить кнопку — HTML-код для включения кнопки отправки выглядит следующим образом:

<INPUT NAME=cmdSubmit VALUE="Submit">

Это отправляет содержимое формы на сервер при нажатии.

Еще один Кнопка сброса

<INPUT NAME=cmdReset VALUE="Reset">

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

Третий тип — это Общая кнопка

<INPUT NAME=cmdSubmit VALUE="Submit">

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

Вы можете добавить скрытый элемент управления к кнопке с помощью атрибута type = ”hidden”. Это не будет отображаться на странице и использоваться для управления формой или проверки. Хотя скрытые входы не видны в браузере, пользователи могут просмотреть код, просмотрев исходный код.

9. Ярлыки форм

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

<LABEL>Enter Your Name: <INPUT TYPE="text" NAME="textbox" MAXLENGTH="10" SIZE="50"></LABEL>

10. Скрытое текстовое поле

Вы можете использовать скрытые текстовые поля для отправки скрытых текстовых данных на сервер.

<INPUT TYPE="hidden" NAME="additional_information" VALUE ="Text">

Скрытый текст не отображается в браузере, поэтому не может быть изменен пользователем. У него должен быть установлен атрибут VALUE, и данные VALUE будут отправлены на сервер вместе с другими данными формы.

11. Управление изображением в форме

Изображения можно использовать в форме для графического отображения кнопки отправки.

<INPUT TYPE="IMAGE" SRC="https://www.webnots.com/html-forms-tutorial/submit.png" alt="Submit" NAME="imagename">

Группировка элементов формы

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

, как в приведенном ниже примере, а тег

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

<FIELDSET>
<LEGEND>Address:</LEGEND>
<LABEL>Street:<br />
<input type="text" name="street" /></LABEL><br />
<LABEL>Province:<br />
<input type="text" name="province" /></LABEL><br />
<LABEL>Country:<br />
<input type="text" name="country" /></LABEL>
</FIELDSET>

В браузере это будет выглядеть так:

Ввод даты, адреса электронной почты и URL-адреса в форме

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

<FORM ACTION="action-script"
METHOD="post">
<LABEL for="users">Choose date:</LABEL>
<INPUT TYPE="date" NAME="date1" />
<INPUT TYPE="submit" VALUE="Submit" />
</FORM>

Вот результат:

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

<input type="email" name="email" />
<input type="url" name="site" />

Добавление окна поиска в форму

Вы можете добавить поиск в форму с помощью следующего кода:

<FORM ACTION="action-script"
METHOD="post">
<LABEL for="users">Search</LABEL>
<INPUT TYPE="search" NAME="search1" />
<INPUT TYPE="submit" VALUE="Submit" />
</FORM>

В браузере это будет выглядеть так:

Образцы HTML-форм

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

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

На что следует обратить внимание при создании HTML-форм

  1. Чтобы элементы формы отображались наглядно, поместите их в ячейки таблицы.
  2. Если вы планируете использовать сценарии на стороне клиента, используйте КНОПКУ, а не ОТПРАВИТЬ.
  3. Если вы хотите использовать список, который позволяет пользователю выбирать более одного элемента, добавьте ключевое слово MULTIPLE в тег SELECT.
  4. Для переключателей и флажков, если вы хотите, чтобы определенный элемент был выбран по умолчанию, добавьте ключевое слово CHECKED.
  5. Для списков установите атрибут SELECTED для параметра, который вы хотите выбрать по умолчанию.
  6. Вы можете использовать атрибут VALUE в текстовых полях, текстовых полях и полях пароля, чтобы форма загружалась с этими предопределенными значениями.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *