|
После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть? |
Инспектор
Вы можете этот курс.
Опубликован: 19.03.2007 | Уровень: для всех | Доступ: платный
Лекция 11:
Создание форм
Атрибут method
Атрибут method определяет способ, которым данные формы передаются на страницу, определенную в атрибуте action. Двумя возможными значениями являются get и post, первый из которых используется по умолчанию. Когда используется метод get, данные из формы добавляются к URL из атрибута action ; когда используется метод post, информация передается на страницу action, как отдельный поток данных. Эти методы более подробно будут рассмотрены далее.
В данный момент необходимо закодировать базовый тег <form>, чтобы разместить в нем элементы управления. Минимальная компоновка страницы, содержащей форму, показана ниже, исключая (в данный момент) вопросы в отношении отправки данных формы для обработки.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Страница формы </title> </head> <body> <form action="url"> ...элементы управления формы </form> </body> </html>Листинг 11.2. Общая компоновка страницы для формы
Локальная обработка данных
Основное назначение форм состоит в отправке введенных или выбранных данных на серверную страницу Web для обработки. Для этого предназначен атрибут action тега <form> - для определения страницы, на которую посылается информация.
Однако можно использовать элементы управления формы независимо от отправки формы, когда сценарии обработки данных являются сценариями браузера, расположенными на той же самой странице Web. В этом случае даже не требуется использовать на странице тег <form>.
Отдельные элементы управления обрабатываются непосредственно сценариями браузера без отправки формы. Небольшой пример с полем ввода на странице показан ниже. Если ввести имя в поле ввода и щелкнуть на кнопке "Submit", то введенное имя выводится как часть выводимой строки текста.
Код элементов управления и сценарий обработки показаны ниже. Понимание сценария на данном этапе не требуется. Однако, отметим, что текстовое поле, кнопка, запускающая сценарий, и тег <span>, который служит в качестве получателя вывода сценария, не находятся внутри тега <form>. Тег <form> не требуется, так как введенная в текстовое поле информация не передается на сервер для обработки. Все элементы управления доступны непосредственно сценарию на странице.
<!-- Сценарий браузера -->
<script type="text/javascript">
function Get_Name()
{
var Input = document.getElementById("Name")
var Output = document.getElementById("Output")
Output.innerHTML = "Your name is <b>" + Input.value + "</b>."
}
</script>
<!-- Код XHTML -->
<div>
Enter your name: <input id="Name" type="text"/>
<input type="button" value="Submit" onclick="Get_Name()"/><br/>
<span id="Output" style="color:red"></span>
</div>
Листинг
11.3.
Код сценария на странице для обработки введенных данных
Если обработка элементов управления формы проводится исключительно сценариями браузера (форма не отправляется для обработки на сервере), то тег <form> не требуется. Однако, можно, включить тег <form action="">, чтобы указать на локальную обработку и для согласованности в кодировании элементов управления формы.
Элементы управления textbox
Элементы управления текстовым вводом пользователя требуют, чтобы пользователь ввел информацию с клавиатуры в области ввода. Можно выбирать текстовые поля для одной строки или для нескольких строк с прокруткой.
Тег <input/>
Наиболее распространенным типом элементов управления формы является текстовое поле ( textbox ). Этот элемент управления предоставляет стандартное поле для ввода текста, в которое вводится информация. Текстовое поле ввода создается с помощью тега <input/> следующим образом.
<input type="text|password"
id="id"
size="n"
maxlength="n"
value="text"
Исключен:
name="name"
/>
Листинг
11.4.
Общий формат тега <input type="text|password"/>
Атрибут type
Тег <input/> содержит атрибут type для определения его как текстового поля ввода. Существует два различных типа элементов управления текстовым вводом. Если type="text" или если атрибут type не определен, то тип поля является стандартным текстовым полем для ввода информации. Если type="password", то создается аналогичный элемент управления, но вводимые символы выводятся в поле как символы маркеры, чтобы скрыть вводимую информацию. Тег <input/> является линейным, требующим включения в блочный тег.
Два типа элементов управления показаны ниже, вместе с кодом для их создания. Элементы управления выводятся в таблице без границ, чтобы выровнять их и приглашающие метки. В первом поле при вводе будут видны вводимые символы, а второе поле будет показывать только маркеры (например, звездочки).
<form action="ThisPage.htm"> <p>Please enter the following information:</p> <table> <tr> <td>Name: </td> <td><input id="TheName" type="text"/></td> </tr> <tr> <td>Password: </td> <td><input id="ThePassword" type="password"/></td> </tr> </table> </form>Листинг 11.5. Код для вывода различных вариантов тега <input type="text|password"/>
Елена Сапегова
Владислав Нагорный
|
Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки? Спасибо! |
Алксей Чебукин
| Украина, г. Мелитополь, Таврийский Государственный Агротехнологический университет, 2009 |