Создание простой формы обратной связи на HTML, CSS и JavaScript
От автора: Создание HTML-форм – один из основополагающих разделов в веб-дизайне и веб-программировании. Используя формы, мы регистрируемся на сайтах, пишем сообщения в гостевые книги, оставляем комментарии, пишем и отправляем письма через веб-интерфейсы почтовых сервисов. Написание абсолютного большинства веб-приложений начинается с создания формы. На счет «абсолютного большинства» я, конечно загнул, серьезные программисты начинают, как правило, с другого. А вот начинающие разработчики, такие как автор этого туториала, начинают проектирование своего первого dt,-приложения с создания простой HTML-формы.
 | Автор: Павел КарабилоНачинающий веб-разработчик, самоучка. Живу, учусь, работаю в столице Украины. Активно изучаю JavaScript, jQuery, CSS3, HTML5, PHP, SQL. Особый интерес питаю к дизайну и разработке интерактивных интерфейсов веб-приложений (front-end). |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееВ этом туториале я буду использовать 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> <form > <p> <input type=»text» name=»name» value=»Имя автора» /> <label for=»name»>Имя</label> </p> <p> <input type=»text» name=»email» value=»[email protected]» /> <label for=»email» >E-Mail</label> </p> <p> <textarea name=»msg»>Текст сообщения</textarea> </p> <p > <input type=»submit» value=»Отправить» /> </p> </form> </div> </body> </html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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> <form > <p> <input type=»text» name=»name» value=»Имя автора» /> <label for=»name»>Имя</label> </p>
