ФОРУМ Cool

Объявление

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ФОРУМ Cool » Програмирование » Создание первого WEB


Создание первого WEB

Сообщений 1 страница 2 из 2

1

вот вам все что я нашел)
Практическая работа "Создание первого WEB-документа"

1.Откройте окно текстового редактора БЛОКНОТ и наберите в нем текст вашей первой программЫ.
<html>
(отступ)<head>
(отступ2)<title> Краткая биография </title>
(отступ)</head>

(отступ)<body>
Наберите несколько предложений о себе.
(отступ) </body>
</html>

""""(отступ - это значит пробел слева с края, отступ 2 - 2 пробела слева от края)
2.Сохраните программу на "рабочий стол" в файле с расширением HTML(Биография.html)

3.Найдите ваш файл на рабочем столе и откройте его. В Windows все файлы с расширением HTML открываются в Internet Explorer, если, конечно, не установлен какой-либо другой браузер.

4.Посмотрите, как выглядит ваш документ. Если потребуется Внести изменения или дополнения в HTML - коде, то, не выходя из окна браузера, в меню ВИД выберите команду В виде HTML. В результате раскроется окно текстового редактора БЛОКНОТ с файлом вашей программы. Внесите нужные изменения и сохраните файл под тем же именем. После этого в окне браузера выполните команду ВИД | ОБНОВИТЬ. В результате загрузится измененный HTML-файл.

5.Для внесения исправлений или изменений выберите в меню ВИД | Просмотр HTML-кода. В окне открывшегося текстового редактора внесите изменения. Закройте окно, согласившись с сохранением изменений.

6.В окне браузера, тестирующего ваш html-файл, выберите ВИД | ОБновить.

7. ВСЁ

1. Управление шрифтом (опять же в блокноте)

<html>
<head><title> Физические стили </title></head>

<body>
<B> полужирный <P></B>
<i> курсив <p></i>
<U> подчеркнутый <p></U>
<S> вычеркнутый <P></S>
<TT> пишущая машинка <P></TT>
<B><I> полужирный курсив <P></B></I>
<U><B><I> полужирный курсив подчеркнутый </U></B></I>
</body>
</html>

сохранить ФИЗИЧЕСКИЕ СТИЛИ.html на рабочий стол!

2. Установка шрифтов

<html>
<head><title> Установка шрифтов </title></head>

<body>
<P> Шрифт Arial <font face="arial"> здравствуй </font>
<p> Шрифт Courier <font face="courier"> зравствуй </font>
<p> Шрифт webdings <font face="webdings" size=7
Color="Maroon"> здравствуй </font>
</body>
</html>

Сохранить в рабочий стол УСТАНОВКА ШРИФТОВ.html

 
3. Использование индексов

В математических формулах, а также для подсрочных замечаний часто применяются индексы, которые отличаются от основоного текста положением (чуть выше или чуть нижу) и размером. Для этой цели служат тэги <SUP> и <SUB> соответсвенно для верхних и нижних индексов.
<SUB> - нижний индекс
<SUP>-верхний индекс

<html>
<head><title> Индексы </title></head>

<body>
<H3> Пример использования индексов
<P> (5+x<SUP>2</sup>)<sup>x+3</font>
<P>a<SUB>1</SUB>+a<SUB>2</SUB>+a<SUB>3</SUB>
<P> подстрочные примечания <SUP>2</SUP>
</H3>
</body>
</html>
Сохраните в рабочем столе под именем ИНдексы.html   

4. Списки
Довольно часто требуется разместить на странице списки.
<UL> - неупорядоченный список
<OL> - упорядоченный список
<LI> - устанваливается перед элементом списка, чтобы упорядочивание происходило автоматически.

<UL>, <OL>- парные тэги.

<html>
<head><title> Списки </title></head>
<body>
<H2> Списки </h2>
<P> Это упорядоченный список , нумерация начата с 7 <BR>
<OL type=1 start=7>
<LI>Вода
<LI>Земля
<LI>Небо
</OL>
<P> Это - упорядоченный список нумерация римскими цифрами.<BR>
<ol type=I>
<LI>Вода
<LI>Земля
<LI>Небо
</OL>
<P> Это упорядоченный маркированный список <BR>
<UL>
<LI>Вода
<LI>Земля
<LI>Небо
</UL>
</body>
</html>

сохранить в блокноте на рабочий стол под именем Списки.html

5. Заголовки

Тэги заголовков -не просто тэги форматирования, определяющие размер и толщину шрифта. Они могут выполнять дополнительные функции.

<Html>
<head><title> Заголовки </title></head>
<body>
<h1>Заголовок 1-го уровня </h1>
<h2>Заголовок 2-го уровня </h2>
<h3>Заголовок 3-го уровня </h3>
<h4>Заголовок 4-го уровня </h4>
<h5>Заголовок 5-го уровня </h5>
<h6>Это - <I> модифицированный </I> заголовок 6-го уровня</h6>
<h7>Заголовок 7-го уровня </h7>
</body>
</html>

сохранить на рабочий стол с именем ЗАГОЛОВКИ.html

6. Разделительные полосы

При оформлении текста, чтобы отделить один раздел от другого, нередко используются разделительные полосы.

<HR> - задает разделительную полосу, внутри которой можно вставить атрибуты:
SIZE - толщина в пикселях;
WIDTH - ширина в пикселях
ALIGN - способ выравнивания (принимает значения CENTER, LEFT или RIGHT);
NOSHADE - сплошная черная полоса без тени.

<html>
<head><title> Разделительные полосы </title></head>

<body bgcolor="#EOEOEO">
<h1> Пример использования разделительных полос </H1>
<h3><font color="blue"> Как мне вечер этот нравится...</font><BR>
<HR>
<font color="green"> Светофоры улыбаются.<P> Огоньки зеленоглазые мне зеленый свет дарят.</font>
<HR size=7>
<font color="red"> А твои глаза зеленые, шумом сосен напоенные.<BR>Говорят, что к сердцу гордому отыскать пути нельзя. </font>
<P>
<HR size=100 width=200 align="left">
</h3>
</body>
</html>

сохранить на рабочий стол с именем РАЗДЕЛИТЕЛЬНЫЕ ПОЛОСЫ.html

7. Вставка графических объектов

<img> - вставка на страницу графического изображения из файла графического формата (GIF, JPEG, BMP, ICO и др.) с указанием адреса файла в качестве аргумента атрибута SRC:

<IMG SRC="адрес графического файла">

Для ускорения загрузки графики используются атрибуты WIDTH и HEIGHT, определяющие прямоугольную область, в которой будет отражена графика после загрузки текста.

Чтобы текст вплотную не обтекал рисунок, пустые поля вокруг последнего задаются с помощью атрибутов VSPACE для верхнего и нижнего полей и HSPACE для боковых полей в тэге <IMG>. Тэг <BR CLEAR=...> отменяет обтекание графики текстом.

ЦВЕТ ФОНА задается атрибутом BGCOLOR="цвет фона" в тэге <BODY> в начале документа HTML

ФОНОВАЯ ГРАФИКА задается в тэге <BODY> в начале документа HTML, при этом используется атрибут BACKGROUND, значемнием которого является имя графического файла.

<BODY BACKGROUND="адрес графического файла">

7.1 Вставка рисунка

! Перед выполнением этой работы предварительно скопируйте вставляемый рисунок в свою папку.

<html>
<head><title>Вставка рисунка</title></head>

<body>
<IMG SRC="адрес графического файла" ALIGN=LEFT>
</body>
</html>

7.2 ЦВЕТ ФОНА

<html>
<head><title>ЦВЕТ ФОНА </title></head>

<body BGCOLOR="BLUE">
<H1> Мир освещается солнцем, а человек-знанием!</H1>

</body>
</html>

7.3 ФОНОВАЯ ГРАФИКА

! Перед выполнением этой работы предварительно скопируйте вставляемый рисунок в свою папку.

<html>
<head><title> Фоновая графика </title></head>

<body BACKGROUND="адрес графического файла">
<H1> Мир освещается солнцем, а человек-знанием!</H1>
</body>
</html>

7.4 Обтекание рисунка

! Перед выполнением этой работы предварительно скопируйте вставляемый рисунок в свою папку.

<html>
<head><title> Обтекание рисунка </title></head>

<body BACKGROUND="image1.jpg"
BR CLEAR="image2.gif>

<IMG SRC="image2.gif" ALIGN=LEFT>

<H1> Желтые листья <P><P></H1>

Капает даждик, все капает, капает,<P>
Капает на полуголые ветки.<P>
Падают листья, все падают, падают,<P>
Листья на ветках и желты и редки.<P>
<BR>
Ветер осенний солидным хозяином <P>
Гонит их с воем и с хохотом взашей <P>
Сирот, непрошеных и неприкаянных,<P>
Прочь со дворов вдоль по улице нашей.<P>
<BR>
<B><I> РАСУЛ ГАМЗАТОВ </P></B></I>
</body>
</html>

9. Фреймы

Часто возникает необходимость разместить в окне браузера несколько разделов или окон, называемых фреймами. В каждом фрейме отображается свой документ HTML!

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

<FRAMESET> - парный тэг для разделения окна на фреймы (размещается после тэга </HEAD>, но перед тэгом <BODY>)

COLS (расположение фреймов рядом), ROWS (расположение фреймов друг под другом) Через запятую указывается числа, соответствующие количеству фреймов, которые определяют их размер (в пикселях и процентах). Если фрейм занимает все оставшееся место, используется символ звездочка (*).

Например, <FRAMESET ROWS="20%,30%,*"> - разбиение на три горизонтальных фрейма высотой 20%,30% и 50%.

Можно одновременно использовать горизонтальное и вертикальное разбиение окна на фреймы, вкладывая тэг <FRAMESET> друг в друга.

После указания расположения фреймов следует для каждого из них указать исходный HTML-файл, используя тэг <FRAME>, имеющий много атрибутов.

SRC="имя_файла" NAME="имя_файла" - каждый фрейм должен иметь имя, упомянутое в атрибуте NAME, и к немудолжен быть привязан HTML-файл, указанный в атрибуте SRC

SCROLLING - определяет наличие (YES) или отсутствие (NO) полос прокрутки.
NORESIZE - запрещает пользователю изменять размеры фрейма
BORDER="ширина_полосы" - ширина разделительной полосы между фреймами в пикселях.
BORDERCOLOR="цвет_полосы" - определяет цвет разделительной полосы; задается шестнадцатеричным кодом или именем.
MARGINHEIGHT="высота верхнего отступа" - добавляет пустое поле между верхней границей фреймов и началом текста или графики; измеряется в пикселях.
MARGWIDTH="ширина боковых отступов" - добавляет пустое поле между боковыми границами фреймов и началом текста или графики; измеряется в пикселях.

Так как не все браузеры поддерживают фреймы, то необходимо использовать тэг <NORFRAME> перед тэгом <BODY>, а в теле программы, т.е. между тэгами <BODY> и </BODY> можно вставить сообщение, которое будет появляться, если браузер не поддерживает фреймы. <>

Формат ссылок на фреймы:

<A HREF="адрес файла" TARGET="имя фрейма"> текст_ссылки </A> - для текстовых ссылок
<A HREF="адрес файла" TARGET="имя фрейма"> <IMG SRC="графический файл"></A> - для графических ссылок

<html>
<head><title> Фреймы </title></head>

<frameset rows="20%*">
<frame src="Бегущая строка.Html"name="top" scrolling=no>
<frameset cols=118,*">
<frame src="Рисунок.html" name="left scrolling=no>
<frame src="ссылки.html" name="right scrolling=yes>
</frameset>
</frameset>
<noframe>
<body>
Требуется поддержка фреймов
</body>
<noframe>
</html>

10. "БЕГУЩАЯ" СТРОКА

<MARQUEE>, который позволяет создать так называемую бегущую строку, т.е. эффект прокручивания текста в заданном поле. Характеристики бегущей строки задаются следубщими атрибутами:

WIDTH - ширина поля бегущей строки в пикселях или процентах от ширины окна
HEIGHT - высота поля бегущей строки (в пикселях)

HSPACE, VSPACE - интервалы по горизонтали и вертикали между текстом строки и краями ее поля (в пикселях)

ALIGH- определяет положение текста бегущей строки в ее поле, возможные аргументы:
TOP (вверху)
BOTTOM (внизу)
MIDDLE (посередине)
DIRECTION - определяет направления движения, возможные аргументы:LEFT(справа налево)
RIGHT(слева направо)

BEHAVIOR - характер движения строки, возможные аргументы:
Создание ссылки
Ссылки (или гиперссылки) позволяют щелчком кнопкой мыши на выделенном тексте или изображении перейти к другому файлу или фрагменту страницы. Задаются они тэгом <A HREF>, которому соответствует закрывающийся тэг </A>. В ссылке сначала указывается имя файла, на который она ссылается, а затем текст или имя графического файла, содержащего изображение ссылки.

Структура ТЕКСТОВОЙ ССЫЛКИ имеет вид:

<A HREF="адрес_ссылки">текст ссылки </A>.

Если вы хотите, чтобы внешне ссылка выглядела как имя файла, на который она ссылается, просто напишите его имя вместо текста. Например,
<A HREF="документ.html"> документ.html </A>

Структура ГРАФИЧЕСКОЙ ССЫЛКИ имеет вид:

<A HREF="адрес_ссылки"><IMG SRC="имя_графического_файла"> </A>

! Перед выполнением этой работы предварительно скопируйте вставляемый рисунок в свою папку и создайте документ, на который будете ссылаться. (В примере это рисунок 0004.gif и документ Обтекание рисунка.html).

<html>
<head><title> пример использования ссылок </title></head>

<body BGCOLOR="YELLOW">
<IMG SRC=0004.gif WIDTH=80 HEIGHT=60>
Это просто картинка
<P>
Ниже расположены ссылки
<P>
<A HREF="Обтекание текста.html"> Это-текстовая ссылка </A>
<P>
<A HREF="Обтекание текста.html"><IMG SRC=0004.gif WIDTH=60 HEIGHT=40>
Это графическая ссылка
</body>
</html>

HTML-формы [01.08.2006 в 15:17]
Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта. Пример тому – гостевая книга, – которая обеспечивает обратную связь с посетителями и разработчиками сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность. Данная статья посвящена основам создания HTML-форм, их обработке и способам передачи данных из экранных форм в PHP-сценарии.

1) Создание простой формы
Теги <form> и </form> задают начало и конец формы. Начинающий форму тег <form> содержит два атрибута: action и method. Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET.

Примечание: главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

Листинг 1.0 HTML - форма

<form method=`post` action=`../admin/add_story.php`>

</form>

2) Флажок (checkbox)
Флажки checkbox предлагаю пользователю ряд вариантов, и разрешает выбор нескольких из них.

<input name=`Имя переключателя` type=`Тип` value=`Значение`>

Группа флажков состоит из элементов <input>, имеющих одинаковые атрибуты name и type(checkbox). Если вы хотите, чтобы элемент был отмечен по умолчанию необходимо пометить его как checked. Если элемент выбран, то сценарию поступит строка имя=значение, в противном случае в обработчик формы не придет ничего, т.е. не выбранные флажки вообще никак не проявляют себя в переданном наборе данных.

Листинг 1.1 Использование флажков(checkbox)

<input name=`mycolor` type=`checkbox` value=`red` checked>Красный(выбран по умолчанию)
<input name=`mycolor` type=`checkbox` value=`blue`>Синий
<input name=`mycolor` type=`checkbox` value=`black`>Черный
<input name=`mycolor` type=`checkbox` value=`white`>Белый

3) Переключатель(radio)
Переключатели radio предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.

<input name=`Имя переключателя` type=`Тип` value=`Значение`>

Переключатель (radio) имеет атрибуты name, type и value. Атрибут name задает имя переключателя, type задает тип radio, а атрибут value задает значение. Если пользователь выберет переключатель, то сценарию будет передана строка имя=значение. При необходимости можно указать параметр checked, который указывает на то, что перключатель будет иметь фокус (т.е. будет отмечен по умолчанию) при загрузке страницы. Переключатели также можно объединять в группы, для этого они должны иметь одно и тоже имя.

Листинг 1.2 Использование переключателей(radio)

<input name=`mycolor` type=`radio` value=`white`> Белый
<input name=`mycolor ` type=`radio` value=`green` checked> Зеленый (выбран по умолчанию)
<input name=`mycolor ` type=`radio` value=`blue`> Синий
<input name=`mycolor ` type=`radio` value=`red`> Красный
<input name=`mycolor ` type=`radio` value=`black`> Черный

4) Кнопка сброса формы(Reset)

<input type=`Тип` name=`Имя кнопки` value=`Надпись на кнопке`>

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

Листинг 1.3 Использование кнопки сброса формы

<input type=`reset` name=`Reset` value=`Очистить форму`>

5) Выпадающий список (select)

Тэг <select> представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк.

Список начинается с парных тегов <select></select>. Теги <option></option> позволяют определить содержимое списка, а параметр value определяет значение строки. Если в теге <option> указан параметр selected, то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size равен 1, то список будет выпадающим. Если указан атрибут multiple, то разрешено выбирать несколько элементов из списка(при size = 1 не имеет смысла).

<select name=`Имя списка` size = “Размер” multiple>
<option value=”Значение”>Отображаемый текст в списке</option>
</select>

При передаче данных выпадающего списка сценарию передается строка имя=значение, а при раскрытом списке передается строка имя=значение1&имя=значение2&имя=значениеN.

6) Текстовое поле (text)

Позволяет пользователям вводить различную информацию.

<input type=`Тип` name=`Имя поля` size=`Размер` maxlength=`Макс. количество символов`>

При создании обычного текстового поля размером size и максимальной допустимой длины maxlength символов, атрибут type принимает значение text. Если указан параметр value, то поле будет содержать отображать value-текст. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.

Листинг 1.4 Использование текстового поля

<input type=`text` name=`txtName` size=`10` maxlength=`5` value=`Текст по умолчанию`>

7) Поле для ввода пароля (password)

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

Листинг 1.5 Использование поля ввода пароля

<input type=`password` name=`txtName` size=`10` maxlength=`5`>

8) Многострочное поле ввода текста (textarea)

Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк.

<textarea name=`Имя поля` cols=`Ширина поля ` rows=`Число строк`>Текст</textarea>

Многострочное поле ввода текста начинается с парных тегов <textarea></textarea>. Тэг name задает имя многострочного поля. Также можно указать ширину поля(cols) и число строк(rows). При необходимости можно указать атрибут readonly, который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами <textarea></textarea>.

Листинг 1.6 Использование многострочного поля ввода

<textarea name=`txtArea` cols=`15` rows=`10` readonly> Текст, который изначально будет отображен в многострочном поле ввода и который нельзя изменять, т.к. указан атрибут readonly </textarea>

9) Скрытое текстовое поле

Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.

<input name=`Имя` type=`Тип` value=`Значение`>

Скрытое поле начинается с тега <input>, атрибуты которого являются name, type и value. Атрибут name задает имя поля, type определяет тип поля, а атрибут value задает значение поля.

Листинг 1.7 Использование скрытого текстового поля

<input name=`email` type=`hidden` value=`spam@nospam.ru`>

10) Кнопка отправки формы (submit)

Служит для отправки формы сценарию.

<input type=`Тип` name=`Имя кнопки` value=`Текст кнопки`>

При создании кнопки для отправки формы необходимо указать 2 атрибута: type=`submit` и value=`Текст кнопки`. Атрибут name необходим если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки `Сохранить`, `Удалить`, `Редактировать` и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки.

11) Кнопка для загрузки файлов (browse)

Служит для реализации загрузки файлов на сервер. Объект browse начитается с парных тегов <form></form>. Начинающий тэг <form> содержит необходимый атрибут encrypt. Атрибут encrypt принимает значение multipart/form-data, который извещает сервер о том, что вместе с обычной информацией посылается и файл. При создании текстового поля также необходимо указать тип файла – `file`.

Листинг 1.8 Использование кнопки для загрузки файлов

<form enctype=`multipart/form-data` action=`upload.php` method=`post`>
Загрузить файл: <input name=`my_file` type=`file`>
<input type=`submit` value=`Отправить`>
</form>

12) Рамка (fieldset)

Объект fieldset позволяет вам нарисовать рамку вокруг объектов. Имеет закрывающий тэг </fieldset>. Заголовок указывается в тэгах <legend></legend>. Основное назначение объекта – задавание различных стилей оформления.

Листинг 1.9 Использование рамки

<fieldset>
<legend>Программное обеспечение(заголовок рамки)</legend>
Текст, который будет помещен внутри рамки.</fieldset>

Обработка форм

Все данные, которые вы хотите получить из HTML-формы в PHP сценарий обрабатываются с помощью суперглобальных массивов $_POST или $_GET, в зависимости от указанного в атрибуте method метода передачи данных.

Задача: Вам необходимо получить данные из текстового поля и многострочного поля ввода и передать их сценарию.
Решение: Необходимо создать HTML форму и PHP – сценарий для обработки формы.

Обсуждение:
Создадим два файла: form.html и action.php. В файле form.html будет содержаться html-форма с текстовым полем mytext и текстовой областью msg:

Листинг 2.0 HTML форма файла form.html

<form action=`action.php` name=`myform` method=`post`>
<input type=`text` name=`mytext` size=`50`>
<textarea name=`msg` cols=`20` rows=”10” ></textarea>
<input name=`Submit` type=submit value=`Отправить данные`>
</form>

В этой html-форме нас интересует 3 атрибута: action который указывает путь к обработчику формы, имя текстового поля (mytext) и имя многострочного поля вода (msg). Также в форме присутствует кнопка, при нажатии на которую происходит передача данных.

После того как html-форма готова нам необходимо создать обработчик формы action.php:

Листинг 2.0 PHP скрипт, файл action.php

<?php
$text = ($_POST[`mytext`];
$msg = ($_POST[`mytext`];
echo $text; // Выводим содержимое текстового поля
?>

После того как мы введем любые значение в текстовые поля и нажмем на кнопку `Отправить данные` html-форма отправить значения сценарию action.php.
После этого в переменных $text и $msg будут содержаться значения текстового поля и многострочного поля ввода соответственно, значения которых взяты из суперглобальных переменных $_POST.

Если вы хотите, чтобы в многострочном текстовом поле соблюдалось html-форматирование, то используйте функцию nl2br():

<?php
$text = nl2br($_POST[`mytext`]);
?>

Задача: Пусть необходимо создать выпадающий список с годами с 2000 по 2050.
Решение: Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.

Обсуждение:
Для начала создадим два файла: form.html и action.php. В файле form.html будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:

I. Ввод данных вручную:

<select class=`input` type=text name=years>
<option value=`2000`>2000</option>
<option value=`2001`>2001</option>
<option value=`2002`>2002</option>
……………………………………………
<option value=`2050`>2050</option>
</select>

II. Ввод данных через цикл:

<select class=`input` type=text name=years>
<?php
$year = 2000;
for ($i = 0; $i <= 50; $i++) // Цикл от 0 до 50
{
$new_years = $year + $i; // Формируем новое значение
echo `<option value=`.$new_years.`>`.$new_years.`</option>`; //Формируем новую строчку
}
?>
</select>

Как видно, второй пример с циклом, более компактный. Думаю, не стоит приводить скрипт обработчика данной формы, потому что он обрабатывается точно так же как текстовое поле, т.е. значения списка можно извлечь из суперглобального массива $_POST.

Задача: Загрузка файла на сервер
Решение: Необходимо создать HTML форму и PHP – сценарий для обработки файла.

Описание:
Создадим HTML-форму для отправки файла на сервер.

HTML форма отправки файла на сервер

<FORM ENCTYPE=`multipart/form-data` ACTION=`action.php` METHOD=POST>
<INPUT NAME=`myfile` TYPE=`file`>
<INPUT TYPE=`submit` value=`Передать файл`>
</FORM>

В данной html-форме присутствует элемент browse, который открывает диалоговое окно для выбора файла для загрузки на сервер. При нажатии на кнопку `Передать файл`, файл передается сценарию-обработчику.

Затем необходимо написать сценарий обработчик action.php. Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:

PHP скрипт

<?php
if(isset($_FILES[`myfile`])) // Если файл существует
{
$catalog = `../image/`; // Наш каталог
if (is_dir($catalog)) // Если такой каталог есть
{
$myfile = $_FILES[`myfile`][`tmp_name`]; // Времменый файл
$myfile_name = $_FILES[`myfile`][`name`]; // Имя файла
if(!copy($myfile, $catalog)) echo `Ошибка при копировании файла `.$myfile_name // Если неудалось скопировать файл
}
else mkdir(`../image/`); // Если такого каталога нет, то мы его создадим
}
?>

Примечание: Если вы доверяете пользователям закачивать на ваш сервер любые файлы, нужно быть предельно осторожным. Злоумышленники могут внедрить «нехороший» код в картинку или файл и отправить на сервер. В таких случаях нужно жестоко контролировать загрузку файлов.

Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер.

Также хотел бы продемонстрировать пример с элементом checkbox. Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox’a не выбран, то суперглобальная переменная $_POST вернет пустое значение:

HTML форма и PHP сценарий в одном файле

<FORM ACTION=`file.php` METHOD=POST>
<input name=`mycolor` type=`checkbox` value=`blue`>Синий
<input name=`mycolor` type=`checkbox` value=`black`>Черный
<input name=`mycolor` type=`checkbox` value=`white`>Белый
<input name=`Submit` type=submit value=`Выбрать`>
</FORM>

// PHP-скрипт, обработчик формы
<?php
if (!empty($_POST[`mycolor`])) echo $_POST[`mycolor`]; // Если выбран хоть 1 элемент
else echo `Выберите значение`;
?>

JAVA
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обратный отсчет</title>
<script LANGUAGE="JavaScript">
function closeIt() {
close();
}
function startTimer(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
closeTime=hours*3600+mins*60+secs;
closeTime+=30; //Установка таймера//
Timer();
}
function Timer(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
curTime=hours*3600+mins*60+secs
if(curTime>=closeTime)
closeIt()
else
timeLeft();
}
function timeLeft(){
count = closeTime-curTime;
document.timer.counter.value = count + " secs."
window.setTimeout("Timer()",1000)
}
</script>
</head>
<body onLoad="startTimer()">
<form name="timer">
<div align="center"><center><p>Через<br>
<input type="text" value name="counter" size="7"
style="background-color: rgb(0,255,0); color: rgb(128,0,0)"><br>
Чтото произойдет</p>
</center></div>
</form>
</body>
</html>

JAVA тот же почти

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обратный отсчет</title>
<script LANGUAGE="JavaScript">
function startTimer(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
closeTime=hours*3600+mins*60+secs;
closeTime+=30; //Установка таймера//
Timer();
}
function Timer(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
curTime=hours*3600+mins*60+secs
if(curTime>=closeTime)
location = "Сюда впишите URL страницы"
else
timeLeft();
}
function timeLeft(){
count = closeTime-curTime;
document.timer.counter.value = count + " secs."
window.setTimeout("Timer()",1000)
}
</script>
</head>
<body onLoad="startTimer()">
<form name="timer">
<div align="center"><center><p>Через<br>
<input type="text" value name="counter" size="7"
style="background-color: rgb(0,255,0); color: rgb(128,0,0)"><br>
Чтото произойдет</p>
</center></div>

0

2

+1

0


Вы здесь » ФОРУМ Cool » Програмирование » Создание первого WEB


Создать форум. Создать магазин