Записи Друзья Комментарии
--марина--
Аватар --марина--

 -Рубрики

 -Всегда под рукой

Поиск по блогу
Яндекс

 -Приложения

  • Перейти к приложению Скачать музыку с LiveInternet.ru Скачать музыку с LiveInternet.ruПростая скачивалка песен по заданным урлам
  • ТоррНАДО - торрент-трекер для блоговТоррНАДО - торрент-трекер для блогов
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни

 -Подписка по e-mail

 

 -Интересы

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 16.01.2012
Записей:
Комментариев:
Написано: 440

Выбрана рубрика Учебник по Html для чайников.


Вложенные рубрики: (0)

Другие рубрики в этом дневнике: ШЬЕМ ПЕРЕШИВАЕМ(17), чулочная техника(10), холодный фарфор(5), фен-шуй(0), сумки(9), соленое тесто(2), смайлики(0), сделаем сами своими руками(21), свечи своими руками(10), сад и огород(0), ремонт квартиры.дома(2), растения(0), разное полезное(79), прически(4), поделки из пластиковых бутылок(13), открытки гифки(2), нумерология(1), новая жизнь старых вещей(11), мыловарение(2), мастер -классы(32), куклы(9), кройка и шитье(81), йога(4), идеи(58), игрушки (5), здоровье,красота(5), заработок в сети(3), домовые своими руками(1), домашний уют(21), дизайн,интерьер(5), диеты(8), декупаж(8), газетоплетение(1), вязание(6), бисероплетение(8), бансай(1), аватары-анимашки(1), спорт и фитнес(8), рецепты(37), Flash (0), (0)
Комментарии (0)
Нравится

Ступенька 50-ая.

Дневник
Вторник, 07 Февраля 2012 г. 12:12 + в цитатник

Формы.

Ступенька 50-ая.

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

Вот такую анкету вы предложите заполнить вашим посетителям:

 

     
Ф.И.О.


Вы: Мужчина Женщина

Какие фильмы вы любите смотреть?
фантастику
боевики
приключенческие
мелодрамы
документальные

Из этих актеров вам больше нравится:


В какую страну вы хотели бы поехать?


Ваш е-майл:


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

Что мы уже знаем? Мы знаем, как форма вводится в документ:

     
<form name="anketa" method="post" action="http://mysite.ru/script">
</form>


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

Что нам еще знакомо в этой форме? Поля для ввода текста (ФИО и е-майл):

     
<form name="anketa" method="post" action="http://mysite.ru/script">

<b>Ф.И.О.</b><br>
<input type=text name="fio" size=37 maxlength=100><br><br>

<b>Ваш е-майл:</b><br>
<input type=text name="email" size=37 maxlength=80 value="@">

</form>


Type=text - мы указали, что имеем дело с полем для ввода текста. Name - имена элементов. Size - размер полей для ввода текста. Maxlength - максимальное количество символов, которое сможет ввести наш посетитель в поле для ввода текста. Value - значение (в поле для ввода е-майл оно = @, чтобы пользователю было яснее, конечно, затем пользователь введет свое значение для того поля).

Пока что у нас с вами получилась такая форма:

     
Ф.И.О.


Ваш е-майл:


Как видите, нам еще далеко до конечного результата.

Какие элементы формы нам еще знакомы тут? Кнопка отправки информации и кнопка сброса:

     
<form name="anketa" method="post" action="http://mysite.ru/script">

<b>Ф.И.О.</b><br>
<input type=text name="fio" size=37 maxlength=100><br><br>

<b>Ваш е-майл:</b><br>
<input type=text name="email" size=37 maxlength=80 value="@"><br><br>

<input type=submit value="Отправить анкету"><input type=reset value="Отмена">

</form>


Type - тип элемента, мы указали, что это кнопка отправки и кнопка сброса. Value - надписи на кнопках.

     
Ф.И.О.


Ваш е-майл:


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

Начнем мы с "переключателей":

     
Вы: Мужчина Женщина


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

А теперь разберем код, который мы должны ввести в нашу форму:

     
<b>Вы:</b>
Мужчина<input type=radio name="sex" value="man">
Женщина<input type=radio name="sex" value="woman">
<br><br>


Итак, "переключатели" вводятся в нашу форму при помощи знакомого вам тега <INPUT>, type для которого мы указываем radio (type=radio). Name - обратите внимание, что для "переключателей" имя одинаковое, т.к. по сути это один элемент (что мы и подчеркиваем, задавая ему одно имя), зато value (значение) - должно быть обязательно разным.

Теперь поговорим о следующем незнакомом нам элементе формы, о "флажках":

     
Какие фильмы вы любите смотреть?
фантастику
боевики
приключенческие
мелодрамы
документальные


