Материал: Web-дизайн. лабораторный практикум. Суворов А.П., Проценко В.Н
Здесь простейшая стандартная форма ввода анкетных данных:
Теперь определим скрипт input.php, который будет обрабатывать эту форму:
<?php
if(isset($_POST['firstname']) && isset($_POST['eduform']) && isset($_POST['comment']) && isset($_POST['courses']))
{
$name = htmlentities($_POST['firstname']); $eduform = htmlentities($_POST['eduform']); $hostel = "нет";
if(isset($_POST['hostel'])) $hostel = "да"; $comment = htmlentities($_POST['comment']); $courses = $_POST['courses'];
$output =" <html> <head>
<title>Анкетные данные</title> </head>
<body>
105
Вас зовут: $name<br />
Форма обучения: $eduform<br />
Требуется общежитие: $hostel<br /> Выбранные курсы:
<ul>";
foreach($courses as $item)
$output.="<li>" . htmlentities($item) . "</li>"; $output.="</ul></body></html>";
echo $output;
}
else
{
echo "Введенные данные некорректны";
}
?>
Откроем страницу с формой, введем все данные:
И отправим форму на сервер:
106
2.ЛАБОРАТОРНЫЕ РАБОТЫ
2.1.ЛАБОРАТОРНАЯ РАБОТА № 1
Тема: Основы html
Цель: познакомиться с основными тегами html
Задачи:
1)Научиться создавать html документ.
2)Научиться работать с таблицами в html.
Теоретические сведения:
HTML-документ – это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном, с подсветкой кода (Notepad++). HTML-документ имеет расширение .html.
Язык HTML – язык тегов. Теги описывают структуру HTML-документа. Теги оформляются угловыми скобками <имя тега>, между которыми прописывается имя тега.
Элемент <html> является корневым элементом документа. Все остальные элементы содержатся внутри тегов <html>...</html>. Все, что находится за пределами тегов, не воспринимается браузером как код HTML и никак им не обрабатывается.
Элемент <head>. Раздел <head>...</head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д.
107
Элемент <title>. Обязательным тегом раздела <head> является тег <title>. Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера.
Элемент <style>. Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в html-документе используется язык CSS.
Элемент <body>. В этом разделе располагается все содержимое документа.
HTML таблицы состоят из ячеек, образующихся при пересечении строк и столбцов.
Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы.
Основные теги для создания таблицы:
caption - заголовок для таблицы
col - указывает стилевую информацию для одной или более колонок таблицы
colgroup - указывает общую стилевую информацию для группы колонок в таблице
table - таблица
tbody - основное содержимое (средняя часть) таблицы
td - ячейка таблицы
tfoot - нижняя часть таблицы
th - заголовочная ячейка таблицы
thead - верхняя часть таблицы
tr - строка таблицы
Ход выполнения
Давайте создадим простую таблицу, которая состоит из 3 столбцов. HTML-код таблицы:
<table>
<tr>
<td>Столбец 1</td>
<td>Столбец 2</td>
<td>Столбец 3</td>
</tr>
</table>
108
На странице в браузере таблица будет выглядеть вот так:
По умолчанию браузер выводит таблицу с рамкой. Чтобы скрыть рамку таблицы, вам понадобится атрибут тега TABLE border. Пример таблицы без рамки:
<table
border="0">
<tr> <td>Столбец
1</td>
<td>Столбец
2</td>
<td>Столбец
3</td>
</tr>
</table>
На странице мы увидим нашу таблицу без рамки:
Атрибут border изменяет величину лишь внешней рамки нашей таблицы. Значение 0 как вы поняли делает её невидимой, а значение от 1 до 10 задает её толщину. Примедем пример таблицы с рамкой 6:
<table
border="6">
<tr> <td>Столбец
1</td>
<td>Столбец
2</td>
<td>Столбец
3</td>
</tr>
</table>
На выходе страницы получим такую таблицу:
109