Практическая работа № 9.
Тема: Управляющие элементы (формы) на web-страницах
Задание: Организовать размещение управляющих элементов на web-странице. Создать страницу с управляющими элементами по образцу.
Указания к выполнению работы:
1. Создайте новую страницу. Введите заголовок страницы.
2. Форма помещается в контейнер <FORM>…</FORM>.
3. Для создания текстового поля используется тег<INPUT type="text" name="tb1" size="30">, где атрибутtypeзадаёт тип управляющего элемента, в данном случае это текстовое поле, атрибутnameявляется обязательным для идентификации данных поля при обработке, атрибутsizeзадаёт количество символов в текстовом поле, необязательный атрибутvalueуказывает, что браузер должен поместить в поле текста при начальной загрузке страницы.
4. Для создания многострочного текстового поля (текстовой области) используется контейнер <TEXTAREA name="ta1" rows="4" cols="30"> …</TEXTAREA>.
Здесь атрибут rows=…задаёт количество строк, атрибутcols=…задаёт количество символов в строке. В приведённом примере будет задана тестовая область из 4-х строк по 30 символов в строке.
5. Для задания в форме переключателей используется тег <INPUT type="radio" name= "r1" value="v1">. Здесь обязательными являются атрибуты:nameзадающий имя группы переключателей (то есть в одной группе все переключатели имеют одинаковое значение атрибутаname) иvalue, который идентифицирует выбранный переключатель в группе при передаче серверу. Также можно использовать атрибутchecked (без значения), который будет указывать, что данный переключатель отмечен по умолчанию.
6. Для создания переключателей в форме используется конструкция, описанная в п.5, за исключением того, что значение атрибута typeустанавливается какcheckbox. Например:<INPUT type="checkbox" name= "r1" value="v1" checked>
7. Для создания раскрывающегося списка используется контейнер <SELECT>…</SELECT> . Обязательным атрибутом являетсяname – имя списка для передачи серверу, и необязательным атрибутомsize– количество пунктов, отображаемых в основном окне списка. Каждый пункт списка помещается в контейнер <OPTION> ...</OPTION>. Для отметки пункта списка, выбранного по умолчанию, используется атрибутselected(без значения) тега <OPTION>. Например:
<SELECT name=s1 size=1>
<OPTION> Первый пункт </OPTION>
<OPTION > Второй пункт </OPTION>
<OPTION selected> Выберите пункт списка </OPTION>
</SELECT>
Практическая работа № 10.
Тема: Использование Java-script на web страницах.
Задание:
Указание к выполнению работы.
1. Откройте страницу, созданную в предыдущей работе.
2. Введите заголовок документа текстом заданного размера и цвета.. Для этого в код страницы вставьте скрипт:
<script> document.write("<font color=red size=16pt> Это пример текста</font>")</script>
Обратите внимание на то, как стоят кавычки!
3. Организуйте ввод имени, фамилии и отчества при помощи окна сообщения с текстовой строкой. Для этого в форму, после того, как определены текстовые окна для имени фамилии и отчества вставьте скрипт:
<script>
s = prompt ("Введи своё имя"); anketa.tb2.value=s;
s = prompt ("Введи фамилию"); anketa.tb1.value=s;
s = prompt ("Введи отчество"); anketa.tb3.value=s;
</script>
3. Установите выбор цвета страницы при перестановке переключателей. Для этого рассмотрим задание функции newColor. Функции описываются в заголовке кода страницы в теге <script>.
function newColor(colorString){
document.bgColor=colorString
}
...
<FORM NAME="colors">
<INPUT TYPE="radio" NAME="color" VALUE="F0F8FF"
onClick="newColor(this.value)">Alice Blue
<INPUT TYPE="radio" NAME="color" VALUE="FF4500"
onClick="newColor(this.value)">Ochre
<INPUT TYPE="radio" NAME="color" VALUE="FFEFD5"
onClick="newColor(this.value)">Papaya Whip
</FORM>
4. Задайте переход по гиперссылке при выборе определённого пункта из раскрывающегося списка
<select onchange="window.location.href=this.options[this.selectedIndex].value" size="1" name="list1">
<option value="ссылка" selected="true">Выберите пункт списка...</option>
<option value="ссылка ">пункт </option>
<option value="ссылка ">пункт </option>
<option value="ссылка ">пункт </option>
</select>
5. Задайте отображение даты в документе. Для этого задайте функцию, указанную ниже, а потом вызовите её в любом месте своего документа