Подписка
Email
Fb
RSS
Twitter
Email

Курс HTML (видео уроки) Часть5

Приветствую вас, посетители блога DenWeb.Ru. В сегодняшнем, заключительном уроке видео курса HTML речь пойдет о формах.

Формы позволяют сделать сайт более интерактивным, позволяют пользователю взаимодействовать со страницей сайта — отправить письмо автору, выполнить заказ в электронном магазине, добавить сообщение на форуме, загрузить на сайт файл...

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

Сделаем основные пометки по данной теме.

Код формы начинается и заканчивается тегами <form> и </form> соответственно. Имеет атрибуты:

action="primer.php" — задает обработчик информации. Это может быть скрипт на PHP, Perl или другом языке;

method="get" или method="post" — задает метод HTTP, который будет использоваться для передачи данных из формы. Есть два основных метода: GET и POST. Отличаются они тем, что при методе GET данные из формы добавляются к URL в открытом виде.

Пример запроса GET: http://www.site.ru/example.php?name=car&txt=message;

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

Формы предназначены для получения какой-либо информации от пользователя. Собственно средствами получения информации являются поля. Рассмотрим типы полей, применяемых для создания html форм.

Текстовые поля

Такие поля используются, например, для ввода имени пользователя, его e-mail. Задается тегом <input />. Этот тег имеет очень важный атрибут type, который определяет к какому типу относится элемент формы. Он может принимать значения: text, password, checkbox, radio,submit, reset, hidden, image, button.

Простое текстовое поле задается следующим образом:

</pre>
<form id="form1" action="primer.php" method="post" name="form1">
<input id="textfield" name="textfield" size="40" type="text" /></form>
<pre>

Пример:

Атрибут name указывает название поля, id — его идентификатор (не обязателен), size — размер поля.

