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

В своей работе по созданию сайтов я использую ее в качестве отличного помощника и упростителя рутинной верстки админки.

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

Давайте рассмотрим, какой функционал зачастую применяется в админке:

• Меню переключения разделов админки. Обычно, я формирую переключение разделов при помощи ссылок в горизонтальном меню сайта с используем выпадающих пунктов. В мощных сайтах может пригодится вертикальное меню, как дополнительный способ навигации в разделе.
• Вывод данных. Для формирования выводимых данных могут применяться таблицы, расположение в блоках абзаца, разделение блоков логическими заголовками.
• Редактирование данных. Для редактирования данных применяются различные поля ввода, селекторы, выпадающие списки.

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

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

Сократить усилия по верстке админ-части сайта и сэкономить драгоценное время вам поможет тот самый CSS-framework, о котором и пойдет речь в данной статье.

Итак, что же такое CSS-framework?

Это уже готовый, сверстанный и одинаково хорошо отображающийся во всех браузерах, HTML и CSS-каркас с набором всех необходимых функций, для реализации админки довольно сложно сайта.

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

Еще одним жирным плюсом в использовании CSS-framework является его бесплатность. Достаточно просто зайти на сайт официальный сайт, скачать свежую версию и…

А вот что с ней делать дальше, я наглядно расскажу в видеоуроке.

Видео на сервисе RuTube:

Видео на сервисе YouTube (Часть 1):

Видео на сервисе YouTube (Часть 2):

Из-за алгоритмов сжатия видео сервисами YouTube и RuTube, мелкие детали становятся плохо различимы. Вы можете скачать видео в лучшем качестве с Deposit Files (19.52 Мбайт *.mp4).

С уважением, Андрей Морковин.

© Андрей Морковин для SdelaySite.com, 2009. | Ссылка на пост | Комментарии: 25
Теги поста: Инструментарий разработчика

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

Скорее всего вы уже знаете о существовании замечательного свойства CSS vertical-align. И сам Бог велел нам пользоваться для вертикального выравнивания именно этим свойством (не зря же оно носит такое, говорящее само за себя, название).

Постановка задачи: Необходимо выровнять содержимое блока переменной высоты по центру относительно вертикали.

Теперь приступим к решению поставленной задачи.

И так, у нас есть блок, высота его может меняться:

<div>Содержимое блока</div>

Первое, что приходит в голову – это сделать следующий финт:

<div style=”vertical-align: middle”>Содержимое блока</div>

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

Но не тут-то было! Никакого ожидаемого выравнивания по центру таким образом мы не добьемся. А почему? Казалось бы все указано правильно. Оказывается вот в чем загвоздка: свойство vertical-align можно применять только для выравнивания содержимого ячеек таблиц или для выравнивания строчных элементов друг относительно друга.

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

Вертикальное выравнивание строчных элементов

Предположим есть у вас строка текст, которая разбита строчными тегами <span> на части:

<span id="perviy">Вас</span> <span id="vtoroy">приветствует</span> <span id="tretiy">кусок</span> текста!

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

Действие же блочного тега приводит к переносу содержимого контейнера на новую строку.

<div> – это блочный тег. Если мы заключим куски текста в блоки <div>, то каждый из них окажется на новой строке. Используя тег <span>, который, в отличие от <div>, является строчным, переноса контейнеров на новую строку не будет, все контейнеры <span> останутся в одной строке.

Контейнер <span> удобно использовать при задании части текста особого форматирования (выделение цветом, другим шрифтом и т.д.)

Для контейнеров <span> применим следующие свойства CSS:

#perviy{
    vertical-align:sub;
}

#vtoroy{
    vertical-align:3px;
}

#tretiy{
    vertical-align:-3px;
}

В результате строка текста будет иметь вот такой вид:

Это и есть ничто иное, как выравнивание строчных элементов по вертикали, и свойство CSS vertical-align с этой задачей прекрасно справляется.

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

Выравнивание по вертикали в div-контейнере

Не смотря ни на что, для выравнивания внутри div-контейнера мы будем использовать свойство vertical-align. Как я уже говорил, данное свойство можно использовать в случае выравнивания строчных элементов (этот случай мы подробно рассмотрели выше и для выравнивания в div-контейнере он нам не подходит); остается лишь использовать тот факт, что vertical-align работает для ячеек таблицы.

Как же мы сможем это использовать? У нас же нет таблицы, мы работаем с div-контейнером.

Ха, оказывается очень просто.

CSS-свойство display позволяет превратить наш блок div в ячейку таблицы, сделать это можно легко и непринужденно:

