Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Вебстроительство. С миру по нитке.


Информационный Канал Subscribe.Ru


ВЭБСТРОИТЕЛЬСТВО. С МИРУ ПО НИТКЕ

ВЫПУСК #7. FORM'енный.
- От автора
- HTML. Формы
- Заключение
Рассылка www-проекта CN GROUP
ОТ РЕДАКТОРА

Здравствуйте дорогие читатели!

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

Я конечно же извеняюсь за то что не выпускал рассылку, многие подписчики решили что проект и рассылка "померли" в прямом смысле этого слова. Но на самом деле это не так, проект и рассылка живы как никогда :), это очень заметно на форуме (потому-что это единственное место где можно заметить признаки жизни проекта :)). А рассылка действительно уходила в "зимнюю спячку", у меня очень мало времени сейчас на неё, но очень надеюсь что рассылка будет жить.

За прошедшую зиму у нас полностью сменился дизайн форума, он стал светло-зелёным. И еще совсем недавно мы переехали на новый домен: www.cngroup.ru. Так что проект не на минуту не замирает, просто вся его деятельность на правлена на внутринние разработки, этому результатов на поверхности не видно. Обещаю что скоро будет всё доделано и всё будет в ажуре :)

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

HTML. Формы

Формы являются неотъемлемой частью любого динамического или интерактивного сайта. Так например сервисы, которые имеют интерактивность с пользователем (чаты, форумы, опросы, гостевые книги или же простая форма подписки на рассылку) просто не могут существовать без форм, так как те поля в которые вы наверняка не раз вводили свой пароль, е-майл или просто текст, являют элементами формамы на вэб-странице. Формы создаются при помощи HTML, но так как HTML является лишь языком разметки, то и формы, соответственно, интерактивности никакой не предоставляют. А интерактивность в свою очередь осуществляется при помощи форм и различных языков программирования. Принцип тут прост, пользователь вводит какие-то данные в форму и нажимает кнопку отправки, данные из формы получает и обработывает некий скрипт (выводит сообщение что данные успешно получены, или что данные неверны или же просто записывает в файл, и так далее, варинтов тут бесконечное множество). Это я всё к тому, что не зная какого-либо языка программирования сделать что-либо с формами практически ничего нельзя, разве что-нибуль бессмысленное вроде кнопки-ссылки, поэтому эта статья будет полезна в первую очередь начинающим программистам. В конце статьи приведены примеры применения форм в совокупности со скриптами, т.е так сказать "в деле".

  1. C чего начинаются формы
    1. - Скрипт обработчик. Атрибут action
    2. - Метод отправки. Атрибут method
    3. - Типы содержимого. Атрибут enctype
    4. - Имя формы. Атрибут name
    5. - Допустимые файлы для загрузки. Атрибут accept
    6. - Указание кодировки. Атрибут accept-chatset
    7. - Целевое окно или фрейм. Атрибут target
  2. Элементы управления формы
  3. Элементы "input"
    1. Однострочное текстовое поле. Тип text
    2. Поле для ввода пароля. Тип password
    3. Скрытое поле. Тип hidden
    4. Переключатели множественного выбора. Тип checkbox
    5. Переключатели единственного выбора. Тип radio
    6. Кнопка отправки данных. Тип submit
    7. Графическая кнопка отправки данных. Тип image
    8. Кнопка сброса. Тип reset
    9. Простая кнопка. Тип button
    10. Поле для загрузки файла. Тип file
  4. Элементы "select" и "option". Выпадающий список
  5. Элемент "textarea". Многострочное текстовое поле
  6. Элемент "label". Создание лейбла
  7. Элементы "fieldset" и "legend". Группировка элементов формы
  8. Дополнительные атрибуты элементов формы
    1. Имя элемента. Атрибут name
    2. Значение элемента. Атрибут value
    3. Отключение элемента. Атрибут disabled
    4. Элемент только для чтения. Атрибут readonly
    5. Размер поля. Атрибут size
    6. Ограничение на количество вводимых данных. Атрибут maxlegth
    7. Альтернативный текст. Атрибут alt
    8. Порядок фокуса. Атрибут tabindex
    9. Клавиши доступа. Атрибут accesskey
  9. Полезные советы
  10. И всё...

