Практическая работа № 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. Задайте отображение даты в документе. Для этого задайте функцию, указанную ниже, а потом вызовите её в любом месте своего документа