Этот элемент тоже предоставляет пользователю выбор. Чем же он отличается от "переключателей". "Флажки" предоставляют пользователю выбор И - ИЛИ. Т.е. пользователь может отметить один из предложенных вариантов, а может одновременно выбрать несколько вариантов (допустим, ваш посетителю любит как боевики, так и документальные фильмы). "Переключатели" же, как вы должны помнить, дают возможность выбрать только что-то одно из предложенного (ИЛИ - ИЛИ).

Но давайте посмотрим код для этого элемента формы и разберемся в нем:

     
<b>Какие фильмы вы любите смотреть?</b><br>
<input type=checkbox name="fiction" value="yes"> фантастику<br>
<input type=checkbox name="thriller" value="yes"> боевики<br>
<input type=checkbox name="adventure" value="yes"> приключенческие<br>
<input type=checkbox name="melodrama" value="yes"> мелодрамы<br>
<input type=checkbox name="documentary" value="yes"> документальные
<br><br>


Итак, как мы видим, во всем виноват знакомый нам тег <INPUT>, только в этот раз его атрибут type принимает значение checkbox (type=checkbox). Name - обратите внимание, имя для каждого "флажка" мы задаем свое, уникальное, зато значение (value) - для всех "флажков" одинаковое.

Если вы хотите, чтобы какой-то флажок или переключатель был выбран по умолчанию, то мы можем ввести в наш код для этого "флажка" или "переключателя" атрибут checked:

     
<b>Какие фильмы вы любите смотреть?</b><br>
<input type=checkbox name="fiction" value="yes"> фантастику<br>
<input type=checkbox name="thriller" value="yes"> боевики<br>
<input type=checkbox name="adventure" value="yes" checked> приключенческие<br>
<input type=checkbox name="melodrama" value="yes"> мелодрамы<br>
<input type=checkbox name="documentary" value="yes"> документальные
<br><br>


Как результат, в форме, предлагаемой посетителю будет уже отмечен пункт "приключенческие":

     
Какие фильмы вы любите смотреть?
фантастику
боевики
приключенческие
мелодрамы
документальные


Конечно же, ваш посетитель сможет убрать эту пометку и выбрать потом свое.

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

     
В какую страну вы хотели бы поехать?


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



     
<b>В какую страну вы хотели бы поехать?</b><br>
<select name="country">

<option value="france">Франция
<option value="USA">США
<option value="england">Англия
<option value="italy">Италия
<option value="australia">Австралия

</select>
<br><br>


Итак, выпадающий список вводится при помощи тега <SELECT></SELECT>. Каждый пункт выпадающего списка вводится при помощи тега <OPTION>. Name - мы задаем только для тега <SELECT>, и оно относится ко всему списку. Value - мы задаем для каждого тега <OPTION> (пункта списка).

По умолчанию первый пункт в списке - так и отображается, первым, выбранным. Однако, мы можем при помощи атрибута selected для тега <OPTION> выбрать другой пункт по умолчанию:

     
<b>В какую страну вы хотели бы поехать?</b><br>
<select name="country">

<option value="france">Франция
<option value="USA">США
<option value="england">Англия
<option value="italy" selected>Италия
<option value="australia">Австралия

</select>
<br><br>


Получим следующее:

     
В какую страну вы хотели бы поехать?


Также мы можем изменить разметку выпадающего списка, разбив его пункты на несколько групп, при помощи тега <OPTGROUP></OPTGROUP>:

     
<b>В какую страну вы хотели бы поехать?</b><br>
<select name="country">

<OPTGROUP label="Европа">
<option value="italy">Италия
<option value="france">Франция
</OPTGROUP>

<OPTGROUP label="Другие">
<option value="USA">США
<option value="england">Англия
<option value="australia">Австралия
</OPTGROUP>

</select>
<br><br>


Результат (нажмите на список):

     
В какую страну вы хотели бы поехать?


Вот и все премудрости с выпадающем списком. А значит нам в этом уроке осталось разобрать последний незнакомый нам элемент нашей формы:

     
Из этих актеров вам больше нравится:


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

     
<b>Из этих актеров вам больше нравится:</b><br>
<select name="actor">

<option value="gorez">Гордый Горец
<option value="rembo">Недоделанный Рембо
<option value="cowboy">Ковбой В Шляпе
<option value="crybobby">Слезливый Бобби
<option value="history">Историческая личность

</select>
<br><br>


Вот так, это выпадающий список, но стоит лишь добавить атрибут size для тега <SELECT>, то выпадающий список превратится в прокручивающийся:

     
<b>Из этих актеров вам больше нравится:</b><br>
<select name="actor" size="4">

<option value="gorez">Гордый Горец
<option value="rembo">Недоделанный Рембо
<option value="cowboy">Ковбой В Шляпе
<option value="crybobby">Слезливый Бобби
<option value="history">Историческая личность

</select>
<br><br>


Волшебство, да и только :)