<p> <input type=»text» name=»email» value=»[email protected]» /> <label for=»email» >E-Mail</label> </p> <p> <textarea name=»msg»>Текст сообщения</textarea> </p> <p > <input type=»submit» value=»Отправить» /> </p> </form> </div> </body> </html> |
Думаю, что с разметкой пока ни у кого никаких вопросов не возникнет. У нас есть два поля для ввода имени автора и адреса его электронной почты, каждое поле подписано меткой <label>, одно большое текстовое поле для ввода сообщения и кнопка для отправки всего этого добра куда подальше . Пока это все добро выглядит приблизительно так:
Как видите, каждое текстовое поле имеет подсказку – текст, расположенный в поле.
Шаг 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=»[email protected]» onblur=»if(this.value.length == 0) this.value = ‘[email protected]'» onfocus=»if(this.value == ‘[email protected]’) this.value = » » /> ….. <textarea name=»msg» onblur=»if(this.value.length == 0) this.value = ‘Текст сообщения'» onfocus=»if(this.value == ‘Текст сообщения’) this.value=»»>Текст сообщения</textarea>
<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=»[email protected]» onblur=»if(this.value.length == 0) this.value = ‘[email protected]'» onfocus=»if(this.value == ‘[email protected]’) 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 символов, поместить в этот элемент ‘какой-то текст’)
onfocus=»if(this.value == ‘какой-то текст’) this.value = » » (если при выделении элемента в нем каходится «какой-то текст», то сделать так, чтобы в нем ничего не находилсь, то есть » «) onblur=»if(this.value.length == 0) this.value = ‘какой-то текст'» (если при удалении фокуса с элемента в нем находится 0 символов, поместить в этот элемент ‘какой-то текст’) |
Вот как это выглядит на практике:
При нажатии на элемент (при его выделении) подсказка в нем исчезает и автор сообщения может вводить свои данные. При выделении чего-либо другого, если в выделенный до этого элемент автор не внес свои данные, то в текстовом поле опять появится текст подсказки.
Шаг 3.
Разметка и миниатюрный сценарий готовы. Дело осталось за малым – за стилями.
Создадим файл CSS, например styles.css и присоединим его к нашему html-документу, добавив между тегами
… следующую строку:Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее<link rel=»stylesheet» rev=»stylesheet» type=»text/css» href=»styles.css» />
<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; }
#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 делаем углы границ закругленными. Границу контейнера делаем светлой и невыразительной, чтобы она не отвлекала внимание от более важных элементов.
Теперь, создадим определения для текстовых полей:
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; }
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 служит для создания пространства между текстом в текстовом поле и границей текстового поля. Кроме этого, ка видите, мы задаем цвет, стиль границы (опять закругленные углы) и ширину текстовых полей. Вот что у нас получается:
Что ж, неплохо, хотя не мешало бы как-то выделить поле для сообщения и кнопку отправки.
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; }
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. Вот что получается:
Это уже похоже на что-то. Далее, добавляем стили меткам label, а также делаем небольшой отступ поля Имя автора от верхней границы контейнера.
p label { margin-left: 10px; font-style: italic; color: #c0c0c0; } .name input { margin-top: 10px; }
p label { margin-left: 10px; font-style: italic; color: #c0c0c0; }
.name input { margin-top: 10px; } |
Как можно видеть, метки стали светлее и теперь они меньше выделяются, но их все равно видно:
В принципе, выглядит уже довольно неплохо, однако, можно добавить еще немного визуальной интерактивности при помощи CSS:
input:hover, textarea:hover, input:focus, textarea:focus { border-color: #A0A0A0; } .send input:hover { border: 2px solid #C0C0E3; }
input:hover, textarea:hover, input:focus, textarea:focus { border-color: #A0A0A0; }
.send input:hover { border: 2px solid #C0C0E3; } |
При наведении курсора на элемент, его границы становятся немного темнее и четче:
Вот, в принципе и все, урок по созданию простой HTML-формы подходит к концу. Мы с вами с нуля спроектировали и написали простую интерактивную веб-форму в светлых тонах, которая в будущем станет основой первой гостевой книги, написанной, например, на PHP+MySQL.
С уважением Павел Карабило
Ваши отзывы и замечания жду в комментариях!
Автор: Карабило Павел
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотретьwebformyself.com
22 лучших формы входа и регистрации на сайте в HTML&CSS!
В этой статье у нас есть для Вас специальная коллекция лучших форм: форма входа и форма регистрации для сайта, созданные с помощью CSS3 и HTML5 технологий, в современном стиле и некоторыми классными эффектами на JavaScript. Смотрите одну из лучших и современных форм входа с эффектами JQuery.
На сегодняшнее время, формы html css, очень популярны, так как всё больше сайтов имеют свою регистрацию пользователей, а это означает, что им нужна будет форма для регистрации пользователей и их входа в личный кабинет (или ещё куда-то).
Чтобы помочь Вам, я подготовил для Вас подборку лучших, на моё мнение, форм, с различным расположением полей ввода, разными цветовыми оттенками и так далее. Некоторые имеют эффекты JavaScript, с 3D переворотами, эффектным появлением.
Я считаю, что веб-дизайн играет важную роль в создании подобных форм, и ему нужно уделить должное внимание. В принципе, форма входа имеет 3 стандартных поля: логин или имя пользователя, пароль, а также кнопка “Войти”.
Итак, затаив дыхание, представляю коллекцию 22 форм регистрации и входа на сайт!
1 → Темная форма входа
Простая форма темная входа, со стандартными полями, и креативной кнопкой синего цвета.
2 → Светлая форма входа
Светлая форма входа с прозрачной рамочкой и четкой структурой.
3 → Эффектная форма с эффектом появления
Элегантная форма, светлого тона, с красивым эффектом появления “изнутри”.
4 → Простая форма с эффектом появления
Простая форма, всего 3 стандартных элемента, но с приятным эффектом появления “снизу” с прозрачностью.
5 → Красивая форма с логотипом Apple
Продуманная форма на сайт с интересным дизайном и логотипом apple.
6 → Маленькая форма в розовом стиле
Маленькая и простая, в розовом стиле, и интересным дизайном.
7 → Светлая форма
Светлая, в выдержанном стиле и дизайне, ничего лишнего.
8 → Супер форма входа и восстановления пароля
Форма входа + обратная сторона – восстановление пароля. Эффект 3D переворота, при переключении между формами.
9 → Приятная дизайнерская форма с эффектом
Приятная на вид, красивый эффект появления иконок при активации поля ввода.
10 → Форма серого цвета
Серый оттенок, в виде друг на друга наложенных листочков.
11 → Крупная форма с дополнительным элементом
Красивая, с крупными полями ввода данных, и дополнительной выпадающей кнопкой при наведении (её можно использовать для любых, задуманных целей).
12 → Дизайн в виде блокнота
Дизайн формы в виде блокнота, с простыми полями, но выдержанным стилем.
13 → Красочная, прозрачная форма
Красочная, прозрачная и цветная форма, с дополнительными кнопками входа через социальные сети, а также красивым чекбоксом “Запомнить меня”.
14 → Apple Iphone форма
Форма входа для любителей Apple, с формами ввода, кнопкой “Запомнить” – в общем мне понравилось!
15 → Чёткая форма с заголовком
Четкая и простая форма, без никаких отвлекающих элементов, и заметным черным заголовком.
16 → Тёмная форма
Тёмная форма с красивой и заметной кнопкой отправки данных.
17 → Черная форма
Черная форма входа с белыми полями – хорошее сочетание цветов.
18 → Горизонтальная форма входа и регистрации
Горизонтальная форма входа и регистрации пользователя, с эффектом 3D переключения между формами.
19 → Темная форма с дополнительными элементами
Темная форма с кнопками входа через социальные сети и красивыми полями.
20 → Форма входа на сайт + регистрация
Регистрация + форма входа, с 3D эффектом переключения между формами и социальными кнопками входа.
21 → Белая форма с красным заголовком
Светлая форма, с бросающимся в глаза заголовком, и простыми полями ввода текста.
22 → Форма входа, регистрации и восстановление пароля
Тройная форма: регистрация, вход на сайт и восстановления пароля. Переключение между формами на Javascript.
Заключение
Вот они и есть, все формы html css! Надеюсь, какая-то из них Вам точно подошла.
При использовании конкретной формы, Вам остается лишь её (возможно) немного корректировать, подогнать под свой сайт, и все будет супер! Если Вы собираетесь использовать какую-то из форм – дайте мне знать об этом в комментарии!
Данный урок подготовлен для вас командой сайта /
Подготовил: Владислав Бондаренко
vladmaxi.net
PHP — javascript — скрипт для регистрации на стороннем сайте
Частью моей работы является регистрация нескольких новых пользователей на стороннем игровом сайте.
Я написал скрипт, используя ahk, используя curl, он открывает браузер и повторяет заполнение регистрационной формы и отправки, однако веб-сайт недоволен этим, так как иногда выходит из строя или жалуется на слишком частый вход в систему в течение короткого периода времени.
Я пытаюсь переделать скрипт без необходимости открывать браузер, и я не уверен, что использовать, php с curl, JavaScript?
У кого-нибудь есть хорошие предложения и рекомендации? Мне нужно что-то легкое и быстрое. Любая помощь с благодарностью.
1
Решение
Я недавно сделал сообщение о WinHttpRequest COM и объяснил, как с ним входить: Как сделать вход в систему с помощью WinHttpRequest COM?
Если вы немного перепроектируете свой целевой сайт, вы можете изменить предоставленный код для отправки данных, необходимых для регистрации, на сервер.
Это будет выглядеть примерно так:
;Prepare our WinHttpRequest object
HttpObj := ComObjCreate("WinHttp.WinHttpRequest.5.1")
;HttpObj.SetProxy(2,"localhost:8888") ;Send data through Fiddler (for debugging)
HttpObj.SetTimeouts(6000,6000,6000,6000) ;Set timeouts to 6 seconds
;HttpObj.Option(6) := False ;disable location-header rediects
;Set our URLs
registrationURL := "http://yoursite/registerOrWhatever/"
;Set our registration data
username := "Samah"email := "[email protected]"password := "mySecretPassword"acceptTOS := 1
receiveNewsLetter := 0
registrationBody := "username=" username "&email=" email "&repeatEmail=" email "&password=" password "&repeatPassword=" password "&TOSagree=" acceptTOS "&weeklyNewsLetter=" receiveNewsLetter
HttpObj.Open("POST",registrationURL)
HttpObj.SetRequestHeader("Content-Type","application/x-www-form-urlencoded")
HttpObj.Send(registrationBody)
If (HttpObj.status == 200 && InStr(HttpObj.ResponseText,"You will shortly receive an email with an activation link."))
MsgBox, User successfully registered.
Else
MsgBox, The registration failed!
1
Другие решения
Других решений пока нет …
web-answers.ru
Создаем страницу регистрации с валидацией с использованием jQuery
Валидация страницы регистрации с помощью jQuery гарантирует, что информация, предоставленная пользователем является корректной, что позволит пользователю легко пройти процесс регистрации.
Хотя HTML5 имеет возможности для проверки форм тем не менее пока имеет смысл использовать Javascript, который будет работать и в старых браузерах.
В сегодняшнем уроке, я покажу вам, как настроить клиентскую валидацию, которая будет работать в старых браузерах. Я также буду использовать Validator jQuery Plugin. Итак, начнем.
Ресурсы, необходимые для работы с этим руководством
Что мы собираемся делать
Настройка
Во-первых, мы должны подключить наш CSS и JavaScript-код в теге head на нашей странице.
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<title>Создаем страницу регистрации с валидацией с использованием jQuery</title>
<link href=»css/style.css» media=»screen» rel=»stylesheet»>
<link href=»css/reset.css» media=»screen» rel=»stylesheet»>
<link href=’http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,700italic,800italic,400,300,600,800′ rel=’stylesheet’ type=’text/css’>
<script src=»//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js»></script>
<script src=»js/validator.js»></script>
<!—[if lt IE 9]>
<script src=»dist/html5shiv.js»></script>
<![endif]—>
</head>
HTML
В нашем HTML-файле, мы собираемся обернуть все содержимое в div с классом container, затем настроить наше меню, которое является неупорядоченным списком, с классом tabs.
<div>
<div>
<ul>
<li><a href=»#login» name=»login-tab»><span></span> Login</a></li>
<li><a href=»#register» name=»register-tab»><span></span> Register</a></li>
</ul>
Далее, мы создадим div с идентификатором login и классами form-display и show. Эти два класса будут использоваться кодом jQuery позже, чтобы скрыть и показать разделы регистрации и авторизации.
<div>
<h2>Login</h2>
<form action=»» method=»post» novalidate=»»>
<fieldset>
<ul>
<li>
<div>
<input data-validate-length-range=»6″ name=»name» placeholder=»Username» required=»required» type=»text»>
</div>
</li>
<li>
<div>
<input data-validate-length-range=»6″ name=»password» placeholder=»Password» required=’required’ type=»password»>
</div>
&
www.webmasters.by
Скрипты (ява) java и php для сайта html
Делаю подборку ява скрипты для сайта html, написанные на java и php языках. Все скрипты java и php проходят проверку на работоспособность, а уже после для вашего обзора выкладываются на сайт.Практически все java скрипты (где была возможность) имеют примеры для установки и демонстрацию, с помощью которой, вы сможете определить подходит ли вам данный скрипт на сайт.
Мой сборник скриптов постоянно будет пополняться, так что ставьте страницу в избранное, чтобы не пропустить новые поступления java скриптов для сайта html.
На www.semyana.pw компиляция
JS display none | block
В этой статье речь пойдёт о параметре display и будут показаны примеры, как с помощью Java скрипт назначить любому элементу значение block | none …JS добавить текст
В этой статье рассмотрим примеры, как можно с помощью клика на JS добавить текст к уже имеющемуся тексту. На примерах разберём, как добавить …JS замена текста
Покажу на примере с исходным кодом, как с помощью JS можно при клике быстро сделать замену текста. В представленном примере посредством …Скрипт звездного рейтинга
Скрипт рейтинга предназначен для оценки посетителями статей, видео, картинок и прочего материала на вашем сайте в виде звёзд. Скрипт использует …Обратная связь ajax с выводом сообщений
В ваших комментариях часто встречается вопрос: а как можно реализовать вывод сообщений об ошибках в форме обратной связи? И в этой …Скрипт поиска по сайту
Выставляю для ознакомления три варианта скрипта поиск по сайту на java, php и xml, любой из которых можно смело применить для любых ваших …Обратный звонок Ajax в модальном окне
Сайтам, где предлагаются какие-либо услуги или товары, для успешной торговли необходима такая форма, как Обратный звонок Ajax …Анимация html на сайт примеры
Для привлечения особого внимания посетителей используют различные эффекты анимации, которые особо часто применяют в продажных страницах …PHP скрипт регистрации и авторизации
Предлагаю вашему вниманию очень простой и функциональный скрипт регистрации и авторизации на сайте, который состоит из 3-ёх …Скрипт комментариев с админ-панелью на сайт
В этой статье хочу предоставить вам замечательный и руссифицированный скрипт комментариев на сайт с Админ-панелью, имеющий …Cлайд шоу из фотографий на сайт
А сейчас мы отправимся в «кинозал» для просмотра слайд шоу из фотографий с потрясающими эффектами при смене картинок, где …Таймер обратного отсчета на сайт
Таймер обратного отсчёта применяется на сайте для показа посетителям той или иной информации, которая имеет определённый срок …Обратная связь на java и php для сайта
Просматривая PHP и Java скрипты в интернете, нашёл некоторые понравившееся фрагменты, и решил соединить воедино некоторые их части …Красивая фотогалерея на jQuery
Рассмотрим пример — красивая фотогалерея, которое было создано с помощью jQuery, CSS и небольшого блока HTML. Как вы видите на примере …Как изменить javascript alert
Здесь я покажу, как можно изменить и сделать более красивее системное сообщение — jаvascript alert, и самое главное, в Алерт можно … Показать ещё 12Фотогалерея в модальном окне
Вашему вниманию предлагаю скрипт — фотогалереи в модальном окне. Данный скрипт ява работает на основе плагинов jquery и правильно …Скрипт голосования для сайта
Скрипт голосования для сайта написан на PHP с применением ява скриптов AJAX и легко интегрируется на html страницы. Голосование и …Скрипт комментариев от ВКонтакте
На этой странице я вам хочу показать совершенно простой скрипт комментариев от ВКонтакте. Простота его заключается в том, что …Видео в модальном окне для сайта
Продолжая тему «модальные окна» решил выложить замечательный скрипт ява для отображения видео в модальном окне. Скрипт будет …Скрипт скрытый текст на сайте
Скрипт Скрытый текст в основном используется при создание сайта с большим объёмом содержания страницы, или для сокрытия определённой …Анимация ссылок css, анимация меню
Обзор 19 примеров превосходной анимации ссылок на css и одном файле ява скрипт. Эти примеры можно использовать и для анимации меню …Анимация блока div для сайта
Приведу восемь эффективных для визуального просмотра примеров анимации блока div для сайта. Анимацию блоков можно отрегулировать …Комментарии для сайта
Вашему вниманию предлагаю довольно простой скрипт на основе Ajax с поддержкой базы данных MySQL — комментарии для сайта. Скрипт …Простая обратная связь на сайт
Обратная связь — является неотъемлемой частью практически у большинства сайтов, где с её помощью посетитель может связаться с администрацией …Фотогалерея простая на xml для сайта
В этом примере, я хочу Вам показать работу простой фотогалереи для сайта на xml, в котором показ слайдов осуществляется так же …Скрипт плавного перехода на верх
Скрипт плавного перехода на верх — предназначен главным образом для плавного и красивого перехода из любой части страницы созданного …Как сделать опрос на сайте
Вашему вниманию хочу предложить замечательный скрипт Опрос на сайте, с помощью которого можно создать неограниченное количество … Показать последниеСкрипт наверх с анимацией
Анимированный переход на верх — это такой же плавный и очень красивый переход «На верх», только с использованием анимации. В данном случае …Анимация луч света для фото, текста и блока
Уважаемые коллеги, в этой статье хочу поделиться с вами со скриптом — красивая анимация луч света, который придаст вашей картинке, тексту …Скрипт поддержка онлайн (online)
Поддержка онлайн — является необходимым компонентом для многих сайтов, где посетитель (клиент) может в онлайн режиме задать любой …Скрытый и неподвижный блок на сайт
Работу скрипта скрытого и неподвижного блока вы могли часто наблюдать на различных сайтах, — это зафиксированный элемент справа …Как добавить в избранное
Предоставляю вашему вниманию уникальный Java скрипт — Как добавить в избранное. Его уникальность заключается в том, что он …Счётчик посетителей онлайн на php
В этой статье рассмотрим 2 скрипта Счётчик посетителей на php предназначенных для подсчета количества посетителей вашего сайта …Конструктор форм обратной связи
В этой статье вам я хочу предложить уникальный скрипт «Конструктор форм обратной связи» с админ-панелью. После установки скрипта на ваш …Счётчик кликов
В наше время вы не редко встречали подобные подсчёты кликов — счётчик кликов, и назначение скрипта для учёта кликов на ссылки, либо …Ява скрипт ротатор баннеров
Здесь я вам хочу рассказать об очень простом, и в то же время надёжном, работающим в основных браузерах скрипте — Ротатор баннеров …Ссылки внутри страниц Якоря
Ссылки внутри страниц — называемые «Якоря», предназначены для быстрого перемещения по странице, когда объём содержимого довольно велик …age-dragon.com