Создание простой формы на HTML, CSS и JavaScript

создание html формы

От автора: Создание HTML-форм – один из основополагающих разделов в веб-дизайне и веб-программировании. Используя формы, мы регистрируемся на сайтах, пишем сообщения в гостевые книги, оставляем комментарии, пишем и отправляем письма через веб-интерфейсы почтовых сервисов. Написание абсолютного большинства веб-приложений начинается с создания формы. На счет «абсолютного большинства» я, конечно загнул, серьезные программисты начинают, как правило, с другого. А вот начинающие разработчики, такие как автор этого туториала, начинают проектирование своего первого dt,-приложения с создания простой HTML-формы.

автор

Автор: Павел Карабило

Начинающий веб-разработчик, самоучка. Живу, учусь, работаю в столице Украины. Активно изучаю JavaScript, jQuery, CSS3, HTML5, PHP, SQL. Особый интерес питаю к дизайну и разработке интерактивных интерфейсов веб-приложений (front-end).

В этом туториале я буду использовать HTML, CSS3 и совсем чуточку – JavaScript. Следуя за мной шаг за шагом, начинающий веб-программист (или веб-дизайнер) сможет создать простую форму, которая сможет стать основой для первой гостевой книги, системы комментариев или другого простого веб-приложения. Надеюсь, в недалеком будущем, я предоставлю вашему вниманию небольшой туториал, в котором расскажу, как из одной такой формы спроектировать и написать гостевую книгу, используя PHP и MySQL.

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

Также скачайте исходники себе на компьютер!

Итак, начнем.

Шаг 1.

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

поле для ввода имени автора сообщения;

поле для ввода адреса его электронной почты;

текстовую область для написания сообщения;

кнопка с надписью «Отправить» или любой другой для того, чтобы все это дело работало.

Начнем, пожалуй, с HTML. Создадим файл и назовем, его, например, index.html. Или как вам будет угодно, я назову его именно так.

Напишем в наш файл следующий HTML-код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Простейшая и крутейшая форма</title>
</head>
<body>
<div id="container">
<form class="mainform" >
  			  <p class="name">
    				<input type="text" name="name" value="Имя автора" />
       				    <label for="name">Имя</label>
    			</p>

   			 <p class="email">
    				<input type="text" name="email" value="name@example.com" />
        			 	 <label for="email" >E-Mail</label>
    </p>
    <p class="msg">
    				<textarea name="msg">Текст сообщения</textarea>
   			   </p>
   			   <p class="send" >
    				<input type="submit" value="Отправить"  />
   			 </p>
</form>
</div>
</body>
</html>

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

создание html формы

Как видите, каждое текстовое поле имеет подсказку – текст, расположенный в поле.

Шаг 2.

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

<input type="text" name="name" value="Имя автора" onblur="if(this.value.length == 0) this.value = 'Имя автора'" onfocus="if(this.value == 'Имя автора') this.value = '' "/>
.....
<input type="text" name="email" value="name@example.com" onblur="if(this.value.length == 0) this.value = 'name@example.com'" onfocus="if(this.value == 'name@example.com') this.value = '' " />
.....
<textarea name="msg" onblur="if(this.value.length == 0) this.value = 'Текст сообщения'" onfocus="if(this.value == 'Текст сообщения') this.value=''">Текст сообщения</textarea>

Как видите, мы просто описываем обработку событий onblur и onfocus. Событие onfocus срабатывает, когда мы выделяем элемент формы, событие onblur срабатывает, когда мы выделяем что-либо другое, и элемент возвращается в первоначальное состояние. В общем, кусок кода выглядит так:

onfocus="if(this.value == 'какой-то текст') this.value = '' " (если при выделении элемента в нем каходится «какой-то текст», то сделать так, чтобы в нем ничего не находилсь, то есть '' ")
onblur="if(this.value.length == 0) this.value = 'какой-то текст'"  (если при удалении фокуса с элемента в нем находится 0 символов, поместить в этот элемент 'какой-то текст')

Вот как это выглядит на практике:

создание html формы

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

Шаг 3.

Разметка и миниатюрный сценарий готовы. Дело осталось за малым – за стилями.

Создадим файл CSS, например styles.css и присоединим его к нашему html-документу, добавив между тегами … следующую строку:

<link rel="stylesheet" rev="stylesheet" type="text/css" href="styles.css"  />

Первым делом добавим стиль блоку-контейнеру.

#container {
	margin: 0 auto;
	border: 3px solid #EEEEEE;
	width: 800px;
	-webkit-birder-radius: 6px;
	-moz-border-radius: 6px;
	 border-radius: 6px; }

