Урок 7.2: Создание простой формы

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

Это делается при помощи парного тега <form>...</form>. Эти теги нужны для объединения полей формы в одно целое с последующей передачей данных серверу.

Но эти теги только как бы рамка формы.

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

Итак создадим простую форму содержащую поле для ввода имени и кнопки.

Пример создания простой формы.

<html>     <head>         <title>Создание простой формы</title>     </head>     <body>         <form>             Введите свое имя - <input />             </br><input value="Ok">         </form>      </body> </html>

Результат создания простой формы

Создание простой формы

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

Пример привязки формы к обработчику.

<html>     <head>         <title>Обработка данных в форме</title>         <script type="text/javascript">             function myform() {                 alert("Здраствуйте " + document.forms['form1'].name.value)             }         </script>     </head>     <body>         <form>             <p>Введите ваше имя: <input type="text"></p>             <p><input onClick="myform()" value="OK"></p>         </form>     </body> </html>

Результат привязки формы к обработчику

Привязка обработчика к форме

При вводе в поле имени и нажатии на кнопку "Ок" появляется сообщение с приветствием.

Обратите внимание - в коде, из примера, добавился не только код JavaScript, но и атрибуты тегов формы. Это необходимо для обработки формы. Что бы скриптовый язык JavaScript мог понять из каких полей, какие данные и как обрабатывать.

Более подробную информацию о обработках форм можно узнать в разделах Javascript и PHP.

Список уроков