Пусть у нас есть div класса textalign:

<div class=”textalign”>Содержимое блока</div>

Для данного блока указываем следующее CSS-свойство:

.textalign{
    display: table-cell;
}

Эта CSS-инструкция чудесным образом превратит наш блок div в ячейку таблицы, визуально никак его не изменив. А для ячейки таблицы мы сможем применять свойство vertical-align в полной мере и будет работать желаемая центровка по вертикали.

Однако, все так просто закончится не может. У нас же есть замечательный браузер IE. Он не умеет работать со свойством display: table-cell (предлагаю вам ознакомится с табличкой, иллюстрирующей работоспособность данного CSS-свойства в разных браузерах на сайте htmlbook.ru). Поэтому нам придется идти на различные ухищрения.

Существует множество способов добиться выравнивания в div-контейнере для всех браузеров:

• Способ с применением дополнительного вспомогательного div-котнейнера
• Способ с использованием expression-а. Связан он с хитрым вычислением высот блоков. Без знания JavaScript тут не обойтись.
• Использование свойства line-height. Данный способ подходит только для вертикального выравнивания в блоке известной высоты, а значит в общем случае не применим.
• Использование абсолютного и относительного смещения содержимого в случае браузера IE. Мне этот способ кажется наиболее понятным и простым. Кроме того, он реализуем для div-контейнера переменной высоты. На нем мы остановимся подробнее.

Как вы понимаете, нам остается решить проблему вертикального выравнивания в IE, связанную с его непониманием свойства display: table-cell (ни IE6, ни IE7, ни IE8 с этим свойством не знакомы). Поэтому воспользовавшись условным комментарием специально для браузеров семейства IE мы укажем другие свойства CSS.

Условный комментарий

Конструкция вида:

<!--[if IE]>
...
Инструкции, действующие только в случае выполнения условия в квадратных скобках
...
<![endif]-->

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

Инструкции, содержащиеся в подобном условном комментарии будут выполнены только в случае, если браузер, интерпретирующий данный код, принадлежит к семейству IE.

Вы можете более подробно познакомится с условными комментариями.

Таким образом, используя условный комментарий, мы сможем спрятать кусок кода от всех браузеров кроме IE.

Запомнили, пошли дальше.

Решение задачи

Из-за всей этой петрушки нам нужно будет снабдить наш HTML-код двумя дополнительными контейнерами. Вот каким образом будет выглядеть наш блок с текстом:

<div class="textalign">
	<div>
		<span>Это какой-то проверочный текст. <br />Он состоит из двух строк.</span>
	</div>
</div>

Для div-контейнера класса textalign задаются CSS-свойства, которые выравнивают его содержимое по вертикали для всех нормальных браузеров (кроме IE, разумеется):

display: table-cell;
vertical-align: middle;

И еще два свойства, которые задают ширину и высоту для блока:

width:500px;
height: 500px;

Этого вполне достаточно для выравнивания содержимого контейнера по центру относительно вертикали, во всех браузерах кроме IE.

Теперь начинаем дописывать свойства, связанные с выравниванием для браузеров семейства IE (именно для них мы использовали дополнительные блоки div и span):

Обращаемся к тегу div внутри блока класса textalign. Для этого нужно указать сначала название класса, а потом, через пробел, тег, к которому мы обращаемся.

.textalign div{
    position: absolute;
    top: 50%;
}

Такая конструкция означает: для всех тегов div внутри блока с классом textalign применить перечисленные свойства.

Если все оставить так как есть, то div-контейнер, который находится внутри блока textalign, будет позиционироваться относительно верхнего левого угла браузера. Нам же нужно, чтобы смещение на 50% по вертикали произошло относительно родительского блока. Для этого достаточно применить CSS-свойство position: relative блоку textalign. Об этих особенностях я подробно рассказываю в видеоуроке по работе с блоками div.

Соответственно, стили заданные для блока textalign видоизменяются:

.textalign{
    display: table-cell;
    vertical-align: middle;
    width:500px;
    height: 500px;
    position: relative;
}

Теперь левая верхняя точка текстового блока смещена вниз на 50%.

Для пояснения происходящего я нарисовал иллюстрацию:

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

Теперь в ход пойдет тег span и его относительное позиционирование:

.textalign span{
    position: relative;
    top: -50%;
}

Тем самым, мы сместили желтый блок вверх на 50% его высоты, относительно начального положения. Как вы понимаете, высота желтого блока равна высоте центрируемого контента. И последняя операция со span-контейнером расположила наш контент посередине фиолетового блока. Ура!

