Как создать форму для ввода данных на (html) web странице

Следующая статья: Как вставить (сделать) ссылку на web (html) странице - первый урок

Содержание

Для чего в общем необходимы формы на web страничках
Формируем код html формы
Пуск процесса обработка данных на форме
Проверка работы формы

Для чего в общем необходимы формы на web страничках

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

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

Поглядим, как воткнуть в web документ ординарную форму, которая дозволит пользовательу напечатать свое сообщение прямо на web страничке и автоматом выслать его по электрической почте компании SD. Но поначалу вставим в HTML документ list.html текст с приглашением заполнить форму, поместив его под перечнем. Текст приглашения следует выделить в отдельный абзац, ограничив его парой тегов <р></р>, и выровнять по центру.

Формируем код html формы

Воткните пустую строчку меж закрывающим тегом </ul> и закрывающим тегом </body> и введите в этой строке последующий код:

<р style="text-align:center">Если у Вас есть вопросы либо предложения, напишите нам:</р>

Любая форма начинается тегом <form> и завершается тегом </form>. HTML документ может содержать внутри себя несколько форм, но они не обязаны находиться одна внутри другой. Текст и теги могут располагаться внутри формы без ограничений. Открывающий тег <form> должен содержать неотклонимый атрибут action, который определяет, где находится программа-обработчик либо адресок сервера, который будет обрабатывать форму. Потому что сообщение, написанное гостем web сайта, будет отчаливать по электрической почте, то значение этого атрибута должно содержать адресок E-mail обладателя web сайта, к примеру: action="mailto: sd@narod.ru".

Очередной атрибут тега <form> - method - определяет, каким образом либо при помощи какого протокола данные из формы будут переданы программе-обработчику. Потому что будет применена электрическая почта, то значение этого атрибута должно быть post: method="post". Таким способом, элемент <form>…</form> будет иметь приблизительно таковой вид:

</form>

Добавьте в документе list.html пустую строчку перед закрывающим тегом </body> и введите обозначенный код, вставив в качестве значения атрибута action заместо sd@narod.ru собственный адресок электрической почты.

Сейчас нам необходимо поместить в форме многострочное текстовое поле для ввода сообщения. Для этого служат теги <textarea></textarea>. В качестве атрибутов открывающего тега <textarea> нужно указать количество строк (rows) и колонок (cols), также имя (name), под которым содержимое текстового поля ввода будет передано программе-обработчику, к примеру:

Таковой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 знаков. Введенный гостем web сайта текст будет передан обработчику под именованием Comments (Комментарии). Чтоб центрировать текстовое поле относительно краев странички, следует также использовать стили.

Воткните пустую строчку перед закрывающим тегом </form> и введите последующий элемент, создающий текстовое поле:

Пуск процесса обработка данных на форме

Чтоб запустить процесс передачи данных из формы обработчику, нужен некий отран управления, к примеру, кнопка. Сделать таковой отран управления совсем не сложно при помощи одиночного тега <input> с атрибутом type. Если необходимо сделать кнопку, то значение этого атрибута должно быть submit (передать):

Таковой элемент по умолчанию выведет на web страничке кнопку с надписью Submit Query (Передать запрос). Чтоб поменять надпись на кнопке, довольно включить в данный тег атрибут value с необходимым для вас значением, к примеру: value="Выслать". Напомним, что значения атрибутов, в каких употребляются знаки, хорошие от латинских, следует непременно заключать в кавычки.

Воткните пустую строчку перед закрывающим тегом </form> и введите в ней последующий код, создающий кнопку в новеньком абзаце и разглаживающий ее по центру странички:

<р style="text-align:center;"><input type="submit" value=''Выслать"></p>

В итоге элемент <form>…</form> должен принять последующий вид:

</form>

Напомним снова, что в качестве значения атрибута action, в открывающем теге <form> следует указать ваш адресок электрической почты.

Проверка работы формы

Работу формы можно проверить.

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

Введите в текстовом поле несколько слов.

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

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

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