<p> Какой диск вы хотите получить? </p> <p> <input name="disc" type="radio" value="CD" checked> CD<br> <input name="disc" type="radio" value="DVD"> DVD </p>
<p> Какие обучающие курсы вы хотите видеть на диске? </p> <p> <input type="checkbox" name="photoshop" value ="Да" checked> Курсы по Фотошопу <br> <input type="checkbox" name="dreamweaver" value ="Да"> Курсы по Adobe Dreamweaver <br> <input type="checkbox" name="php" value ="Да"> Курсы по PHP </p>
Пожалуйста разберитесь в исходном коде, все это Вы уже знаете и там нет ничего сложного. Как видите я сделал промежутки между различными типами элементов в исходном коде, чтобы Вам легче было разобраться.
Разобрались? теперь давайте протестируем Вашу форму, чтоб вы лучше поняли принцип.
Для этого Нам понадобится локальный сервер - это специальная программа, которая позволяет обрабатывать скрипты . Она нужна для отладки сайтов которые делаются на php(и других языках) у себя на локальном компьютере(а не на сервере в интернете). Поэтому не помешает научиться ее устанавливать если дальше собираетесь делать серьезные сайты.
Скачайте эту программу, запустите и следуйте инcтрукциям установщика. Единственное, по ходу установки нужно будет выбирать между первым и вторым режимом. По умолчанию идет первый, но мой Вам совет - используйте второй режим. После установки, у Вас на рабочем столе должны появится три ярлыка - Start Denwer, Stop Denwer, Restart Denwer(запуск, остановка и перезапуск сервера).
Запустите сервер (Start Denwer) . После этого должен создаться виртуальный дискZ. Если Вы создавали во втором уроке свою первую страничку так, как я говорил, то у Вас должна быть папка obuchenie_html а внтури папка www, а внтури нее страничка index.htm в которую вы наверное уже вставили форму приведенную выше(не забудьте, что форма должна быть в теле документа!). Однако во втором уроке, мы работали с html, тут же мы будем работать с php, поэтому ситуация немного меняется. Чтобы php 100% работал, нужно обязательно нашу страничку с формой вставить в Z:\home\localhost\www т.е. на диск Z, в папку www , которая находится в папке localhost.
В итоге, у нас должно получиться следующее: папка obuchenie_html , внутри которой лежит файл с формой . Причем папка obuchenie_html лежит внутри папки www , которая в свою очередь лежит внутри папки localhost. Вот как выглядит путь : Z:\home\localhost\www\obuchenie_html\index.html , где index.html файл с формой.
Теперь осталось скачать здесь архив с обработчиком. Этот архив самораспаковывающийся, т.е. его надо просто запустить и он сам распакуется. Внутри него будет лежать файл обработчика obrabotchik.php. Его мы тоже копируем и помещаем в ту же папку где и наша страничка с формой.
Теперь запускаем локальный сервер (Start Denwer) и в строке браузера пишем: http://localhost/obuchenie_html. Появиться наша форма, которую можно заполнить и проверить.
Это самый простой обработчик, который просто выводит на экран данные заказа. Это чисто чтоб вы поняли как все происходит. После заполнения всех полей формы и нажатия кнопочки заказа , должно появиться что-то типа:
Т.е. данные из одного документа полетели в другой и это наглядно видно. Так же само, можно сделать чтоб обработчик сразу отсылал данные о заказе на е-маил, или записывал их в базу данных и.т.д.
Надеюсь что Вам понятен основной принцип работы с формами!
Урок 13: Пару слов про голову документа
Все это время мы говорили про тело документа и уже научились делать свои страницы. Поговорим теперь про голову документа.
В первом уроке я говорил, что голова документа открывается тегом <HEAD> и закрывается тегом </HEAD> . Какие основные элементы содержатся в голове док-та?
Ну во-первых это название документа - элемент TITLE . У этого элемента обязательный закрывающий тег. Это очень важный элемент.
Информация из элемента TITLE показывается в окне браузера(вверху слева), и поэтому это очень важный и информативный элемент для посетителей сайта.
Если в TITLE написать например:
<title>Как создать сайт самому. Написать сайт самому. Сайтостроение</title>
Получим:
Тем более, первые 70 символов из TITLE показываются при поиске в Гугле и других поисковых системах. Обычно там используются ключевые слова по которым хотят раскручивать сайт.
Во-вторых это описание страницы сайта. Первые 170-200 символов видны при поиске в гугле поэтому оно тоже очень важно (на скриншоте выше описание это "Хотите создать и раскрутить сайт......")
<META NAME="Description" CONTENT="Хотите создать и раскрутить сайт в сети интернет ..... и.т.д.">
Здесь используется элемент META не имеющий закрывающего тега, c атрибутами NAME(определяет имя мета-записи в данном случае это описание - description ) и CONTENT (определяет содержимое мета-записи).
В-третьих это набор ключевых слов. Сейчас это уже не актуально и нигде не используется. Поэтому можете даже и не применять. Раньше, эти слова учитывались поисковыми системами . Ну для общего развития смотрите как это делается:
Т.е все то же самое, только другое имя мета-записи NAME="Keywords"(от слова ключевые слова).
НУ вот например как может выглядеть голова документа:
<head> <title>Как создать свой сайт</title> <meta name="Description" content="Если хотите научиться делать свои сайты, тогда вы попали по адресу!"> <meta name="Keywords" content="Сайт, интернет, html, css"> </head>
Ну, что еще сказать, также в голове документа прикрепляются таблицы стилей, но об этом уже поговорим в курсе CSS .