Немного подшаманим

Перво-на-перво нам нужно спрятать петрушку от всех нормальных браузеров и открыть ее для IE. Сделать это можно, конечно же, при помощи условного комментария, не зря мы с ним знакомились:

<!--[if IE]>

   <style type="text/css">
      .textalign div{
          position: absolute;
          top: 50%;
      }

      .textalign span{
        position: relative;
        top: -50%;
      }
    </style>

<![endif]-->

Есть небольшая проблемка. Если центруемый контент слишком высокий, то это приводит к неприятным последствиям: появляется лишняя высота вертикальной прокрутки.

Решение проблемы: нужно добавить свойство overflow: hidden блоку textalign.

Детально познакомиться со свойством overflow можно в видеоуроке по работе с блоками div.

Окончательный вид CSS-инструкций для блока textalign имеет вид:

.textalign{
    display: table-cell;
    vertical-align: middle;
    width:500px;
    height: 500px;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
}

При желании, вы можете посмотреть HTML и CSS пример всего вышесказанного.

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

Центровка в блоке переменной высоты

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

Загвоздка в том, что для ячейки таблицы невозможно этого сделать (а ведь блок класса textalign превращается именно в ячейку таблицы, благодаря свойству display:table-cell).

В этом случае необходимо использовать внешний блок, для которого указано CSS-свойство display:table и уже для него задавать процентное значение высоты.  Тогда вложенный в него блок, с CSS-директивой display:table-cell, благополучно унаследует высоту родительского блока.

Для того, чтобы в нашем примере реализовать блок переменной высоты, мы немного подредактируем CSS:

Классу textalign мы изменим значение свойства display с table-cell на table и убирем директиву выравнивания vertical-align: middle. Теперь мы смело можем изменить значение высоты с 500 пикселов на, например, 100%.

Таким образом, CSS-свойства для блока класса textalign будут иметь следующий вид:

.textalign{
    display: table;
    width:500px;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
}

Остается реализовать центрирование содержимого. Для этого div-контейнеру, вложенному в блок класса textalign (это тот самый желтый блок на рисунке), необходимо задать CSS-свойство display:table-cell, тогда он унаследует высоту в 100% от родительского блока textalign (фиолетовый блок). И нам ничто не помешает выровнять содержимое вложенного div-контейнера по центру свойством vertical-align: middle.

Получаем еще один дополнительный список CSS-свойств для блока div, вложенного в контейнер textalign.

.textalign div{
    display: table-cell;
    vertical-align: middle;
}

Вот и вся хитрость. При желании, вы можете посмотреть на сверстанный блок переменной высоты с отцентрованным содержимым.

Дополнительную информацию по вертикальному выравниванию блока переменной высоты можно получить тут.

С уважением, Андрей Морковин.

© Андрей Морковин для SdelaySite.com, 2009. | Ссылка на пост | Комментарии: 32
Теги поста: Верстка

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

На настоящий момент существует множество способов верстки блоков с закругленными углами (статья на HabraHabr с 38-ю способами). Многие из них даже очень оригинальны и изящны.

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

• Во-первых, сложность CSS-конструкций, в которой разобраться новичку будет очень сложно.
• Во-вторых, зачем городить огород и искать себе проблемы, когда поставленную задачу можно решить, быть может, не так изящно, но все же, решить достойно и в соответствии со стандартами.
• В-третьих, большое количество способов базируются на методе раздвижных дверей, а для этого метода необходимо загружать большое изображение. Размеры этого изображения бывает сложно предугадать. Кстати, если вы не знакомы с методом раздвижных дверей, то я рассказываю про него в статье Верстка динамической кнопки на CSS.

Мы решим поставленную задачу дубовым методом, но не лишенным некоего изящества.

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

За одно с версткой вы, как и всегда, получите порцию знаний по работе с программой Photoshop.

Переходите к просмотру видеоурока.

Видеоурок на сервисе RuTube:

Первая часть видеоурока на сервисе YouTube:

Вторая часть видеоурока на сервисе YouTube:

Третья часть видеоурока на сервисе YouTube:

При желании вы можете скачать исходники верстки для тренировки.

Я думаю, что вы уже наслышаны от меня об алгоритмах сжатия видео сервисами YouTube и RuTube, из-за которых серьезно падает качество. Так вот, как обычно вы можете скачать видео в лучшем качестве с Deposit Files (21.8 МБайт *.mp4). На нем видны все мелкие детали.