C чего начинаются формы

Формы создаются при помощи тэгов <form> и </form>, внутри этих тэгов распологаются элементы управления формы, это могут быть переключатели, чекбоксы, поля ввода, текстовые поля, кнопки и т.д (все элементы управления буду описаниы ниже). При создании форм, тэг <form> обязателен и имеет следующий синтаксис:

<form action="(обработчик формы)" method="(метод отправки)" enctype="(тип содержимого)" name="(имя формы)" accept="(разрешённые типы загружаемых файлов)" accept-charset="(кодировка формы)" target="(имя окна или фрейма)">

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


</form>

Не обязательно указывать все атрибуты формы, если на то нет необходимости. Рассмотрим атрибуты тэга <form> описаные здесь:

action - указывает путь до скрипта, который получит данные из формы после отправки, например: action="scripts/login.php" или action="http://cngroup.ru/"

method - указывает метод отправки данных из формы, существуют два метода - get и post.

Если применяется метод get, то данные из формы добавляются к урл, который указан в атрибуте action формы, образуя пару имя=значение из элементов формы, если пар больше одной, то они перечисляются знаком & (and). Например после отправки данных из приведённой ниже формы...

<form action="script.php" method="get">

<input type="text" name="name" value="Имя">
<input type="text" name="mail" value="Е-мейл">
<input type="button" value="отправить">

</form>

... образуется урл вида: script.php?name=Имя&mail=Е-мейл. То есть к урл, который указан в атрибуте action формы сначала добавляется знак ? (вопрос), в качестве разделителя данных от урл, а затем идут пары имя=значение (name=value), которые перечисляются знаком & (and). Методом get обычно передают данные небольшого размера.

Если применяется метод post, то данные отправляются в теле запроса. Обработчику формы (скрипту на который она ссылалась), данные доступны таким же образом как в случае с методом get: имя=значения. Метод post применяется при передаче больших данных.

Если метод не указан, то по умолчанию является метод get.

enctype - указывает на тип содержимого формы. Типы могут быть: application/x-www-form-urlencoded и multipart/form-data

Если применяется тип application/x-www-form-urlencoded, то пары имя=значение переводятся в escape-последовательности (&amp; &rsquo; ...). Неалфавитные символы заменяются, знаком процента и двумя 16-ричными цифрами, представляющими ASCII-код символа. Данный метод применяется при отправке текстовых данных которые состоят из ASCII-кодов.

Тип multipart/form-data применяется при отправке файлов, бинарных данных или текста который состоит не из ASCII-кодов.

Если тип данных не указан, то по умолчанию является application/x-www-form-urlencoded.

Примечание: Тип данных нужен только при отправке данных формы методом post.

name - указывает имя формы которое может использоваться клиентскими скриптами для взаимодействия с формой.

accept - указывает какие типы файлов может загрузить пользователь. Типы необходимо перечислять через запятую ( , ) в виде MIME (содержимое/носитель). Соответственно этот атрибут может присутствовать только в том случае если тип содержимого формы значится как multipart/form-data и в форме присутствует поле для загрузки файлов.
Пример формы которая разрешает загружать только файлы типа PNG, GIF и CSS

<form action="script.php" method="post" accept="image/png, image/gif, text/css">

(... форма для загрузки файлов ...)

</form>

accept-charset - указывает на кодировку данных формы, которая будет использоваться скриптом-обработчиком. По умолчанию строит значение "UNKNOWN", как правило браузер интерпритирует это значение в кодировку по умолчанию. Рекомендуется использовать если данные из формы необходимо отправить в какой-то конкретной кодировке. Можно указать несколько кодировок через запятую или пробел, если вы неуверенны что сервер сможет обработать одну указанную кодировку.
Пример указания кодировки:

<form action="script.php" method="post" accept-charset="windows-1251">

(... элементы формы ...)

</form>

target - указывает в каком окне (или фрейме) будет загружен скрипт-обработчик. Атрибут может принимать следующие значения:

