|
Пожалуйста, уточните, кто автор курса Основы работы с HTML ? |
Инспектор
Вы можете этот курс.
Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 6:
Формы HTML и ввод данных
Аннотация: В этой лекции рассматриваются способы взаимодействия с пользователем и методы отправки пользовательских данных на web-сервер.
Формы HTML предназначены для организации взаимодействия с пользователем. Они позволяют вводить текст, осуществлять выбор из предложенных значений при помощи списков или кнопок. С помощью форм можно организовать интерактивный обмен информацией между Web-страницей и сервером. Можно определить формы как электронные бланки для заполнения различных данных таких как, например, имя, возраст, выбор страны проживания и других. Как правило, форма работает совместно с установленным на сервере сценарным приложением, обрабатывающим введенную информацию.
Примеры форм
Форма поиска
Одна из наиболее распространенных форм. Пользователь получает возможность ввести искомый запрос, определить область поиска и отправить запрос на сервер для обработки.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
<table border=1 bgcolor="#ddffdd">
<tr>
<td align="center">
<input type="text" name="search" size="50" value="Строка для поиска">
<input type="submit" value="Поиск">
<br>
<input type="checkbox" name="news">Искать в новостях
<input type="checkbox" name="arhive">Искать в архивах
</td>
</tr>
</table>
</form>
</body>
</html>Пример выполнения данного HTML-кода
Отправка e-mail из формы
Вторая форма представляет собой форму заказа электронной рассылки ИНТУИТА, заполненная форма отправляется по электронной почте для последующей обработки.
<html> <body> <form action="mailto:info@intuit.ru" method="post" enctype="text/plain"> <h3>Подписка на новостную рассылку ИНТУИТ</h3> Имя:<br> <input type="text" name="name" value="ваше имя" size="20"> <br> Mail:<br> <input type="text" name="mail" value="ваш е-mail" size="20"> <br> Я хочу получать: <br> <input type="checkbox" name="news"> Новости о жизни ИНТУИТА <br> <input type="checkbox" name="courses"> Информацию о новых курсах <br> <input type="checkbox" name="books"> Информацию о новых изданиях <br> Комментарий:<br> <textarea rows="5" cols="30"> </textarea> <hr> <input type="submit" value="Послать"> <input type="reset" value="Сброс"> </form> </body> </html>
Пример выполнения данного HTML-кода
Формы
Форма является областью, которая может содержать элементы, позволяющие пользователю вводить информацию (такие как текстовые поля, поля многострочного текста, раскрывающиеся меню, переключатели, флажки, и т.д.).
Форма определяется с помощью тегов <form> </form>, между которыми располагаются поля ввода, кнопки, а также все необходимые элементы оформления формы.
Тег <form> имеет ряд атрибутов, из которых необходимо выделить атрибуты action и method. Без этих атрибутов форма не сможет передать информацию от пользователя на сервер.
<form action="html_form_action.asp" method=get>
Атрибут Action указывает URL-адрес объекта, который должен получить данные формы.
Атрибут method может иметь два значения: get и post.
Значение атрибута method=get заставляет Web-браузер передать все данные формуляра по URL-адресу, заданному в action. При этом введенные при заполнении формы данные просто добавляются в адресную строку с использованием разделителя – знака вопроса. Этот метод удобен для небольших форм.
Значение атрибута method=post заставляет Web-браузер, прежде всего, связаться с сервером, обрабатывающим форму, и только после установки связи приступить к передаче данных, для обработки которых будут использоваться специальные сценарии.
Поля ввода
Большинство элементов ввода и управления в форме можно описать при помощи тега <input>, обязательными для которого являются атрибуты name (приписывает данному элементу ввода уникальное имя, использующееся для дальнейшей обработки формы) и type (определяет тип элемента управления или ввода).
Текстовые поля
Текстовое поле ( type=text ) определяет однострочное поле ввода и используется, когда необходимо, чтобы пользователь ввел в форму данные в произвольной форме, но ограниченные по объему (слова, словосочетания, числа и т.д.).Следующий пример демонстрирует простейшую форму для ввода имени и фамилии.
<html> <body> <form> Имя: <input type="text" name="firstname"> <br> Фамилия: <input type="text" name="lastname"> </form> </body> </html>
Пример выполнения данного HTML-кода
В большинстве браузеров по умолчанию ширина текстового поля равна 20 символам. Для изменения этого значения используется атрибут size. В следующем примере поле для ввода имени ограничено 10 символами.
<html> <body> <form> Имя: <input type="text" name="firstname" size="10"> <br> Фамилия: <input type="text" name="lastname"> </form> </body> </html>
Пример выполнения данного HTML-кода
Здесь необходимо отметить, что атрибут size ограничивает только видимую область ввода данных, а не длину вводимой строки. Для этой цели используется атрибут maxlength. В следующем примере максимальное количество символов для ввода имени ограничено тремя.
<html> <body> <form> Имя: <input type="text" name="firstname" maxlength="3"> <br> Фамилия: <input type="text" name="lastname"> </form> </body> </html>
Пример выполнения данного HTML-кода
При вводе в поле имени слова "Елена" форма воспримет только первые три символа имени.
Кроме того, при использовании текстовых полей возможно задать значения по умолчанию. Для этого используется атрибут value. Применение этого атрибута показано на следующем примере:
<html> <body> <form> Имя: <input type="text" name="firstname" value="Билл"> <br> Фамилия: <input type="text" name="lastname" value="Гейтс"> </form> </body> </html>
Пример выполнения данного HTML-кода
Необходимо отметить, что применение атрибутов для различных типов полей вывода и управления может отличаться. Так, например, атрибут size для текстовых полей ввода ( type="text" или type="password" ) указывает максимальное количество символов, отображаемых в поле, а для прочих элементов – занимаемый по горизонтали размер в пикселях.
