Главная Обратная связь

Дисциплины:

Архитектура (936)
Биология (6393)
География (744)
История (25)
Компьютеры (1497)
Кулинария (2184)
Культура (3938)
Литература (5778)
Математика (5918)
Медицина (9278)
Механика (2776)
Образование (13883)
Политика (26404)
Правоведение (321)
Психология (56518)
Религия (1833)
Социология (23400)
Спорт (2350)
Строительство (17942)
Технология (5741)
Транспорт (14634)
Физика (1043)
Философия (440)
Финансы (17336)
Химия (4931)
Экология (6055)
Экономика (9200)
Электроника (7621)






Текстовое поле для ввода пароля



Методические указания и задания

ДЛЯ ПРОВЕДЕНИЯ ПРАКТИЧЕСКОЙ РАБОТЫ №8 ПО ДИСЦИПЛИНЕ

«ПРОГРАММНЫЕ СРЕДСТВА СОЗДАНИЯ ИНТЕРНЕТ-ПРИЛОЖЕНИЯ»,

специальность 2 – 40 01 01 «Программное обеспечение информационных технологий».

 

Тема: Создание форм на HTML-странице и изменение свойств элементов формы.

Цель:Сформироватьумениясоздавать формы на HTML-странице.

Оборудование: ПК, ОС Windows XP, браузер.

Время выполнения:2 часа.

Методические указания

 

Формы дают возможность пользователям вводить информацию. HHHHHHtml-формы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет, т.к. это язык разметки, а не программирования. Для обработки информации может использоваться язык javascript. В html форма задается тегами <form>…</form>. Все остальные элементы формы располагаются между этими тегами. У тега <form> есть несколько параметров:

name - имя формы. Необходимо, если на странице несколько форм;

action - определяет URL-адрес, по которому будет отправлена введенная информация;

method - определяет способ отправки информации;

target - указывает имя окна, в котором будут отображаться результаты обработки отправленной формы.

 

<form name="forma1">

</form>

 

Текстовое поле

 

Простое однострочное текстовое поле, в которое можно вводить и редактировать текст. Задается тегом <input>. Пример:

<form name="forma1">

<input type="text" name="text1" size="20"

maxlength="50" value="Введите текст">

</form>

 

Результат:

 

Параметры:

name - имя элемента;

– type - тип элемента (в данном случае - text);

size - размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться;

maxlength - максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным;

value - текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым;

disabled - блокирует поле от любых изменений;

readonly - делает поле доступным только для чтения.

 

<form name="forma1">

<input type="text" name="text1" size="20"



maxlength="50" value="неактивное поле" disabled>

<input type="text" name="text1" size="20"

maxlength="50" value="только для чтения" readonly>

</form>

 

Результат:

 

Текстовое поле для ввода пароля

 

Это такое же текстовое поле, как и предыдущий элемент. Разница только в том, что вводимый текст не отображается, вместо него появляются специальные символы, например звездочки. Чаще всего используется при вводе паролей. Все параметры такие же, как у простого текстового поля, кроме параметра type="password". Пример:

 

<form name="forma1">

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

<input type="password" name="text1" size="20"

maxlength="50">

</form>

 

Результат:

 

Флажки (Checkbox)

 

Они задаются все тем же тегом <input>, причем один тег задает один флажок. Нужно четыре флажка, придется четыре раза писать input. Пример:

 

<form name="forma1">

Какими языками вы владеете:<br>

<input type="checkbox" name="lan1" value="english" checked> английский

<input type="checkbox" name="lan2" value="german"> немецкий

<input type="checkbox" name="lan3" value="spanish"> испанский

<input type="checkbox" name="lan4" value="french"> французский

</form>

 

Результат:

 

Рассмотрим его параметры:

type - тип элемента (в данном случае - checkbox);

name - имя элемента, указывает программе обработчику формы, выбранный пункт выбрал пользователь;



value - значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь. В нашем примере выбран пункт английский, следовательно, программа-обработчик получит: lan1="english",

checked - им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

 

Переключатели

 

В отличии от флажков, можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type="radio", все остальные такие же, как у флажков. Пример:

 

<form name="forma1">

Укажите ваш пол:<br>

<input type="radio" name="sex" value="man" checked> мужской

<input type="radio" name="sex" value="woman"> женский

</form>

 

Результат:

 

Кнопки

 

Существует четыре вида кнопок:

а) submit – кнопка отправки содержимого формы web-серверу. Ее параметры:

type="submit" - тип кнопки;

name - имя кнопки;

value - надпись на кнопке.

б) image – графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры:

type="image" - тип графической кнопки,

name - имя кнопки,

src - адрес картинки для кнопки.

в) reset - кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:

type="reset" - тип кнопки очищения,

name - имя кнопки,

value - надпись на кнопке.

г) button - произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет. Ее параметры:

type="button" - тип произвольной кнопки,

name - имя кнопки,

value - надпись на кнопке.

onclick - указывает, что делать при щелчке по кнопке. Вообще, у этого типа кнопок есть и другие события (например, двойной щелчок), но здесь мы не будем их рассматривать.

 

Если на форме несколько кнопок, то они должны иметь разные названия. Пример кода:

<form name="forma1">

<input type="submit" name="submit" value="Отправить">

<input type="image" name="but_img" src="but.gif">

<input type="reset" name="reset" value="Очистить">

<input type="button" name="button" value="Отправить">

</form>

 

Результат:

 

Кнопки можно задавать и по другому, при помощи тегов <button>… </button>. Возможности у таких кнопок несколько шире, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:

type - тип кнопки, может принимать значения:

reset - кнопка очистки формы,

submit - кнопка отправки данных,

button - кнопка произвольного действия.

name - имя кнопки,

value - надпись на кнопке.

 

Пример кода:

<form name="forma1">

<button name="submit" type="submit">

<img src="mail.gif" align="absmiddle">

<font size="4"> Отправить </font>

</button>

</form>

 

Результат:

 

Поле для выбора файлов

 

Поле для ввода имени файла, сопровождаемое кнопкой Browse (Обзор), при щелчке по которой открывается окно просмотра дерева папок компьютера, где можно выбрать нужный файл. Выбранный файл присоединяется к содержимому формы при отправке на сервер. Пример:

 

<form name="forma1">

<input type="file" name="load" size="50">

</form>

 

Результат:

 


Эта страница нарушает авторские права

allrefrs.ru - 2019 год. Все права принадлежат их авторам!