Для воспроизведения видео в формате *.mp4 у вас должен быть установлен соответствующий кодек. Если воспроизведения не происходит, то скачайте, например, K-Lite_Codec_Pack_520_Full. Я его уже скачал и загрузил себе на Deposit Files. Так что желающие могут дернуть его с Депозита (11.8 МБайт).

© Андрей Морковин для SdelaySite.com, 2009. | Ссылка на пост | Комментарии: 24
Теги поста: Верстка видео допы

Предлагаю вам, уважаемый читатель, познакомится с тегом <div>. Да так познакомится, чтобы никаких вопросов больше не возникало, о том, каким образом можно позиционировать, выравнивать, смещать, растягивать и сжимать этот блок.

Ведь тег <div> – это основной инструмент для позиционирования элементов сайта на странице и все его свойства и особенности нужно знать максимально подробно.

Информацию о теге я записал в формате видеоурока.

Тематика видеоурока:

• Размеры блока div и контента, их соотношение.
• Рассматриваю особенности позиционирования (position:absolute, position:fixed, position:relative).
• Объясняю принципы построения плавающей модели.
• Иллюстрирую необходимость использования свойства CSS clear:both.

Переходите к просмотру видео.

Первая часть видео на сервисе RuTube:

Вторая часть видео на сервисе RuTube:

Третья часть видео на сервисе RuTube:

Часть #1-1 на сервисе YouTube:

Часть #1-2 на сервисе YouTube:

Часть #2-1 на сервисе YouTube:

Часть #2-2 на сервисе YouTube:

Часть #3 на сервисе YouTube:

Из-за алгоритмов сжатия сервисов RuTube и YouTube серьезно падает качество записи. Если какие-то мелкие детали сложно рассмотреть, то, для этого случая, я залил видео в лучшем качестве на Deposit Files:

• Скачать первую часть (16.34 МБайт *.mp4)
• Скачать вторую часть (Не поверите, но опять 16.3 МБайт *.mp4)
• Скачать третью часть (7.2 МБайт *.mp4)

Как вы видите, я перешел на новый формат видеофайлов. Теперь вместо *.wmv я использую *.mp4, который весит заметно меньше.

Для воспроизведения данного формата у вас должен быть установлен соответствующий кодек. Если воспроизведения не происходит, то скачайте, например, K-Lite_Codec_Pack_520_Full. Я его уже скачал и загрузил себе на Deposit Files. Так что желающие могут дернуть его с Депозита (11.8 МБайт).

С уважением, Андрей Морковин.

© Андрей Морковин для SdelaySite.com, 2009. | Ссылка на пост | Комментарии: 20
Теги поста: Верстка видео допы

Проблема, которую мы будем решать, заключается в том, что обычные кнопки, сформированные тегом <input type=”submit”> выглядят в разных браузерах по разному. Кроме того, при изменении стандартного размера кнопки, некоторые браузеры отображают ее просто ужасно.

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

Каждый браузер имеет свое мнение

Препарировать будем для троицы популярных браузеров:

• Mozilla Firefox 3.5
• Opera 9.63
• IE6 (с оглядкой на IE7, чтоб ему!)

Вот как интерпретируют простой код <input type=”submit”> наши подопытные: В принципе, ничего криминального. Вот только пунктирная обводка кнопки в браузере FF, при попадании на нее фокуса ввода, смотрится не красиво. Ее можно убрать. Для этого укажем следующее свойство CSS для кнопки класса button:

.button::-moz-focus-inner { border: 0; }

Теперь давайте сделаем большую модную кнопку и ужаснемся ее внешнему виду по умолчанию.

Верстаем большую модную кнопку

Как не странно, но кнопка подчиняется заданным через CSS размерам. Поэтому смело добавляем кнопке класса button директивы ширины и высоты:

 .button{ width:175px; height:55px; } 

Теперь посмотрим, каким образом выглядит наша большая кнопка в трех подопытных браузерах: Своим уродством поражает кнопка в IE6. Кстати,  в IE7 она выглядит ни чуть не лучше. Поэтому кнопка по умолчанию нам не подходит и мы будем верстать свою собственную кнопку.

Верстка кнопки

Итак, ширину и высоту для кнопки мы уже задали, тем самым сформировали кнопку такого размера, как нам надо.

Остается превратить уродину в красавицу.

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

В одном из предыдущих видеоуроков я наглядно продемонстрировал принципы создания графического файла, содержащего оба состояния кнопки и ее верстку по технологии раздвижных дверей с применением технологии спрайтов.