Атрибут size определяет число строк в прокручивающемся списке, видимых в один момент времени. Size=4 - в нашем списке четыре видимых строки.

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


 
Рубрики:  Учебник по Html для чайников
Ступенька 1 - "Основной инструментарий, учимся работать руками". Ступенька 2 - "Что такое тэги?". Ступенька 3 - "Обязательные тэги. Зачем телу голова, а голове тело?" Главная / Html / Оглавление учебника по Html Учебник по Html для чайников - Оглавление Инструментарий. Основные понятия. Ступенька 1 - "Основной инструментарий, учимся работать руками". Ступенька 2 - "Что такое тэги?". Ступенька 3 - "Обязательные тэги. Зачем телу голова, а голове тело?" Простейшие. Ступенька 4 - "Раскрась сам. Изменяем цвет текста". Ступенька 5 - "Как изменять цвет фона страницы. Немного об этике цветов". Ступенька 6 - "Параграфы и DIV. Учимся выравнивать текст". Ступенька 7 - "Что такое заголовки и как задавать размер буковок". Ступенька 8 - "Курсив, жирный текст, подчеркнутый и другие". Ступенька 9 - "Стандартные шрифты. Как прописать свой шрифт". Ступенька 10 - "Что такое путь? Как вставлять картинки". Ступенька 11 - "Что можно сделать с картинкой. Картинка, как фон документа, и т.д.". Ступенька 12 - "О любителе сосисок и принудительном прерывании обтекания текстом картинки". Ступенька 13 - "Ссылка и как с нею бороться". Ступенька 14 - "Ссылка на е-майл. Подсказка к текстовой ссылке". Ступенька 15 - "Может ли картинка быть ссылкой". Ступенька 16 - "Куда податься, на что ссылаться. Новое окно при нажатии на ссылку". Ступенька 17 - "Карты. Как часть картинки сделать ссылкой". Ступенька 18 - "Карты. Как часть картинки сделать ссылкой 2". Ступенька 19 - "Карты. Как часть картинки сделать ссылкой 3". Ступенька 20 - "Закладка. Как сделать ссылку внутри документа". Таблицы. Ступенька 21 - "Учимся создавать таблицы". Ступенька 22 - "Учимся создавать таблицы" продолжение. Ступенька 23 - "Таблицы, вертикальное выравнивание (valign)". Ступенька 24 - "Таблицы, учимся растягивать ячейки (rowspan, colspan)". Ступенька 24-2 - "Дополнительная глава. Ответы на домашнее задание". Ступенька 25 - "Таблицы, что такое cellspacing и cellpadding. Что делать с пространством". Ступенька 26 - "Вложенные таблицы и некоторые нюансы". Ступенька 27 - "О рамках таблиц, и брюзжание о таблицах напоследок". Ступенька 28 - "Создаем простой сайт с таблицами". Дополнительные. Ступенька 29 - "Спецсимволы, или головная боль". Ступенька 30 - "О линиях. Просто и полезно". Ступенька 31 - "Как убрать отступы (поля) документа, topmargin, leftmargin, marginwidth, marginheight". Ступенька 32 - "О списках. Неупорядоченные списки". Ступенька 33 - "Упорядоченные списки. Ремарка: что такое спецификация и консорциум". Ступенька 34 - "Cпецифические тэги, бегущая строка текста". Фреймы. Ступенька 35 - "Вступление. Зачем они (фреймы) нужны." Ступенька 36 - "Учимся создавать фреймы". Ступенька 37 - "Учимся создавать фреймы" продолжение. Ступенька 38 - "Учимся создавать фреймы" продолжение. Ступенька 39 - "Убираем полосу прокрутки, избавляемся от рамок, регулируем ширину полей фрейма". Ступенька 40 - "При нажатии на ссылку документ открывается в другом фрейме, в полное окно". Ступенька 41 - "Последняя глава о фреймах. Что такое IFrame". Объекты, скрипты и другие средства, чтобы оживить наш документ. Ступенька 42 - "Немного об объектах. Вставка объектов в наш документ при помощи тэга OBJECT". Ступенька 43 - "Вставка объектов в наш документ при помощи тэга EMBED. Разница между OBJECT и EMBED". Ступенька 44 - "Что такое таблицы стилей и для чего они нужны (CSS - Cascading Style Sheets)". Ступенька 45 - "Как внедрять таблицы стилей (CSS) в наш документ". Ступенька 46 - "Что такое скрипты. Как внедрять скрипты в html-документы". Формы. Ступенька 47 - "Формы. Введение в тему". Ступенька 48 - "Элементы формы. Создание простой формы". Ступенька 49 - "Элементы формы. Создание формы поиска". Ступенька 50 - "Элементы формы. Создание опроса".

Метки:  
Комментарии (0)
Нравится

Палитра цветов с кодировкой