_blank - загружается в новом окне
_parent - загружается в родительском окне (применяется в случае с фреймами или всплывающими окнами)
_self - загружается в этом же окне
_top - загружается в этом же окне, "убивая" при этом фреймы если они имеются
произвольное имя - вы можете использовать произвольное имя фрейма или окна если оно задано для фрейма или окна.

наверх...

Элементы управления формы

Как уже говорилось выше, текстовые поля, кнопки, переключатели и д.т являются элементами управления формы. Все они подробно рассмотрены ниже. Каждый элемент обязательно имеет атрибуты name и value (исключением является элемент textarea), указывание этих атрибутов не всегда обязательно (например на кнопке отправки данных). Эти два атрибута имеют особую роль, атрибутом name оказывается имя элемента, а атрибутом value значение элемента, при отправке формы, обработчик получает значения каждого элемента в виде пары имя=значение (name=value), об этом я писал выше и здесь дал понять откуда берутся эти пары имя=значение.

Элементы "input"

Большинство элементов управления формы создаются тэгом "input", конкретный элемент управления определяется атрибутом type этого тэга. Синтаксис тэга "input":

<input type="(тип элемента управления)" (...другие атрибуты специфичные для этого типа...)>

Типы элементов управления создаваемые с помощью тэга "input" могут быть следующие:

text - создаёт однострочное текстовое поле.

Ваше имя: <input type="text" name="name" value="Введите Ваше имя">

Ваше имя:

Дополнительные атрибуты: name, value, disabled, readonly, size, maxlegth, alt, tabindex, accesskey

password - создаёт однострочное текстовое поле, но данные в этом заменяются на спецсимволы. Данный тип создан специально для ввода пароля, чтобы кто-нибудь случайно его не увидел. Скрипту обработчику передаются обычные данные введённые в поле.

Введите пароль: <input type="password" name="password" value="">

Введите пароль:

Дополнительные атрибуты: name, value, disabled, readonly, size, maxlegth, alt, tabindex, accesskey

hidden - создаёт скрытое поле. Скрытое поле необходимо для передачи данных которые необязательно должен видеть пользователь. Данное поле неотображается в браузере, но его данные передаются скрипту-обработчику. Допустим у нашего сайта есть сервис рассылки, формы подписки на рассылку мы раздаём своим друзьям и партнёрам, и хотим знать от кого приходятся подписчики, для этого можно вставить скрытое поле в форму подписки и её данные скажут откуда пришёл подписчик.

<form action="http://www.cngroup.ru/subscribe/" method="post">
Введите е-мейл:
<input type="text" name="mail" value="">
<input type="submit" name="submit" value="подписаться">
<input type="hidden" name="from" value="www.kpeatops.net">
</form>

Введите е-мейл: (скрытое поле невидимо)

При отправке данных из этой формы скрипт-обработчик также получит пару "from=www.kpeatops.net", это значит что подписчик пришёл с сайта www.kpeatops.net.

Дополнительные атрибуты: name, value

checkbox - переключатели которые позволяют выбирать несколько опций. За выбранные опции отвечает дополнительный атрибут checked (без параметров). Скрипт-обработчик получает все значения выбранных опций.

Что вы хотите на завтрак? <br>
<input type="checkbox" name="tea" value="yes" checked> чай <br>
<input type="checkbox" name="juice" value="yes"> сок <br>
<input type="checkbox" name="cheese" value="yes"> сыр <br>
<input type="checkbox" name="sausage" value="yes"> колбаски

Что Вы хотите на затрак?
чай
сок
сыр
колбаски

Дополнительные атрибуты: name, value, disabled, alt, tabindex, accesskey

radio - переключатели которые позволяют выбирать только одну опцию из доступных. Все переключатели одной группы должны иметь одно имя. За выбранную опцию по умолчанию, отвечает дополнительный атрибут checked (без параметров). Скрипт обработчик значения только выбранной опции.

Что вы хотите на завтрак? <br>
<input type="radio" name="radio_name" value="1" checked> чай c молоком <br>
<input type="radio" name="radio_name" value="2"> чай с сахаром <br>
<input type="radio" name="radio_name" value="3"> чай с заваркой <br>
<input type="radio" name="radio_name" value="4"> отвали, я уже позавтракал

