КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Поля ввода
Формы
План
Система оценивания самостоятельной работы
Часть В
- Решите уравнение
- Решите уравнение
- Решите уравнение
- Решите уравнение
. В ответе укажите корень уравнения или сумму корней, если их несколько. - Решите уравнение:
. В ответе укажите корень уравнения или сумму корней, если их несколько.
Для оценивания результатов выполнения работ применяются традиционные отметки «2», «3», «4», «5» и рейтинг от 0 до 13 баллов.
Задания первой части оцениваются в 1 балл каждое.
Каждое задание второй части оценивается в два балла.
Схема перевода рейтинга в школьную оценку:
| «2» | «3» | «4» | «5» | |
| Рейтинг | 0 – 6 | 7 – 8 | 9 – 11 | 12 – 13 |
1. Елемент FORM
2. Елемент INPUT
3. Елемент BUTTON
Задание:
Вариант 1. В распечатанном варианте самостоятельной работы подчеркнуть основной материал, ответить на контрольные вопросы. Скрепить листы. Подписать работу
Вариант 2. Составить опорный конспект в тетради для СР. Ответить на контрольные вопросы.
Форма является областью, которая может содержать элементы, позволяющие пользователю вводить информацию (такие как текстовые поля, поля многострочного текста, раскрывающиеся меню, переключатели, флажки, и т.д.).
Форма определяется с помощью тегов <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) определяет однострочное поле ввода и используется, когда необходимо, чтобы пользователь ввел в форму данные в произвольной форме но ограниченные по объему (слова, словосочетания, числа и т.д.).
В большинстве браузеров по умолчанию ширина текстового поля равна 20 символам. Для изменения этого значения используется атрибут size. Здесь необходимо отметить, что атрибут size ограничивает только видимую область ввода данных, а не длину вводимой строки. Для этой цели используется атрибут maxlength.
Необходимо отметить, что применение атрибутов для различных типов полей вывода и управления может отличаться. Так, например, атрибут size для текстовых полей ввода (type="text" или type="password") указывает максимальное количество символов, отображаемых в поле, а для прочих элементов – занимаемый по горизонтали размер в пикселях.
Пример: Форма для ввода текста <html> <body><form> Имя: <input type="text" name="firstname"> <br> Фамилия: <input type="text" name="lastname"></form></body> </html>
Пример: Ограничение размера поля и длинны вводимого текста
<html> <body><form> Имя: <input type="text" name="firstname" size="10" maxlength="3"> <br> Фамилия: <input type="text" name="lastname"></form></body> </html>
Кроме того, при использовании текстовых полей возможно задать значения по умолчанию. Для этого используется атрибут value.:
<html> <body>
<form> Имя:<input type="text" name="firstname" value="Билл"> <br> Фамилия:<input type="text" name="lastname" value="Гейтс"></form> </body> </html> 
Поле пароля (type=password) создает защищенное поле ввода, которое дает возможность пользователю, заполняющему форму ввести текст, но в отличие от обычного текстового поля, вводимые данные при отображении на мониторе заменяются звездочками или точками. Необходимо обратить внимание, что хотя значение пароля и задано по умолчанию, при отображении браузер выводит вместо символов звездочки.
Переключатели или радиокнопки (type=radio) определяют поля выбора одного значения из нескольких доступных. Поля этого типа часто используются в диалоговых окнах. Для каждой позиции переключателя создается свой тег <input type=radio>. Группируются переключатели при помощи одинакового имени, задаваемого атрибутом name.
Необходимо отметить, что в отличие от текстового поля и поля пароля атрибут value задает значение, которое будет передано серверу для дальнейшей обработки в случае выбора данного переключателя. Для выбора по умолчанию одного из возможных значений группы переключателей используется атрибут checked.
<html> <body><form>Укажите Ваш пол: <br><input type="radio" name="sex" value="male" checked="checked"> мужчина<br><input type="radio" name="sex" value="female"> женщина</form> </body> </html> Флажки (type=checkbox) используются, когда необходимо, чтобы пользователь выбрал один или несколько вариантов из ограниченного числа вариантов выбора. Флажки в форме не зависят друг от друга, их можно установить или сбросить в любой комбинации. Для каждого флажка необходимо задать свое уникальное имя при помощи атрибута name. Создание двух флажков с одним именем не вызовет ошибки при отображении формы, но не позволит сценарию обработки на сервере корректно обработать передаваемые с формы данные.
При помощи атрибута checked можно установить, какие из флажков будут выбраны по умолчанию при загрузке страницы. Отличие от переключателей заключается только в том, что для флажков можно отметить сразу несколько вариантов.
При отправке данных формы с флажками на сервер выбранным флажкам присваивается значение по умолчанию "on". Как правило, этого достаточно для корректной обработки данных, но в некоторых случаях удобнее задать каждому флажку свое значение при помощи атрибута value.
<input type="checkbox" name="printer" value="Принтер">Командная кнопка отправки (type=submit) используется для выполнения пересылки данных формы на сервер. Метод отправки и адрес файла, обрабатывающего полученную информацию задаются в теге <form> при помощи атрибутов method и action. Командная кнопка сброса (type=reset) возвращает форму к исходному состоянию (очищает форму). При этом данные не передаются.
В следующем примере показана форма поиска с двумя кнопками отправки и сброса.
<html> <body><form name="input" action="html_form_action.asp" method="get">Найти:
<input type="text" name="search" size=25><br><input type="submit"><input type="reset"></form> </body> </html>
Если ввести в текстовое поле какие-то символы и нажать кнопку "Подача запроса", то введенная информация будет послана на страницу с именем "html_form_action.asp". При нажатии на кнопку "Сброс" текстовое поле очистится.
Надписи на кнопках "Подача запроса" и "Сброс" установлены по умолчанию. Для их изменения необходимо использовать атрибут value.
Кроме кнопок отправки и сброса существует также возможность добавлять пользовательские кнопки (type=button), которые могут использоваться для выполнения процедур (скриптов) непосредственно на Web-странице.
В отличие от текстового поля текстовая область позволяет вводить многострочный текст большого объема. Такие области часто используются при вводе сообщений, комментариев.
Текстовая область описывается при помощи тегов <textarea> </textarea>, между которыми можно разместить предварительно отформатированный стандартный текст. Атрибуты cols и rows задают размер видимой области текстового поля.
<html> <body>
<textarea rows="7" cols="30">В данном примере мы создали текстовую область с шириной в 30 символов и высотой в 7 строк.Заданное значение высоты не ограничивает общий объем вводимого текста, а влияет только на размер отображаемой на экране текстовой области.Для просмотра всего текста необходимо воспользоваться полосой прокрутки.</textarea></body> </html> Пример: Использование форм для динамического формирования нового окна.
<head>
<script>
var f=0, s=0, n=1;
function start()
{
myWin=window.open('','Чек', '');
myWin.document.open();
myWin.document.write('<h3><table width ="700px" border="2px">');
myWin.document.write('<caption> Чек </caption>');
myWin.document.write('<tr>');
myWin.document.write('<th width="50px"> N </th>'); n++;
myWin.document.write('<th width="300px"> Товар </th>');
myWin.document.write('<th width="100px"> Количество </th>');
myWin.document.write('<th width="100px"> Цена </th>');
myWin.document.write('<th width="150px"> Стоимость </th>');
myWin.document.write('</tr>');
myWin.document.write('</table></h3>');
f=1;
}
function add_string()
{
if (f==1)
{ myWin.document.open();
myWin.document.write('<h3><table width ="700px" border="2px">');
myWin.document.write('<tr>');
myWin.document.write('<td width="50px">'+n+'</td>'); n++;
myWin.document.write('<td width="300px">'+document.f.t.value+'</td>');
myWin.document.write('<td width="100px">'+document.f.k.value+'</td>');
myWin.document.write('<td width="100px">'+document.f.c.value+'</td>');
myWin.document.write('<td width="150px">'+document.f.k.value*document.f.c.value+'</td>');
myWin.document.write('</tr>');
s=s+ document.f.k.value*document.f.c.value;
document.f.k.value='';document.f.c.value=''; document.f.t.value='';
myWin.document.write('</table></h3>');
}
else alert ('Формирование чека не начато!');
}
function finish()
{
if (f==1)
{ myWin.document.open();
myWin.document.write('<h3><table width ="700px" border="2px">');
myWin.document.write('<caption> <h2>Сумма товаров: ' + s + '</h2> </caption>');
myWin.document.write('</table></h3>');
myWin.focus();
}
else alert ('Формирование чека не начато!');
}
</script></head>
<body>
<h1>Рассчет чека на покупку</h1>
<form name=f>
<h3>Введите наименование товара: <input name=t size=20> <br>
Введите количество товара: <input name=k size=5> <br>
Введите стоимость одной единицы: <input name=c size=5> <br>
<input type=button value="Начать" onClick="start();">
<input type=button value="Добавить строку" onClick="add_string();">
<input type=button value="Рассчитать" onClick="finish();">
</h3> </form>
</body>
Контрольные вопросы
1. В чем отличие кнопок submit и reset?
2. Каково отличие текстового поля и текстовой области?
|
Дата добавления: 2015-07-13; Просмотров: 810; Нарушение авторских прав?; Мы поможем в написании вашей работы!