Если у атрибута type задано значение type="password", то создается текстовое поле для ввода пароля (от занчения text отличается тем, что при вводе информации символы заменяются на звездочки (*).

Многострочные текстовые поля задаются тегами <textarea></textarea>.

<textarea id="textarea" cols="45" name="textarea" rows="5">Текст по умолчанию</textarea>

Атрибуты cols и rows определяют количество ширину поля в пикселах и количество строк соответственно.

Флажки (чекбоксы) и переключатели

Данные поля очень похожи, отличие их лишь в том, что переключатель пользователь может выбрать один, а флажков — несколько.


<input checked="checked" name="music" type="checkbox" value="guitar" />Гитара

 	 <input name="music" type="checkbox" value="violin" />Скрипка

     <input name="music" type="checkbox" value="flute" />Флейта

     <input checked="checked" name="number" type="radio" value="first" />Либо это

     <input name="number" type="radio" value="second" />Либо то
Гитара

Скрипка

Флейта

Либо это

Либо то

Значения атрибут value должны быть разные, чтобы скрипт «понял», какие флажки или кнопка были выбраны пользователем. Атрибут checked="checked" c таким же значением означает, что данная кнопка или чекбокс будут выбраны по умолчанию.

Раскрывающиеся меню

Создает выпадающее меню из нескольких пунктов. Делается это так:

<select multiple="multiple" name="first"><option value="guitar">Гитара</option></select>
<select multiple="multiple" name="first"><option value="violin">Скрипка</option></select>
<select multiple="multiple" name="first"><option value="flute">Флейта</option></select>

Кнопки

Кнопки служат для передачи или сброса уже введенных данных. Добавляются кнопки при помощи тега <input />. Тип кнопки submit — для отправки данных и reset — для сброса.


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

<input name="button2" type="reset" value="Сброс" />

Если вы не хотите стандартную кнопку, то в качестве кнопки для отправки можно использовать изображение:


<input src="images/button.gif" type="image" />

Я думаю понятно, что src="images/button.gif" — это путь к картинке.

Вот в принципе и все основное, что нужно знать об html формах. Пример формы:

</pre>
<form id="form2" action="primer.php" method="post" name="form2">
 Ваше имя:
<input id="textfield2" name="textfield2" type="text" />

 <input name="style" type="radio" value="classic" /> Классический

 <input name="style" type="radio" value="blues" /> Блюз

 <input name="style" type="radio" value="rock" /> Рок

Музыкальный инструмент:

 <input checked="checked" name="music" type="checkbox" value="guitar" />Гитара

 <input name="music" type="checkbox" value="violin" />Скрипка

 <input name="music" type="checkbox" value="flute" />Флейта
 <input name="button3" type="submit" value="Отправить" />
 <input name="button4" type="reset" value="Сброс" /> </form>
<pre>
Ваше имя:
Классический

Блюз

Рок

Музыкальный инструмент:

Гитара

Скрипка

Флейта

На этом мы заканчиваем видео курс HTML.

Вы можете оставить комментарий.

57 комментариев к записи “Курс HTML (видео уроки) Часть5”

  1. Евгений:

    Большое спасибо!

  2. Андрей:

    Большое спасибо)))

    С сайтом все получается

    завтра буду на css переходить

    Как с вами можно связаться ну на всякий случай

    Еще раз спасибо!!!!

  3. Снежана:

    Огромное спасибо за уроки!) Нашла много нового и полезного)

  4. Leon:

    Спасибо вам за уроки а то на язык HTML смотрел как на китайские иероглифы =)

  5. Спасибо, все усвоил! Собираюсь изучить CSS

  6. Ната:

    Спасибо, очень огромное 

  7. олег:

    У меня почему то в поле для пароля звездочки не появляются только буквы вместо них.  

  8. Кирилл:

    А как добавить в форму WYSIWYG-редактор?

  9. :D:

    В сегодняшнем, заглючительном уроке видео курса HTML речь пойдет о формах.:D

  10. Игорь:

    Скажите, а в этих 5 уроках в принципе достаточно того, что нужно знать веб-разработчику по HTML? А если нет, то еще уроки будут?

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

  11. Спасибо! Удачи и процветания!!!

  12. А как сделать чтоб это все ко мне на мыло приходило?Напиши пожалуйста мне на е-mail  hacker-pro100@mail.ru :D

  13. мой notepad не понимает по руский чо делать?

  14. ильдар:

    привет спаибо за урк не подскажеш сылочку на нотпад

  15. ЛохЪ:

    Название курса — html, а урок на xhtml О_о

  16. Александр:

    А как же tbody, thead, tfoot? Это все предназначалось для оформления сайта? можете объяснить про них поподробнее

    • Я в первом уроке писал, что буду давать только основные теги, которые всегда используются. Я, например, практически не использую перечисленные теги, но это мне не мешает. Если есть необходимость, то конечно можно и tbody, thead, tfoot применить.

  17. ХочуПисатьСайты:

    А каким образом можно привязать ссылку к кнопке? Методом тыка не получилось этого сделать :) 

    • Глеб:

      <!DOCTYPE html><html>   <head>      <title>1</title>      <script>      function html() {          location.href="index.html";      }    </script></head><body><button onclick="html()">HTML</button></body></html>JS вам в помощь...На кнопке нужно создать аттрибут-событие — onclick="«. В нем прописать название функции, а затем в блоке head прописать тег script, в нем прописать function названиеВашейФункции() { location.href=»http://google.com/"; }

  18. Спасибо огромное уже делаю странички на хтмл больше года, но у Вас научился некоторым вещам. Спасибо:) Буду ща читать про ксс и вёрстку:) 

  19. Vrezh:

    Спасибо большое)))

  20. Иван:

    А где можно найти ваши уроки по php и существуют ли они вообще?

  21. Иван:

    а не посоветуешь сайт,где можно найти хорошие видиоуроки или автора хорошего учебника(на русском)

  22. VLAD:

    создай уроки по html5

  23. Big_P:

    не дадите пример кода «primer.php» ? 

  24. Тимофей:

    Вы супер!!!!

  25. Никита:

    спасибо за уроки html всё доступно и понятно!

  26. Екатерина:

    Опечатку нашла: «Если у атрибкта type задано значение...» )) Спасибо за урок))

  27. Алексей:

    Спасибо большое вашему сайту, многому научился=)

  28. Лёшка:

    чувак, ты лучший! огромный тебе респект!=)

  29. Игорь:

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

  30. Игорь:

    Всё равно указал name и value ничего без изминений...Вод код:<form method="post" name="form1"><p>Ваше имя: <input type="text" size="60"></p><p>Пароль: <input type="password" size="30"></p><p>Музыкальный интсрумент:</br><input type="checkbox"  checked="checked">Гитара</br> <input type="checkbox"  >Скрипка</br><input type="checkbox"  >Рояль</br><input type="checkbox"  >Синтезатор</br></p><p>Выбирите:</br><input name="tor" type="radio" value="first" checked="checked" >Либо это</br><input name="tor1" type="radio" value="second" >Либо то</br></p></form>

  31. Максим:

    Спасибо!Я бы автору пожал руку!!!!!!! Все понятно и ясно будем учить дальше.

  32. Дмитрий:

    Не могу понять какую логическую нагрузку несет атрибут «name» , без него прекрасно все работает , или это уже вопрос валидации документа ? 

  33. Игорь:

    почему в IE не работают ссылки на кнопках...нет перехода по страницам? заранее спасибо.<form><a> <input type="button" value="1" /></a><a href="index.html"><input type="button" value="2" /></a></form>

  34. Александр:

    А как сделать имя сайта и поставить его в эзвестность

  35. Dinar:

    очень хорошие и быстрое обучение! спасибо большое ДенВеб:)

  36. Alex:

    <p> <input type="image" type="reset" src="images/picture.jpg" weight="10%" height="100px" alt="text" name="button3" value=Сбросит"></p>Ребят, подскажите, почему не меняется размер картинки?<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

  37. Не подскажешь, где найти пример скрипта php для отправки на почту?

  38. Дмитрий:

    Присоединяюсь к вопросу: «Подскажите с кодом primer.php»

  39. Илона:

    Уроки шикарные!!! Спасибо огромное! Знаний в HTML совсем не было, после Ваших уроков я сама верстаю странички!!! Это супер! Спасибо!

  40. Надежда:

    Спасибо вам за уроки! Наконец-то я нашла толковое изложение, с которым сложно что-то не понять!!

  41. Людмила:

    Огромное Вам спасибо за уроки ! Всё «разложено по полочкам», понятно даже для таких «чайников», как я До ваших уроков в голове от обилия информации ( смотрела и читала на эту тему много) в голове было 95% каши, 5% знаний, — это максимум. Сейчас же, оказывается, это совсем не сложно !!! Ещё раз СПАСИБО !!!!!!!!!!!!!!!!!

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика