Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Лабораторные работы.Основы создания Web-докумен...docx
Скачиваний:
24
Добавлен:
18.09.2019
Размер:
450.51 Кб
Скачать
    1. Тип элемента password

Type= PASSWORD

Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*).

Задание 4.5: В первой строке определяется поле для ввода текста с именем. Во второй строке определяется окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов. Введенный пароль передается обработчику в переменной pw.

Наберите в редакторе «блокнот» текст следующего HTML-документа:

<html> 

<head> 

<title>пример 4_5 пароль</title> 

</head> 

<body> 

<p >

<form>

Введите имя:

<input type=text size=20 name=user > <br>

Введите пароль:

<input type=password name=pw size=20 maxlength=10>

</form>

</p>

</body>

 </html>

Сохраните документ с именем пример4_5.htm, откройте в браузере, должно появиться следующее отображение:

После заполнения пользователем:

    1. Тип элемента reset

Type = RESET

Определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name.

Задание 4.6: На экране формируется два поля для ввода текстовой информации и определяется кнопка Очистить поля формы, при нажатии на которую форма возвращается в исходное состояние.

Наберите в редакторе «блокнот» текст следующего HTML-документа:

<html> 

<head> 

<title>пример 4_6 кнопка очистить форму</title> 

</head> 

<body> 

<form>

код: <input name="cod"> <br>

телефон: <input name-"phone" size="6" maxlength="6" ><br>

<input type=reset value="очистить поля формы">

</form>

</body>

</html>

Сохраните документ с именем пример4_6.htm, откройте в браузере, должно появиться следующее отображение, где пользователем введены некоторые значения:

После нажатия на кнопку:

    1. Тип элемента submit

Type = SUBMIT

Браузер выводит данный элемент, как кнопку, при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>. Данный элемент используется при окончании ввода пользователем данных.

Вместе с атрибутом SUBMIT можно использовать следующие атрибуты:

  • NAME- наименование кнопки SUBMIT

  • VALUE - значение переменной поля в вашей форме

Задание 4.7: На экране формируется кнопка, при нажатии на которую происходит переход на файл с изображением.

Наберите в редакторе «блокнот» текст следующего HTML-документа:

<html> 

<head> 

<title>пример 4_7 создание кнопки</title> 

</head>

<form action="безмятежность.jpg">

<input type=submit value="Спокойствие, и только спокойствие..."> 

</form>

</body>

</html>

Сохраните документ с именем пример4_7.htm, откройте в браузере, должно появиться следующее отображение:

    1. Тип элемента image

Type= IMAGE

В зависимости от содержимого формы может оказаться так, что пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Для организации этого используется атрибут IMAGE.

После щелчка пользователя по изображению браузер сохраняет координаты соответствующей точки экрана и принимает всю форму.

Вместе с атрибутом IMAGE должны использоваться следующие атрибуты:

  • ALIGN – необязательный атрибут. указывает на положение изображения на экране

  • NAME – наименование поля ввода формы

  • SRC - URI файла- источника изображения

Задание 4.8

Наберите в редакторе «блокнот» текст следующего HTML-документа:

<html> 

<head> 

<title>пример 4_8 рисунок</title> 

</head> 

<body> 

<p >

Выберите точку на изображении

<form action="безмятежность.jpg">

<input type="image" name="point" src= "волк.jpg" ><br>

</p>

</body>

 </html>

Сохраните документ с именем пример4_8.htm, откройте в браузере. :