Практическая работа № 5
Тема «Передача параметров PHP-программ.
HTML-форма»
Цели работы:
познакомиться с создание HTML-формы;
научиться использовать элементы HTML-формы.
Тег FORM
HTML-форма предназначена для передачи введенных пользователем параметров PHP-сценарию. html-формы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет (это все-таки язык разметки, а не программирования). Для обработки информации используются такие языки, как javascript, php и другие.
Форма описывается с помощью тега FORM:
<FORM параметры>
<элементы формы>
</FORM>
Параметр Описание
action обязательный параметр задает сценарий, которому форма передает параметры. Если форма служит для ввода данных, предназначенных для обработки Web-сценарием, то в качестве значения этого атрибута указывают «пустой» интернет-адрес #.
method
обязательный параметр определяет метод передачи параметров (GET или POST)
name имя формы, необходимо, если на странице несколько форм
enctype тип кодирования данных формы. Он необходим для передачи файлов. Для этого необходимо установить значение multipart/form-data параметра enctype.
target определяет окно, в котором будет загружаться обработчик формы (сценарий, указанный в параметре action):
- _blank – открывает страницу в новом окне браузера;
- _self – открывает страницу в текущем окне;
- _parent – открывает страницу во фрейме-родителе;
- _top – игнорирует все фреймы и открывает страницу в новом окне браузере; если фреймов нет, то данный параметр работает как _self.
Элементы формы
Поле ввода
Простое однострочное текстовое поле, в которое можно вводить и редактировать текст. Задается тегом <input>:
<input параметры >
Параметры:
type – задает тип текстового поля:
text – обычный текст;
hidde – скрытое поле;
password – поле для ввода пароля.
name – имя текстового поля;
value – значение по умолчанию;
size - размер текстового поля;
maxlength - максимальная длина строки, которую можно ввести в поле;
disabled - блокирует поле от любых изменений;
readonly - делает поле доступным только для чтения.
Задание 1. Поле ввода
1. Создать в блокноте документ FORM_1_1.html, следующего содержания:
<html>
<head>
<title> Работа с формой
</title>
</head>
<body>
<form action="#"> <!-- пустой интернет адрес -->
Введите ваше имя <input type = text name=”login”>
</form>
</body>
</html>
2. Изменить код файла FORM_1_2.html:
<form action="#">
Введите ваше имя <input type = text name=”login”>
<input type=submit value=ok name=send> <!— добавляет кнопку submit с именем send для подтверждения ввода данных -->
</form>
Поле ввода пароля
3. Изменить код файла FORM_1_3.html:
<form action="#">
Введите ваше имя <input type = text name=”login”>
<br>
Введите пароль <input type = password name=”password”>
<input type=submit value=ok name=send>
</form>
Поле ввода многострочного текста
4. Изменить код файла FORM_1_4.html:
<form action="#">
Введите ваше имя <input type = text name=”login”>
<br>
Введите пароль <input type = password name=”password”>
<br>
Введите данные о себе <input type = textarea name=”text”>
<input type=submit value=ok name=send>
</form>
Переключатели
Переключатели бывают независимыми (checkbox) и зависимыми (radio).
type = checkbox или type = radio
Параметры для переключателей:
name – имя переключателя;
value – значение переключателя;
checked – переключатель активен.
Задание 2. Флажок (радио кнопка)
1. Создать в блокноте документ FORM_2_1.html, следующего содержания:
<form action="#">
<input type=radio value=male name=sex checked> Мужчина
<input type=radio value=female name=sex> Женщина
</form>
2. Создать в блокноте документ FORM_2_2.html, следующего содержания:
<form action="#">
<input type= checkbox name=updates checked>
Я хочу получать письма со списком обновлений Web-сайта
<br>
<input type= checkbox name=updates >
Я не хочу получать письма со списком обновлений Web-сайта
</form>
Кнопки
Кнопка при нажатии запускает на выполнение какое-либо действие.
Существует четыре вида кнопок:
1. type=submit - кнопка отправки содержимого формы web-серверу.
Параметры:
name - имя кнопки;
value - надпись на кнопке.
2. type=image - графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки.
Параметры:
name - имя кнопки;
src - адрес картинки для кнопки.
3. type=reset - кнопка, позволяющая восстановить все значения по умолчанию в форме.
Параметры:
name - имя кнопки;
value - надпись на кнопке.
4. type=button - произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет.
Параметры:
name - имя кнопки;
value - надпись на кнопке;
onclick - указывает, что делать при щелчке по кнопке.
Задание 3. Кнопки
1. Создать в блокноте документ FORM_3_1.html, следующего содержания:
<form action="#">
<input type= button name=find value=Искать! >
<input type= submit name=send value=OK >
<input type= reset value=Сброс >
</form>
2. Создать в блокноте документ FORM_3_1.html, следующего содержания:
<form action="#">
<input type="image" src="picture.png">
</form>
Списки
Списки бывают двух видов: обычный и раскрывающийся:
<SELECT параметры >
<теги <option>, создающие пункты списка>
</SELECT>
Параметры:
size – необязательный атрибут задает высоту списка в пунктах списка;
multiple – создает список, в котором можно выбрать сразу несколько пунктов.
Тег <option> создает отдельный пункт списка:
Параметры:
selected – делает данный пункт списка изначально выбранным;
disabled – делает данный пункт недоступным для выбора.
Задание 4. Списки
1. Создать в блокноте документ FORM_4_1.html, следующего содержания:
<form action="#">
Выполнить поиск по
<select name=search_in>
<option> названиям </option>
<option> ключевым словам </option>
<option selected> названиям и ключевым словам </option>
<option disabled> по фразам </option>
</select>
</form>
Группа списка
2. Создать в блокноте документ FORM_4_2.html, следующего содержания:
<form action="#">
Выполнить поиск по
<select name=search_in>
<optGroup label= ‘Быстрый поиск’>
<option> названиям </option>
<option> ключевым словам </option>
</ optGroup>
<option selected> названиям и ключевым словам </option>
<option disabled> по фразам </option>
</select>
</form>
Поле для файлов
Поле для ввода имени файла, сопровождаемое кнопкой Обзор, при щелчке по которой открывается окно просмотра дерева папок компьютера, где можно выбрать нужный файл. Выбранный файл присоединяется к содержимому формы при отправке на сервер.
3. Создать в блокноте документ FORM_4_3.html, следующего содержания:
<form action="#">
<input type="file" name="load" size="50"
</form>
Самостоятельная работа
Создать html файл examples5.php по образцу:
Форма регистрации
Имя
e-mail
Пароль
Повтор пароля
Пол мужской женский
Увлечения
Ваши пожелания
За выполненные задания:
Самостоятельная работа Баллы
Задание 1- Задание 4
Задание 1- Задание 5
Все задания + Сам. работа 3 балла
4 балла
5 баллов
Передача параметров PHP-программ. HTML-форма
Практическая работа по предмету «Web-программирование»