- •Html Введение
- •Создание html документов
- •Html заголовки
- •Html элементы
- •5.Html атрибуты
- •6.О важности заголовков
- •Пример 61
- •Пример 62
- •Пример 63
- •Пример 64
- •Пример 65
- •7.Разделение на абзацы
- •Пример 71
- •Пример 72
- •Пример 73
- •Пример 74
- •Пример 75
- •Пример 76
- •8.Оформление html документов с помощью css
- •Пример 81
- •9.Html гиперссылки
- •Пример 91
- •Пример 92
- •Пример 93
- •Пример 94
- •10.Добавление изображений в html документы
- •Пример 101
- •Пример 102
- •Пример 103
- •11.Таблицы
- •Пример 111
- •Пример 112
- •Пример 113
- •Пример 114
- •12. Списки
- •Пример 121
- •Пример 122
- •Пример 123
- •Пример 124
- •13. Html формы
- •Пример 131
- •Пример 132
- •Пример 133
- •Пример 134
- •Пример 135
- •Пример 136
- •Пример 137
- •Пример 138
- •Пример 139
- •Пример 1310
- •Пример 141
- •Пример 142
- •Пример 143
- •Пример 144
- •Пример 145
- •Пример 146
- •16. Секция head
- •17. Элемент script
- •18. Спецсимволы html
- •19.Что дальше?
13. Html формы
HTML формы могут содержать такие элементы ввода как:
Текстовые поля
Флажки
Радио-кнопки
Кнопки отправления и др.
Формы также могут содержать списки выбора, многострочные текстовые поля, метки и др.
Для того, чтобы создать форму в HTML используется элемент <form>.
Пример 131
<html>
<body>
<form>
<p>Введите Ваше имя:</p>
<input type='text' />
<p>Введите пароль: </p>
<input type='password' />
</form>
</body>
</html>
Элементы ввода
Элементы ввода используются для приема пользовательских данных.
Элементы ввода сильно отличаются друг от друга в зависимости от значения атрибута type.
Текстовое поле
<input type="text" /> определяет однострочное текстовое поле, в которое пользователь может вводить различную информацию.
Пример 132
<html>
<body>
<form>
<p> Введите ФИО в поля ниже: </p> <br />
Имя: <input type='text' name='firstname' /><br />
Фамилия: <input type='text' name='lastname' /><br />
Отчество: <input type='text' name='lastname' />
</form>
</body>
</html>
Обратите внимание: по умолчанию текстовое поле вмещает 20 знаков.
Поле пароля
<input type="password" /> определяет поле для ввода пароля. Содержимое вводимое в данное поле закрывается черными кружками позволяя вводить пароли даже при присутствии посторонних.
Пример 133
<html>
<body>
<form>
Введите пароль: <input type='password' name='pass' />
</form>
</body>
</html>
Флажок
<input type="checkbox" /> определяет флажок. Флажки позволяют пользователям выбирать несколько пунктов с предварительно заполненной информацией из группы.
Пример 134
<html>
<body>
<form>
<p> Как вы относитесь к полетам в космос? </p>
<input type='checkbox' name='space' value='1' /> Положительно, всегда хотел полететь в космос.<br />
<input type='checkbox' name='space' value='2' /> Безразлично, никогда не думал об этом серьезно. <br />
<input type='checkbox' name='space' value='3' /> Отрицательно, меня с детства отталкивают мысли о космосе. <br />
</form>
</body>
</html>
Радиокнопка
<input type="radio" /> определяет радиокнопку. Радиокнопки позволяют пользователям выбрать только один пункт с предварительно заполненной информацией из группы.
Обратите внимание: радиокнопки называются так потому что их поведение напоминает поведение кнопок старых радио, у которых только одна кнопка могла быть нажата одновременно.
Пример 135
<html>
<body>
<form>
<p>Укажите Ваш пол: </p>
<input type='radio' name='s' value='m' />Мужской<br />
<input type='radio' name='s' value='f' />Женский
</form>
</body>
</html>
Кнопка отправления
<input type="submit" /> определяет кнопку отправления. После нажатия на данную кнопку данные введенные пользователем будут отправлены на сервер.
Адрес, на который будут пересылаться данные формы указывается в атрибуте тэга form - action. Если данный атрибут отсутствует данные будут отправлены на текущую страницу.
Обратите внимание: обработка данных полученных сервером в результате отправки форм производиться с помощью серверных языков (таких как PHP или ASP) и поэтому в данном учебнике рассмотрена не будет.