Что Вы хотите на затрак?
чай c молоком
чай с сахаром
чай с заваркой
отвали, я уже позавтракал

Дополнительные атрибуты: name, value, disabled, alt, tabindex, accesskey

submit - кнопка отправки данных из формы. Одна форма может содержать несколько кнопок отправки.

Ваше имя:
<input type="text" name="name" value="">
<input type="submit" name="submit" value="отправить">
Ваше имя:

Дополнительные атрибуты: name, value, disabled, alt, tabindex, accesskey

image - кнопка отправки данных из формы, полностью аналогична кнопке "submit", но может содержать рисунок заменяющий кнопку. Рисунок вставляется атрибутом src="(путь до рисунка)". При отправке формы данной кнопкой, если она была нажата мышью, скрипт получает также координаты нажатия на кнопку, значения координат передаются в пикселях и имеют вид: имя кнопки.x = координаты по x, имя кнопки.y = координаты по y. Это может быть полезно если одна графическая кнопка изображает несколько кнопок и при отправки с помощью координат можно вычислить на какую именно кнопку было произведено нажатие. В данном применении графической кнопки есть большие минусы:
1. Кнопки не всегда нажимаются мышью, часто это делается клавишей "Enter" и соответственно коортинаты узнать не получится.
2. Часто графику просто отключают и соответсвенно пользователь не сможет узнать на какую часть кнопки ему нажимать.

Для данного примера я нарисовал кнопку

- form_button.gif

Ваше имя:
<input type="text" name="name" value="">
<input type="image" name="submit" src="form_button.gif alt="отправить"">
Ваше имя:

Дополнительные атрибуты: name, disabled, alt, tabindex, accesskey

reset - кнопка сброса данных из формы, в положение по умолчанию.

Ваше имя:
<input type="text" name="name" value="">
<input type="submit" name="submit" value="отправить">
<input type="reset" value="сброс">
Ваше имя:

Дополнительные атрибуты: name, value, disabled, alt, tabindex, accesskey

button - кнопка для взаимодействия с клиентскими скриптами, для формы никого значения не несёт, если конечно скрипт для этой кнопки не работает с самой формой. Данная кнопка почти никогда не применяется потому-что клиентские скрипты можно вызвать и на любой другой кнопке. Её рекомендуется использовать для форм которые неотправляют никаких данных на сервер.

В приведённом ниже примере, c помощью скриптов, кнопка "button" имитирует кнопку "reset" и имеет интересную функциональность. Реально подобное можно сделать и с любой другой кнопкой формы.

<form name="form">
Ваше имя:
<input type="text" name="name" value="" onfocus="document.form.reset.value=' сброс '; document.form.reset.disabled=false">
<input type="submit" name="submit" value="отправить">
<input type="button" name="reset" value="сброс" onclick="document.form.name.value=''; this.value='сброшено...'; this.disabled=true">
</form>
Ваше имя:

Дополнительные атрибуты: name, value, disabled, alt, tabindex, accesskey

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

Атрибут "value" у этого типа по умолчанию пуст и в целях безопасности его может изменить только пользователь.

Вы можете загрузить свою фотографию:
<input type="file" name="foto">
<input type="submit" name="submit" value="загрузить">
Загрузите файл:

Дополнительные атрибуты: name, value, disabled, size, alt, tabindex, accesskey

наверх...

Элементы "select" и "option"

Элемент "select" создаёт выпадающий список (меню), каждый пункт списка создаётся вложенным элементом "option". Скрипту обработчику передаётся имя элемента "select" и значение выбраного элемента "option".

В каком месяце Вы родились?
<select name="name">
   <option value="1"> - Январь
   <option value="2"> - Февраль
   <option value="3"> - Март
   <option value="0"> - Не важно
</select>
В каком месяце Вы родились?

За выбранный пункт по умолчанию отвеча.т атрибут selected (без параметров).