Дневник
Вторник, 07 Февраля 2012 г. 12:46 + в цитатник

Палитра цветов с кодировкой

 

 

Рубрики:  разное полезное
Учебник по Html для чайников
Ступенька 1 - "Основной инструментарий, учимся работать руками". Ступенька 2 - "Что такое тэги?". Ступенька 3 - "Обязательные тэги. Зачем телу голова, а голове тело?" Главная / Html / Оглавление учебника по Html Учебник по Html для чайников - Оглавление Инструментарий. Основные понятия. Ступенька 1 - "Основной инструментарий, учимся работать руками". Ступенька 2 - "Что такое тэги?". Ступенька 3 - "Обязательные тэги. Зачем телу голова, а голове тело?" Простейшие. Ступенька 4 - "Раскрась сам. Изменяем цвет текста". Ступенька 5 - "Как изменять цвет фона страницы. Немного об этике цветов". Ступенька 6 - "Параграфы и DIV. Учимся выравнивать текст". Ступенька 7 - "Что такое заголовки и как задавать размер буковок". Ступенька 8 - "Курсив, жирный текст, подчеркнутый и другие". Ступенька 9 - "Стандартные шрифты. Как прописать свой шрифт". Ступенька 10 - "Что такое путь? Как вставлять картинки". Ступенька 11 - "Что можно сделать с картинкой. Картинка, как фон документа, и т.д.". Ступенька 12 - "О любителе сосисок и принудительном прерывании обтекания текстом картинки". Ступенька 13 - "Ссылка и как с нею бороться". Ступенька 14 - "Ссылка на е-майл. Подсказка к текстовой ссылке". Ступенька 15 - "Может ли картинка быть ссылкой". Ступенька 16 - "Куда податься, на что ссылаться. Новое окно при нажатии на ссылку". Ступенька 17 - "Карты. Как часть картинки сделать ссылкой". Ступенька 18 - "Карты. Как часть картинки сделать ссылкой 2". Ступенька 19 - "Карты. Как часть картинки сделать ссылкой 3". Ступенька 20 - "Закладка. Как сделать ссылку внутри документа". Таблицы. Ступенька 21 - "Учимся создавать таблицы". Ступенька 22 - "Учимся создавать таблицы" продолжение. Ступенька 23 - "Таблицы, вертикальное выравнивание (valign)". Ступенька 24 - "Таблицы, учимся растягивать ячейки (rowspan, colspan)". Ступенька 24-2 - "Дополнительная глава. Ответы на домашнее задание". Ступенька 25 - "Таблицы, что такое cellspacing и cellpadding. Что делать с пространством". Ступенька 26 - "Вложенные таблицы и некоторые нюансы". Ступенька 27 - "О рамках таблиц, и брюзжание о таблицах напоследок". Ступенька 28 - "Создаем простой сайт с таблицами". Дополнительные. Ступенька 29 - "Спецсимволы, или головная боль". Ступенька 30 - "О линиях. Просто и полезно". Ступенька 31 - "Как убрать отступы (поля) документа, topmargin, leftmargin, marginwidth, marginheight". Ступенька 32 - "О списках. Неупорядоченные списки". Ступенька 33 - "Упорядоченные списки. Ремарка: что такое спецификация и консорциум". Ступенька 34 - "Cпецифические тэги, бегущая строка текста". Фреймы. Ступенька 35 - "Вступление. Зачем они (фреймы) нужны." Ступенька 36 - "Учимся создавать фреймы". Ступенька 37 - "Учимся создавать фреймы" продолжение. Ступенька 38 - "Учимся создавать фреймы" продолжение. Ступенька 39 - "Убираем полосу прокрутки, избавляемся от рамок, регулируем ширину полей фрейма". Ступенька 40 - "При нажатии на ссылку документ открывается в другом фрейме, в полное окно". Ступенька 41 - "Последняя глава о фреймах. Что такое IFrame". Объекты, скрипты и другие средства, чтобы оживить наш документ. Ступенька 42 - "Немного об объектах. Вставка объектов в наш документ при помощи тэга OBJECT". Ступенька 43 - "Вставка объектов в наш документ при помощи тэга EMBED. Разница между OBJECT и EMBED". Ступенька 44 - "Что такое таблицы стилей и для чего они нужны (CSS - Cascading Style Sheets)". Ступенька 45 - "Как внедрять таблицы стилей (CSS) в наш документ". Ступенька 46 - "Что такое скрипты. Как внедрять скрипты в html-документы". Формы. Ступенька 47 - "Формы. Введение в тему". Ступенька 48 - "Элементы формы. Создание простой формы". Ступенька 49 - "Элементы формы. Создание формы поиска". Ступенька 50 - "Элементы формы. Создание опроса".

Метки:  

 Страницы: 6 5 4 3 2 [1]

О проекте