"HTML для флудеров" или "Трогаем формы"

Только не нужно флудить мне на мыло о том,
что эта статья для нубов. Я об этом знаю =).
Она ориентирована приемущественно на начинающих.

Самое простое, чему можно научить, и в тоже время самое важное, чему можно научить - это поиск и извлекание из страницы форм.

Для начала нужно бы найти подходящую страничку с формой, сохранить её (только не нужно сохранять с картинками или веб-архивом: хватит и простого html), а затем открыть любым любимым текстовым редактором (например, Notepad++ или AkelPad с плагином подсветки html-кода... да хоть Блокнотом =)). Мы можем пока воспользоваться этой:

<html>
<head>
    <title>Гостевая книга: Добавить запись</title>
</head>
<body>
<table width=80%>
<form name="frm_send1" action="/gb/addpost.php" method="POST">
    <tr>
        <td>имя</td>
        <td>
            <input type=text name=uname value="">
        </td>
    </tr>
    <tr>
        <td>сообщение</td>
        <td>
            <textarea name=Message></textarea>
        </td>
    </tr>
    <tr>
        <td>e-mail</td>
        <td>
            <input type=text name=mail value="">
        </td>
    </tr>
    <tr>
        <td>отправить</td>
        <td>
            <input type=hidden name=adm value=0>
            <input type=submit value="отправить">
        </td>
    </tr>
</form>
</table>
</body>
</html>

Готово? Отлично! Теперь попробует разобраться с тем что там написано (если вы уже знакомы с html, то дальше можно не читать =): всё остальное будет изложено в следующих статьях).

рис. 1:наша форма

В первой строке мы наблюдаем конструкцию <html>. Называется эта шняга тегом (на самом деле это оператор языка гипертекстовой разметки =) aka html). Этот самый тег, говорит о том, что перед нами именно html-код, а не что-то иное. Вообще, для него нужен закрывающий тег </html>, который можно найти в самом конце кода (хотя, может и не быть не только закрывающего, но и открывающего тега, и при этом страница быдет тоже обрабатываться без ошибок, но такой стиль программирования считается плохим).

Дальше следует блок заголовка страницы <head></head>, между границами которого заключается необходимя информация о странице. Это могут быть теги <meta> с самыми разными параметрами, скрипты (<script></script>), ссылки на ресурсы, подключаемые к странице (<link>, не путать с <a></a>) и прочие. В нашем варианте указана только одна пара тегов <title></title>, которая используется для задания названия страницы, которое будет отображаться в заголовочной области окна браузера (в примере "Гостевая книга: Добавить запись").

После заголовка следует т.н. тело страницы, т.е. её содержимое (контент), которое заключается между тегами <body> и </body>. Наш коннент состоит из таблицы <table></table>, и элементов формы <form></form>, обозначенных тегами <input> и <textarea></textarea>. Вот зачем они нужны:

<table> - открывающий тег, который указывает на начало таблицы. Закрывающий тег нужен. В нашем примере тег использован с параметром width, служащим для задания длины таблицы, существуют и другие, о которых можно прочитать в любом справочнике по HTML.
<tr> - открывающий тег, который указывает на начало новой строки ячеек внутри таблицы. Между открывающим и закрывающим тегами указываются ячейки для текущей строки. Закрывать нужно.
<td> - тег, обозначающий начало новой ячейки. Указывается внутри строки ячеек <tr>. Между открывающим и закрывающим тегами располагаются данные ячейки. После использования нужно закрыть.
<form> - начало формы. Нам будет нужно всё, что располагается между этим тегом и его закрывающим собратом. Используются следующие параметры:

name - имя формы, в данном случае "frm_send1". Используется для упрощения обращения к форме скриптов.

action - адрес скрипта, которому будут переданы данные, введённые в форму. В примере "/gb/addpost.php"; знак "/" (слэш) указывает на то, что адрес следует рассматривать относительно корневого каталога на сервере.

method - метод, с помощью которого данные формы будут отправлены исполняющему скрипту. Чаще всего это как и в нашем примере метод POST.

<input> - элемент управления. Закрывыть не нужно (и так очень даже не плохо =)). Для нормально работы нужно указать следующие параметры:

type - тип элемента. Если принимает значение "text", обозначает текстовое поле, "button" - кнопку (хотя для кнопки могут использоваться и теги <button></button>), "hidden" - невидимый элемент, но от этого не менее значимый, "submit" - кнопку "отправить", "reset" - кнопку "очистить", которая сбрасывает значения всех элементов формы до значений по умолчанию, "image" - картинку как элемент управления. Вроде все =).

name - имя элемента (обязательный параметр для большинства элементов)

value - значени по умолчанию, которое принимает элемент (для кнопок - текст, указанный на оной).

<textarea> - большое текстовое поле. От <input type=text> отличается тем, что позволяет вставлять несколько строк. Закрывающий тег требуется.

Разобрались? Великолепно! Теперь можно перейти к тому, ради чего была затеяна вся эта статья: уберём всё лишнее, оставим только форму. Для понятности можно перед элементом выставить поясняющий текст из предыдущей ячейки. Если всё было сделано верно, то получится примерно так (чтобы оборвать строку, можно использовать тег <br>):

<form name="frm_send1" action="/gb/addpost.php" method="POST">
имя<input type=text name=uname value="">
<br>
сообщение<textarea name=Message></textarea>
<br>
e-mail<input type=text name=mail value="">
<br>
<input type=hidden name=adm value=0>
<input type=submit value="отправить">
</form>

Если это сохранить (не забудьте про расширение, оно должно быть "html" или "htm") и открыть в браузере, то мы увидим что-то вроде изображённого на рис. 2.

рис. 2: ничего лишнего.

Если была взята реальная форма, а не та, что предложил я, то можно попробовать заполнить поля и нажать кнопку "отправить". Обана!.. Что значит не получилось отправить?! Снова открываем нашу форму. Обратим внимание на первую строчку:

<form name="frm_send1" action="/gb/addpost.php" method="POST">

Ещё бы она работала =)!!! Взгляните на параметр action. Ещё непонятно? Там адрес указан относительно корневого каталога сервера, а у нас сервером вляется сейчас (ибо запускаем форму оттуда) наш компьютер. Что делать? Самое логичное - поменять, а точнее дополнить адрес: допустим, что исходная страничка была на сайте www.site-site.cn (и не смотрите, что сайт китайский, а заголовок на русском =)), тогда параметр будет выглядеть как action="http://www.site-site.cn/gb/addpost.php". Префикс "http://" говорит о том, что мы будем обращаться к серверу по протоколу HTTP, а не искать папку www.site-site.cn на локальном компе.

Вот, кажется и всё. В случае чего, пишите на мыло, указанное на главной странице моего ресурса. Приятного формодеструктирования =).

Злобный Кыс

15.05.2008

Сайт управляется системой uCoz