HTML формы используются для приема данных введенных пользователем и последующей передачи их на сервер.
ТвитнутьHTML формы могут содержать такие элементы ввода как:
Формы также могут содержать списки выбора, многострочные текстовые поля, метки и др.
Для того, чтобы создать форму в HTML используется элемент <form>.
Пример
<form> <p>Введите ваше имя:</p> <input type="text" /> <p>Введите пароль: </p> <input type="password" /> </form>
Элементы ввода используются для приема пользовательских данных.
Элементы ввода сильно отличаются друг от друга в зависимости от значения атрибута type.
<input type="text" /> определяет однострочное текстовое поле, в которое пользователь может вводить различную информацию.
Пример
<form> <p> Введите ФИО в поля ниже: </p> <br /> Имя: <input type="text" name="firstname" /><br /> Фамилия: <input type="text" name="lastname" /><br /> Отчество: <input type="text" name="lastname" /> </form>
Обратите внимание: по умолчанию текстовое поле вмещает 20 знаков.
<input type="password" /> определяет поле для ввода пароля. Содержимое вводимое в данное поле закрывается черными кружками позволяя вводить пароли даже в присутствии посторонних.
<input type="checkbox" /> определяет флажок. Флажки позволяют пользователям выбирать несколько пунктов с предварительно заполненной информацией из группы.
Пример
<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>
<input type="radio" /> определяет радио кнопку. Радио кнопки позволяют пользователям выбрать только один пункт с предварительно заполненной информацией из группы.
Обратите внимание: радио-кнопки называются так потому что их поведение напоминает поведение кнопок старых радио, у которых только одна кнопка могла быть нажата одновременно.
Пример
<form> <p> Укажите Ваш пол: </p> <input type="radio" name="s" value="m" /> Мужской<br /> <input type="radio" name="s" value="f" /> Женский </form>
<input type="submit" /> определяет кнопку отправления. После нажатия на данную кнопку данные введенные пользователем будут отправлены на сервер.
Адрес, на который будут пересылаться данные формы указывается в атрибуте тэга form - action. Если данный атрибут отсутствует данные будут отправлены на текущую страницу.
Обратите внимание: обработка данных полученных сервером в результате отправки форм будет производиться с помощью серверных языков (таких как PHP, Ruby или Python) и поэтому в данном учебнике рассмотрена не будет.
Пример
<form name="input" action="form.php" method="get"> Введите Ваше имя: <input type="text" name="name" /> <input type="submit" value="Отправить" /> </form>
Для создания выпадающих списков используется тэг <select>, а элементы выпадающего списка определяются с помощью тэга <option>.
Обратите внимание: пользователи не любят вводить данные вручную, поэтому если Вы можете заменить обычное текстовое поля выпадающим списком, радио кнопками, или флажками обязательно сделайте это.
Пример
<p> Выберите ваш пол </p> <form> <select name="sex" > <option value="m"> Мужской </option> <option value="f"> Женский </option> </select> </form>
С помощью атрибута multiple Вы можете указать, что в выпадающем списке могут быть выбраны одновременно несколько элементов.
Пример
<p>В данном списке может быть одновременно выбрано несколько значений (для этого зажмите клавишу Ctrl и щелкайте на необходимые элементы): </p> <form> <select name='city' multiple='multiple'> <option value='london'>Лондон</option> <option value='moscow'>Москва</option> <option value='newyork'>Нью Йорк</option> </select> </form>
Для того, чтобы озаглавить группу элементов формы, Вы должны с помощью тэга <fieldset> сгруппировать желаемую часть формы и затем с помощью тэга <legend> установить желаемое заглавие.
Пример
<form> <fieldset> <legend>Данные о пользователе</legend> Имя: <br /><input type="text" name="firstname" /><br /> Фамилия:<br /> <input type="text" name="lastname" /><br /> Отчество: <br /><input type="text" name="lastname" /><br /> <p>Укажите Ваш пол:</p> <input type="radio" name="s" value="m" /> Мужской<br /> <input type="radio" name="s" value="f" /> Женский </fieldset> <fieldset> <legend> Анкета: </legend> <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 /> </fieldset> </form>
Задание 1 исправьте ошибки в коде. После исправления ошибок форма должна корректно отображаться в редакторе:
Пример
<html> <body> <form> <fieldsit> <legend>Поле авторизации Логин: <br /><input type='password' name='login' /><br /> Пароль:<br /> <input type='text' name='pas' /><br /><br /> <input type='chickbox' name='session' value='1' /> Длинная сессия <input type='chickbox' name='session' value='2' /> Короткая сессия<br /><br /> <input type='buton' value="Авторизироваться" /> </fieldsit> </form> </body> </html>