Примечание: О элементе "select" я написал отдельную статью ("О тэге <select>", CN GROUP #1), в ней данный элемент описан очень подробно (как сделать быстрый переход, как сделать список прокручивающимся и т.д.), поэтому я не стану повторяться и предлагаю подробности прочитать именно в той статье. Найти вы её сможете в первом выпуске журнала CN GROUP, или у нас на сайте, в разделе "HTML".

Дополнительные атрибуты: name, value, disabled, size, alt, tabindex, accesskey

Элемент "textarea"

Элемент "textarea" создаёт многострочное текствое поле. Не имеет атрибута "value", так как значением данного атрибута является текст расположенный между тэгами <textarea> и </textarea>. Высота текстового поля указывается атрибутом rows="значение", единица значения этого атрибута равна текстовой строке. Ширина указывается атрибутом cols="значение", единица значения этого атрибута равна одному текстовому символу.

Напишите что-нибуть о себе:
<textarea name="name" rows="5" cols="40">
</textarea>
Напишите что-нибуть о себе:

Дополнительные атрибуты: name, value, disabled, readonly, maxlegth, alt, tabindex, accesskey

наверх...

Элемент "label"

Элемент "label" необходим только для структирования формы (то есть для удобство пользователя). С помощью этого элемента можно привязать описание к элементу формы ("установить лейбл"). Для того чтобы сделать привязку с элементом формы нужно у необходимого элемента установить атрибут "id", а у элемента "label" указать значение "id" в атрибуте "for". Если лейбл получает фокус, то его фокус автоматически передаётся привязанному элементу. Пример ниже это демонстрирует...

<label for="enter_name"> Введите имя:</label>
<input type="text" name="name" id="enter_name">

В этом примере если вы нажмёте на текст "Введите имя:" фокус автоматически получит текстовое поле привязанное к этому тексту с помощью атрибута "label". По сути в этом атрибуте нет ничего интересного, но есть интересная особенность, сам лейбл можно установить в любом месте формы, но фокус всё равно получит его "привязанный" элемент. Как видно данный атрибут создан только для того что улучшить интерфейс и юзабилити страницы.

Элементы "fieldset" и "legend"

Данные два элемента используются в паре, их предназначение группировать элементы формы. Группировка эта чиста визуальная и облегщает пользователю понимание структуры всей формы. Сгрупированные элементы выделяются браузером, как правило это рамка.

Примечание: Каждый браузер по своему выделяет сгруппированные элементы, в каком-то браузере они выглядять приемлимо, а в каком-то просто ужасно (дизайнеру на заметку).

Для того чтобы сгруппировать элементы их необходимо заключить в тэги <fieldset> и </fieldset>, после первого тэга <fieldset> нужно указать название группы заключив его в тэги <legend> и </legend>.

<!--первая группа-->
<fieldset>
   <legend>персональные данные</legend>
       имя: <input type="text" name="name">
       фамилия: <input type="text" name="surname">
</fieldset>

<!--вторая группа-->
<fieldset>
   <legend>контактные данные</legend>
       телефон: <input type="text" name="phone">
       е-мейл: <input type="text" name="mail">
</fieldset>
персональные данные имя: фамилия:
контактные данные телефон: е-мейл:

наверх...

Дополнительные атрибуты элементов формы

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

name="имя элемента" - имя элемента, указывается для передачи данных из формы на сервер. Можно использовать имена в виде массива ( name[one], name[two] ), для удобной обработки данных из формы скриптом-обработчиком.

Использование: все элементы input, select, textarea

value="значение элемента" - начальное значение элемента. Если устновлен на односторочных текстовых полях (input type="text|password"), то это значение отображается прямо в них. Если установлен на кнопках (input type="submit|reset|button"), то это значение является названием кнопки. Для элементов выбора (input type="radio|checkbox") это значение не отображается на экране, но всё же передаётся скрипту-обработчику.

Использование: все элементы input, option

disabled (без параметров) - данный атрибут "отключает" любой элемент в котором указан этот атрибут, то есть пользователь с отключенным элементом не сможет ничего сделать. Это может пригодиться если есть поля которые нужно показать пользователю, но не нужно чтобы он их изменял, или в совокупности со скриптами можно запрещать отправку формы, отключив соответствующую кнопку, если необходимые поля незаполнены. Данные из "отключенного" элемента не передаются скрипту-обработчику.

<input type="text" name="name" value="Это поле отключено" disabled>
<input type="text" name="name" value="А это нет">

Использование: все элементы input, select, textarea

readonly (без параметров) - элементы с этим атрибутом становятся только для чтения, то есть изменить пользователь содержимого не может. Данные из элемента который доступен только для чтения, передаются скрипту-обработчику.

<input type="text" name="name" value="Это поле только для чтения" readonly>
<input type="text" name="name" value="А это нет">

Использование: text, password, textarea

size="размер поля" - атрибут указывает на размер поля. Размер указывает в цифрах, каждая единица равна одному текстовому символу.

<input type="text" name="name" value="Это стандартный размер поля">
<input type="text" name="name" value="А это произвольный размер поля" size="60">

Использование: text, password, select

maxlength="число символов" - атрибут устанавливает максимальное число символов которое можно ввести в поле.

Введите ваше имя (максимум 12 символов):
<input type="text" name="name" maxlength="12">
Введите ваше имя (максимум 12 символов):

Использование: text, password

alt="альтернативный текст" - атрибут создаёт альтернативный текст в случает если элемент по каким-либо причинам не отобразился (к примеру браузер не поддерживает отображение форм). Также альтернативный текст предназначен в качестве пояснения для людей с ограниченными способностями.

<input type="text" name="name" alt="Поле для ввода имени">
<input type="submit" value="отправить" alt="Кнопка отправки данных">

Использование: все элементы input, select, textarea

tabindex="порядок фокуса" - атрибут указывает порядок фокуса элементов в случае если форма управляется с клавиатуры. По умолчанию фокус идёт "от первого к последнему", но вы можете изменить этот порядок используя данный атрибут. Значением атрибута может быть число от 0 до 32767. (фокус будет идти от меньшего к большему). Отключеные элементы (disabled) не могут принимать фокус.

<input type="text" name="name" tabindex="2">
<input type="text" name="name" tabindex="1">
<input type="submit" value="отправить" tabindex="0">

Использование: все элементы input, select, textarea, label

accesskey="клавиша доступа" - устанавливает клавишу быстрого доступа ("горячую" клавишу) для элемента. Клавишей доступа может являть любая буква, но при этом следует учитывать различие кодировки в операционной системе на которой написана клавиша доступа (то есть если клавиша доступа будет на китайском, то для африканского пользователя активировать клавишу доступа будет проблематично). Как правило клавишу доступа можно активировать в комбинации с другими клавишами (зависит от операционной системы, в Windows это Alt). При активации клавиши доступа, элемент, для которого написана эта клавиша, автоматически получает фокус.

Нажите Alt+N и фокус будет на этом поле.
<input type="text" name="name" accesskey="N" onfocus="this.value='фокус тут...'>
Нажите Alt+N и фокус будет на этом поле.

наверх...

Полезные советы

В данной части статьи я дам несколько советов по работе с формами.

1. Отображение формы порой (почти всегда) происходит не так как хочется, дело в том что у формы появляется горизонтальное расстояние между окружающим её содержимым, причём это расстояние зависит об браузера (В IE и Opera оно есть и сверху и снизу, а в Netscape и Mozila только снизу.). Не знаю чем руководствовались разработчики, но это "удобство" не совсем кстати, так как эти самые отступы распирают содержимое если им не хватает места. С этой проблемой можно столкнуться если необходимо форму расположить в узкой панели (форма поиска например), ну и везде где из соображения дизайна эти отступы не нужно. Самое интересное, что свойства CSS отвечающие за отступы (padding и margin) этого не "лечат". Мне известно два решения этой проблемы. Первое, красивое: форму нужно сделать инлайн-элементом, для этого в стилях напишите:

form { display: inline }
...или укажите стиль прямо на необходимой форме:
<form style="display: inline">

Этим решается часть проблемы, так как Netscape это не поймёт и будет делать по своему, к тому же есть много браузеров плохо работающих со стилями форм (за Oper'ой я это заметил, но в этом случае всё впорядке :)).

Второе, некрасивое: тэги <form> и </form> нужно поместить между тэгами таблицы <tr> и <td> (<tr> и <tr>, <td> и <td>).

<table>
<tr><form><td>

... элементы формы...

</td></form></tr>
</table>
Данный способ решит проблему во всех браузерах (мною протестированных: IE, Opera, Netscape, Mozilla), но во первых это неверно с точки зрения корректности разметки (неправильная вложенность тэгов), во вторых получается немного "мусорно" в коде страницы, в третьих хочется проще (приходится создавать таблицу там где она необязательна).

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

2. Часто чтобы сэкономить место, предназначение текстового поля пишут прямо внутри этого поля. Вы наверняка с этим встречались:


... и т.п.

И возможно вы встречались с тем, что если нажать на подобное поле, то её содержимое исчезает, для пользователя эта мелочь удобна и приятна. Делается это просто, внутренним событием onfocus (мы с ним встречались в течении статьи), нужно в тэг текстого поля добавить следующую строку:

<input ... onfocus="this.value='';" ... >
Не буду вдаваться в подробности о внутренних событиях, так как это отдельная тема, просто скажу что в данном случае если поле получает фокус (onfocus) мышью или с клавиатуры, то значение (value) этого (this) поля равно пустой строке (value=''), вот и получается onfocus="this.value='';" :) В браузере это выглядит так:

3. Порой при заполнении формы на каком-нибудь сайте можно увидеть просьбу:

Пожалуйста не нажимайте кнопку отправки дважды!

Просьба эта вполне оправдана, так как если нажать кнопку отправки дважды, то и данные из формы соответственно отправятся дважды и скрипта-обработчика могут возникнут проблемы с обработкой данных. Не буду разводить подробностей на эту тему, а скажу что второе нажатие можно запретить отключением кнопки отправки после первого нажатия на неё. Это делается внутренним событием onsubmit. Это событие предназначено только для элемента form, поэтому мы не можем использоваться на самой кнопке отправки данных, но мы можем присвоить кнопке имя и обратиться к нему из элемента form. В приведённом ниже примере кнопке отправки данных присвоено имя "submit", скрипт обработчик открывается в новом окне, чтобы вы могли посмотреть что кнопка отправки отключилась.

<form action="http://www.cngroup.ru/" target="_blank" onsubmit="this.submit.disabled = true">

<!-- Элементы управления формы здесь опущены-->

<input type="submit" name="submit" value="отправить">
</form>

Конечно если говорить откровенно, то этот способ не гарантирует стопроцентной защиты от двойной отправки формы, потому-что есть пользователи которые отключают клиентские скрипты (случай редкий, но всё же), поэтому не стоит забывать об обработке данных на корректность скриптом-обработчиком.

4. Когда необходимо кнопку сделать длинее чем она есть (а так иногда бывает необходимо, потому-что стантартных атрибутов для этого нет), нужно в значении (value) кнопки поставить несколько пробелов в начале и в конце этого значения (чтобы текст был по центру). Сколько нужно ставить пробелов зависит насколько нужно сделать кнопку длинее.

<input type="button" value="просто кнопка"> - стандартная длина кнопки <input type="button" value=" просто кнопка "> - произвольная длина
- стандартная длина кнопки
- произвольная длина

Немного длинные кнопки выглядят немного привлекательней, по моему :), хотя всё зависит от ситуации.

И всё...

The Happy End :) Если возникли какие-либо вопросы, то прошу пройти на форум, вопросы обязательно обретут ответы.

С уважением, я.

Properties
Выпуск #7. FORM'енный
© 2004-2005 CN GROUP
© 2004-2005 Твердохлебов Владимир ( aka mr.dsrtmn )
© 2004-2005 Вэбстроительство. С миру по нитке

Подписано в печать 2005-03-24 20:04:24, в типографии CN GROUP, при поддержке издательского дома SUBSCRIBE, общим тиражом в 1045 экземпляра(-ов).

 

http://subscribe.ru/
http://subscribe.ru/feedback/
Подписан адрес:
Код этой рассылки: inet.webbuild.cngroup
Отписаться

В избранное