Данный графический файл мы будем применять в качестве фона для нашей кнопки (свойство CSS background-image).

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

Вот как выглядит фоновое изображение для кнопки:

• В случае по умолчанию background-position:0 (можно не указывать).
• При наведении мыши нужно переместить фоновое изображение вверх на высоту одной секции background-position:0 –56px (горизонтальное смещение не происходит, изменяется только вертикальная координата).
• При клике необходимо сместить фон еще на одну секцию вверх background-position:0 100%.

Вместе со смещением фона неплохо было бы смещать и текст на кнопке, это добавит реалистичности в ощущение нажатия.

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

Размер смещения для надписи (при наведении мыши)

Надпись внутри кнопки смещается путем задания свойства padding.

• При наведении указателя мыши padding-top: 4px

Дополнительной наглядности можно добиться путем смены указателя мыши при наведении на кнопку, со стрелки на лапку. Сделать это очень просто, всего-на-всего указать свойство cursor:pointer.

Изменение стиля кнопки при наведении мыши и клике

Здесь есть два пути: с использованием JavaScript-ов и без них. Понятно, что самый простой и приятный способ, без использования скриптов, не работает в IE, но мы все равно с ним познакомимся.

Способ без использования JavaScript

Для смены стилей при наведении указателя мыши и при клике можно использовать псевдоклассы :hover и :active.

Для кнопки класса button при наведении, благодаря псевдоклассу :hover, будет применен следующий стиль:

.button:hover{
    background-position:0 -56px;
    padding-top:4px;
}

Свойство background-position сместит фоновое изображение во второе положение, а отступ padding-top сместит надпись внутри кнопки.

Применить нужные свойства при клике можно используя псевдокласс :active

 .button:active{ background-position:0 100%;} 

Свойство background-position смещает фоновое изображение в третье положение при клике мыши.

Вышеописанный способ не подходит для IE6, т.к. в нем псевдоклассы :hover и :active работают только для тега ссылки a. Не смотря на то, что IE7 нормально работает с этими псевдоклассами, из-за своей глючности он ужасно интерпретирует данный код (добавляет несуществующие бордеры, смещает кнопку при клике).

В результате этот способ применять можно, т.к. IE6 отживает свое, пользуются им только из-за того, что он предустановлен в Windows XP; IE7 – глючный недобраузер, на смену которому пришел IE8.

Но все же, если вы хотите сделать динамическую кнопку и для IE, то следующий способ вполне пригодится.

Способ с использованием JavaScript

К тегу, формирующему кнопку применяем инструкции:

• Функция OnMouseOver – срабатывает при попадании указателя мыши в границы объекта и применяет инструкции, расположенные в ее содержимом.
• Функция OnMouseOut – содержимое применяется при выходе указателя мыши за границы объекта.
• Функция OnMouseDown – срабатывает при нажатии клавиши мыши.
• Функция OnMouseUP – срабатывает при отпускании клавиши мыши.

Посредством этих четырех функций можно реализовать весьма сносное отображение кнопки во всех популярных браузерах.

Желающие могут познакомится с CSS и HTML-кодом, иллюстрирующим все вышенаписанное (обязательно посмотрите исходный код страницы, там спрятаны подробные комментарии).

Отправка данных формы ссылкой

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

Теперь рассмотрим, как формируется такой скрипт.

Вот форма отправки:

<form name="myform" action="handle-data.php">
    Поиск: <input type="text" name="query">
    <a href="javascript: submitform()">Найти</a>
</form>

Данный кусок HTML, как вы наверное догадались, формирует строку ввода поискового запроса, подтверждением для начала поиска является клик по ссылке “Найти”.

Кликнув по ссылке “Найти” посетитель запустит JavaScript, который и отправит данные из формы обработчику:

<SCRIPT language="JavaScript">
    function submitform(){
        document.myform.submit();
    }
</SCRIPT>

Данный скрипт осуществит отправку (метод submit() ) содержимого полей формы обработчику.

Будьте внимательны! Не допускайте попадания в форму myform элементов с name=”submit” , иначе скрипт отправки будет обращаться к этому элементу, а не производить передачу данных.

Желающим более подробно разобраться с JavaScript предлагаю ознакомится с моими видеоуроками, посвященными программированию на данном языке. Непосредственно в пятом видеоуроке по JavaScript я рассказываю об особенностях обращения к форме по атрибуту name.

С уважением, Андрей Морковин.

© Андрей Морковин для SdelaySite.com, 2009. | Ссылка на пост | Комментарии: 15
Теги поста: Верстка