При помощи определений width: 800px; и margin: 0 auto; мы задаем блоку-контейнеру ширину 800 пикселей и располагаем его по центру html-документа. При помощи остальных определений задаем границу блока-контейнера – её тип, ширину цвет, а при помощи определений CSS3 -webkit-birder-radius,-moz-border-radius и border-radius делаем углы границ закругленными. Границу контейнера делаем светлой и невыразительной, чтобы она не отвлекала внимание от более важных элементов.

создание html формы

Теперь, создадим определения для текстовых полей:

input, textarea {
	border: solid 1px #CCCCCC;
	margin-left: 10px;
	padding: 4px;
	outline: 0;
	font: Verdana, Geneva, sans-serif;
	width: 200px;
	background: #F9F9F9;
	-webkit-birder-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

При помощи margin-left задаем отступ от края блока-контейнера в 10 пикселей. Определение padding служит для создания пространства между текстом в текстовом поле и границей текстового поля. Кроме этого, ка видите, мы задаем цвет, стиль границы (опять закругленные углы) и ширину текстовых полей. Вот что у нас получается:

создание html формы

Что ж, неплохо, хотя не мешало бы как-то выделить поле для сообщения и кнопку отправки.

textarea {
	width: 400px;
	height: 150px;
	line-height: 150%;
}
.send input {
	width: auto;
	margin-bottom: 10px;
	border: 2px solid #E0E0F3;
	font: Verdana, Geneva, sans-serif;
	background-color: #E5E5F8;
}

В принципе, ничего нового. Мы просто задаем новые размеры для текстовой области, включая высоту строчки line-height. Для кнопки делаем нижний отступ до границы контейнера при помощи margin-bottom. Вот что получается:

создание html формы

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

p label {
	margin-left: 10px;
	font-style: italic;
	color: #c0c0c0;
}

.name input {
	margin-top: 10px;
}

Как можно видеть, метки стали светлее и теперь они меньше выделяются, но их все равно видно:

создание html формы

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

input:hover, textarea:hover, input:focus, textarea:focus {
	border-color: #A0A0A0;
}

.send input:hover {
	border: 2px solid #C0C0E3;
}

При наведении курсора на элемент, его границы становятся немного темнее и четче:

создание html формы

Вот, в принципе и все, урок по созданию простой HTML-формы подходит к концу. Мы с вами с нуля спроектировали и написали простую интерактивную веб-форму в светлых тонах, которая в будущем станет основой первой гостевой книги, написанной, например, на PHP+MySQL.

С уважением Павел Карабило

Ваши отзывы и замечания жду в комментариях!

киберсант-вебмастер

Автор: Карабило Павел

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Проверка формы без перезагрузки с помощью JavaScript

Прямо сейчас посмотрите курс по организации динамической работы с формами!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (47)

  1. Ольга

    Вроде как понятно и доходчиво написано, но для совсем чайников, таких как например я, понятно не все: плохо и мало описан первоначальный исходный код (дано как нерадивому ученику — нате передерите простто и «будет вам»)
    что такое ?
    зачем тут ссылка?
    что вот это?
    нет дополнительных разъяснений куда эта форма потом уйдет: на мой мейл или куда?
    а так же недостает все-таки подсказки, если я хочу сделать дополнительные поля — что делать? и хотелось бы узнать о полях вида: «выбрать из списка».
    Короче, Паша, к своей работе подешел ты спустя рукава. Души нет в твоем уроке :(

    • Виктор Рог

      Оля, по-моему слишком критично. Особенно в день защитника отечества;)

    • Любовь

      Все отлично!!!
      Написано доходчиво.
      Поздравляю с праздником!!! Желаю крепкого здоровья, счастья и благополучия !

    • taika

      «Души нет в твоем уроке»
      Слишком резкая оценка.
      Кому приятно услышать такие слова. Человек потратил время и свою энергию на пост.
      Ранить человека и быть неблагодарным может каждый, а вот сказать спасибо, почему-то это сложно.

      Тут все элементарно, все же разжевать не возможно, да и такую разжеванность никто читать не будет.

      • Сергей

        А по моему все прекрасно и понятно описано!!! И исходный код и стили и скрипт!!! )))

  2. nikolay

    Что означают зеленые загнутые стрелки? Если это шифр-почему нет коментария!? Если это нужно для связки строк-то тоже должен быть коментарий или ссылка, или объяснение. С уважением Николай.

    • Андрей

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

  3. Андрей Родионов

    Спасибо за доступность и простоту. Начинаю подумывать о покупке вашего диска.

  4. Степан

    С Днём Защитника Отечества, 23 ФЕВРАЛЯ ! УРА-А-А..ААА

  5. SiriusMaster

    Всё довольно просто и понятно. Спасибо, может пригодится.

  6. Алексей

    Замечательный пост!Благодарю!
    Кое что можно и нужно использовать!
    С прошедшим праздником!

  7. Palych

    Может, конечно, и доходчиво, но вот исходни так и не удалось скачать. Они лежат на Народе, он требует установки Яндекс-бара, но и после этого скачивать не даёт.

  8. Игорь

    Намедни, как начинающий «веб-дизайнер» подсуетился и переделал форму обратной связи на narod.ru.
    Конечно, она выглядит далеко не эстетично, но работает. Используя серверные языки narod.ru (толком и не знаю каким они у себя пользуются — то ли PHP, то ли Perl) я получаю содержимое отправленного и в админпанель гостевой книги и продублировано на свой e-mail. Но это применимо только к narod.ru или аналогичным бесплатным хостингам (там, где не разрешается использование скриптов серв. языков).

    Всех с праздником!
    До встречи на баррикадах!

  9. Отец Виктор

    Спасибо, но видео уроком было бы понятнее…

  10. Android

    Пасибочки. Очень бы хотелось, чтобы была простенькая каптча. Инач могут заспамить :)

  11. Сергей

    А правильно ли в самом начале кода записана строчка:
    ?
    У меня отобразились крякозябрики? пришлось переписать так:

  12. Леонид

    Спасибо за статью. Все очень подробно и развернуто.
    Только нету, насколько я понял, действия по нажатию кнопки отправить…. Чтобы отправлялось.
    Есть только красивая форма и все….

  13. Александр

    Поздравляю Виктора Рога и Андрея Бернацкого с Днём Защитника отечества!
    По поводу формы, хотелось бы понять, какой обработчик отправит сообщение из неё на мой e-mail. Здесь об этом, к сожалению, ничего не написано. Можно ли её использовать на сайтах, которые находятся на хостингах, не поддерживающих РНР? Например на Ucoz.

    • Андрей Кудлай

      Саму форму, конечно же, можно — тут ведь нет кода PHP, только HTML и CSS. Другой вопрос в том, что у данной формы в дальнейшем, как Вы верно заметили, должен быть еще и обработчик, который и будет отправлять данные на нужный e-mail. Обработчик уже пишут на серверных языках, наиболее распространенным из которых есть PHP. Соответственно, на хостингах не поддерживающих PHP использовать такой обработчик невозможно.

  14. Николай

    Вопрос Павлу:
    Как будет отправляться сообщение и кому?
    Ведь в файле index.html не прописан метод отправки сообщения.
    И дополнительно, по-моему, нужен ещё один файл, так называемый отправщик, там должен находиться адрес получателя сообщения.

  15. Олег

    Все понятно Павел, спасибо. Хотелось вы вас спросить, а нельзя ли в эту форму связи вставить код, для опридиления IP адреса отправителя.
    Наверное не только я, но и многие другие сталкивались с разного рода «шутниками». Когда кто-нибудь вам отправляет сообщение представляясь кем то из другого города, а сам в это время живет где -нибудь в соседней квартире. В результате вы порой теряете не только свое время, но и деньги.
    Очень надеюсь, что эта тема будет интересна не только мне.

    • Андрей Кудлай

      Можно конечно. Средствами PHP можно определить IP посетителя страницы, добавить в скрытое поле этот IP и пересылать его на e-mail. Правда особого смысла в этом действе нет, поскольку при желании можно подменить IP и, находясь на самом деле в соседней квартире в городе N, IP будет указывать на город NN или вообще на другую страну.

      • Олег

        А каким образом можно подменить свой IP адрес, в форме обратной связи, если в форме обратной связи не требуется , заполнять и указывать свой IP, но при ответе в письме приходит в ответе твой реальный IP- адрес отправителя?

        • Андрей Кудлай

          Есть такая штука как анонимайзер. Она может быть представлена в виде программы или веб-ресурса, чаще второе. Пользователь, который хочет сохранить свою анонимность может воспользоваться таким ресурсом. Принцип его действия прост — пользователь запрашивает нужный ему ресурс, допустим Вашу страницу с формой. Анонимайзер загружает эту страницу для пользователя. При этом скрипт считывает, конечно же, реальный IP… но это будет IP анонимайзера, а не пользователя, т.е., скажем проще, IP сайта-посредника между Вашим сервисом и пользователем. Это один из вариантов. Если не позаботиться о защите формы, то при желании можно найти еще способы. В одном из ближайших уроков я, кстати, показываю подобный способ.

  16. Василий Сенченко

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

  17. Александр

    У меня такой же вопрос.
    Я не совсем понимаю как будет отправляться сообщение, где задано как?

  18. Never Lex

    Само свойство border-radius забыто и в демо и в исходниках :)

  19. Александр

    Все хорошо. Но все-таки я не вижу где указывается адрес получателя. Спасибо

  20. Ильдарик Бурханов

    -webkit-birder-radius …
    это не опечатка? разве не border?

  21. Юрий

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

    • Андрей Кудлай

      Не совсем согласен… В уроках в формате видео показан весь процесс от «А» до «Я». Процесс может быть где-то недостаточно разъяснен, но в любом случае он будет показан полностью. В текстовых уроках процесс создания не может быть показан в принципе, могут быть только инструкции, а вот упущения в этих инструкциях вполне возможны — все мы люди…
      Так что, ИМХО, видео однозначно лучше текста, в идеале текстовые уроки могут быть добавлены форматом видео.

  22. Замирбек

    Все замечательно.Тем,кто не понял,чуточку изучайте HTML.

  23. Алексей 13

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

  24. Aleksei

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

  25. Иван

    Блин, а куда всётаки будет отправлять и как?

  26. rim

    НО В ИНТЕРНЕТ ЭКСПЛОРЕР НЕ РАБОТАЕТ ДАЖЕ В 9 ВЕРСИИ. КАК С ЭТИМ БЫТЬ. ЕСТЬ У ВАС ХАКИ НА ЭТО. ПОПРОБУЙТЕ ОТВЕТИТЬ НА ЭТОТ ВОПРОС

  27. Сергей

    для чайников сойдет.
    Однако, даже чайникам нужно с самого начала уловить мысль, что использование тага в качестве блока — дурной тон.
    — это параграф в тексте. Если уж хочется «завернуть» инпут с лабелем в лишний блок — используйте DIV. Но в такой простой форме эти элементы-обертки совершенно излишни.

  28. Михаил

    Скажите пожалуйста как сделать чтоб форма ссылалась на мой E-mail?

    • Василий

      в большинстве случаев на подобный вопрос (на других сайтах, на форумах) рекомендуют использовать РНР — он имеет соответствующие механизмы

      в поисковиках также можно найти достаточно ссылок

  29. Joachim

    У меня такая проблема, почему у меня не получается закруглить острые концики, ведь я все сделал как показанно по примеру. И как увеличить форму, где мы вводим текстовое сообщение???

    • Joachim

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

  30. Kap

    Пасиба огромное!!!

  31. Катерина

    Павел, спасибо за статью. Хотелось бы поместить форму в передвижное модальное окно. Но когда подключаю внешний js файл, перестает работать js скрипт в input’ах, то есть становится невозможным ввести информацию в поля. В чем может быть причина, и как это можно исправить? Спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree