javascript Базовый. Занятие 10

Темы лекции: Работа с формами.

Практическое задание: Работа с формами.

Тренер: Игорь Шкулипа, к.т.н.

JavaScript. Базовый курс

Занятие 10

http://www.slideshare.net/IgorShkulipa 2

Формы

Формы дают возможность пользователям вводить информацию и отправлять ее поуказанному адресу.

Тег <form> устанавливает форму на веб-странице. Форма предназначена дляобмена данными между пользователем и сервером. Область применения форм неограничена отправкой данных на сервер, с помощью клиентских скриптов можнополучить доступ к любому элементу формы, изменять его и применять по своемуусмотрению.

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

Для отправки формы на сервер используется кнопка Submit, того же можнодобиться, если нажать клавишу Enter в пределах формы. Если кнопка Submitотсутствует в форме, клавиша Enter имитирует ее использование.

Когда форма отправляется на сервер, управление данными передается программе,заданной атрибутом action тега <form>.

Предварительно браузер подготавливает информацию в виде пары«имя=значение», где имя определяется атрибутом name тега <input>, азначение введено пользователем или установлено в поле формы по умолчанию.

http://www.slideshare.net/IgorShkulipa


Тег <form>

В html форма задается тегами <form></form>. Все остальные элементыформы располагаются между этими тегами.

У тега есть несколько параметров:

• name - имя формы. Необходимо, если на странице несколькоформ

• action - определяет URL-адрес, по которому будет отправленаинформация введенная пользователем

• method - определяет способ отправки информации

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



Основные элементы формы. label

Элемент label — задает статичную текстовую информацию в формах.

Его основная особенность — клик на label засчитывается как клик наэлементе формы, к которому он относится. Это позволяетпосетителям кликать на большой красивой метке, а не на маленькомквадратике типа checkbox или radio.

У него два вида использования:

• Дать метке атрибут for, равный id соответствующего input:

<label for="agree">Согласен с правилами</label>

<input id="agree" type="checkbox">

• Завернуть элемент в label. В этом случае можно обойтись бездополнительных атрибутов:

<label>Кликни меня <input type="checkbox"></label>



Основные элементы формы. input, textarea

Элемент <input> предназначен для создания текстовых полей,различных кнопок, переключателей и флажков.

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

Для большинства типов input значение доступно на чтение-запись вvalue:

input.value = "Новое значение";

textarea.value = "Новый текст";

Для элементов textarea также доступно свойство innerHTML, но лучшеим не пользоваться: оно хранит только HTML, изначальноприсутствовавший в элементе.



Основные элементы формы. checkbox, radio

Для этих элементов можно узнать или установить текущее «отмеченное»состояние.

<input type="checkbox" checked>

...

alert(input.checked);



Основные элементы формы. select, option

<form name="form">

<select name=“variants" multiple>

<option value=“var1" selected>Вариант 1</option>

<option value=“var2" selected>Вариант 2</option>

<option value=“var3">Вариант 3</option>

</select>

</form>

Элементы типа select, как и input, поддерживают свойство value. Он обычновозвращает значение выбранной опции, ну а в случае <select multiple> —значение первой из них.

Элемент селекта в JavaScript можно выбрать двумя путями:

• присвоив значение select.value,• либо установив свойство select.selectedIndex:

select.selectedIndex = 0; // первый элемент

select.selectedIndex = -1 // очистит выбор.

Опции доступны через select.options. Если select допускает множественный выбор(атрибут multiple), то значения можно получить/установить, сделав цикл поselect.options:



События формы

Событие Описание Особенности

change

Изменение значения любого элемента формы. Для текстовых элементов срабатывает при потере фокуса. Для select/checkbox/radio браузеры инициируют его при выборе.

Для Opera/IE<9 срабатывает при переборе значений select с клавиатуры. Для IE<9 на чекбоксах ждёт потери фокуса.

input

Событие срабатывает только на текстовых элементах. Оно не ждет потери фокуса в отличие от change.

В IE<9 не поддерживается, в IE9 не работает при удалении.

propertychange

Только для IE. Универсальное событие для отслеживания изменения свойств элементов. Имя изменённого свойства содержится в event.propertyName. Аналог в других браузерах, кроме Safari/Chrome — DOMAttrModified.

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

cut/copy/paste

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

Вставляемое значение получить нельзя: на момент срабатывания события в элементе всё ещё старое значение.


http://help.dottoro.com/ljdchxcl.php


Событие submit

Чтобы отправить форму на сервер, у посетителя есть два способа:

• нажать кнопку <input type="submit"> или <input type="image">

• нажать Enter на поле, когда оно в фокусе.

В обоих случаях будет сгенерировано событие submit.

Если отменить в нём действие браузера, то форма не отправится насервер.

Как правило, это используется для проверки данных в форме. Если что-тоне так — выводится ошибка и отправка отменяется.

<form onsubmit="alert(‘Submit!');return false">

</form>



Метод submit

Чтобы отправить форму на сервер из JavaScript — нужно вызвать наэлементе формы метод form.submit().

При этом само событие submit не генерируется. Предполагается, чтоесли программист вызывает метод form.submit(), то он выполнил всепроверки.

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



События focus, blur

Событие focus вызывается тогда, когда пользователь фокусируется наэлементе, например кликает на input.

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

input.onfocus = function() {

// Do Something

}

input.onblur = function() {

// Do Something

}

События focus и blur не всплывают.

Таким образом, мы не можем использовать делегирование с ними.Например, мы не можем сделать так, чтобы при фокусировке в формеона подсвечивалась



События focusin, focusout

В современных стандартах есть события focusin/focusout — то жесамое, что и focus/blur, только они всплывают.

• Поддерживается в IE6+, а также в Safari/Chrome и Opera. Во всехбраузерах, кроме IE, должны быть назначены не через on-свойство, а при помощи elem.addEventListener.

• Единственный современный браузер, который их не поддерживает— это Firefox.

• Во всех браузерах, кроме IE<9, события focus/blur можно пойматьна стадии захвата, то есть указав последний аргумент true дляaddEventListener вместо обычного false.

Как правило, используют две ветки кода: focus/blur ловят на фазезахвата везде, кроме старых IE, в которых используютfocusin/focusout.



CSS вместо focus/blur

Стилизация полей ввода при фокусировке во всех браузерах, кроме IE<8,может быть решена средствами CSS, а именно — селектором :focus:

input:focus {

background-color: red;

}



Автофокус

При загрузке страницы, если на ней существует элемент с атрибутомautofocus — браузер автоматически фокусируется на этом элементе.Работает во всех браузерах, кроме IE<10.

<input type="text" name="search" autofocus>



Плейсхолдер

Плейсхолдер — это значение-подсказка внутри input, котороеавтоматически исчезает при фокусировке и существует, покапосетитель не начал вводить текст.

Во всех браузерах, кроме IE<10, это реализуется специальным атрибутомplaceholder:

<input type="text" placeholder="E-mail">



tabindex

Когда вы присваиваете tabindex="<число>" элементу:

• Появляется возможность на нем сфокусироваться.

• Пользователь при нажатии клавиши «Tab» переходит отэлемента с наименьшим положительным значением tabindex кследующему.

• Исключением является специальное значение tabindex="0",которое делает элемент всегда последним.

• Значение tabindex=-1 означает, на элементе можнофокусироваться, но только програмно. Клавиша «Tab» будетего игнорировать. Сработает только метод focus().



Проверка (валидация) форм в JavaScript

Примеры проверок, которые возможно реализовать с помощью JavaScript:

• Было ли данное поле заполнено;• В правильном ли формате пользователь указал свой адрес или

email в соответствующем поле;• Совпадают ли значения введенные в два различных поля (часто

используется для полей с паролем);• Не превышает ли значение введенное в поле максимально

допустимую длину и т.д.

Проверка форм в JavaScript возможна благодаря событию onsubmit.

Если у тэга form атрибут onsubmit="return true" форма будетотправлена на сервер, если же onsubmit="return false", то форма насервер отправлена не будет.



CSS3 анимации

Все CSS анимации состоят из двух основных моментов:

• Ключевые кадры (keyframes) - определяют основные этапы истиль анимаций

• Свойства анимаций (animation properties) - подключениеопределенной анимации к css элементу и определение вариантовзапуска анимаций



Ключевые кадры (keyframes)

Ключевые кадры являются основой CSS анимации. Они определяют то, каканимация выглядит на каждом этапе временной шкалы. Каждый @keyframesсостоит из:

• Имя анимации: имя, описывающее анимацию.• Этапы анимации: каждый этап анимации представлен в процентах. 0%

представляет собой начальное состояние анимации. 100% представляетсобой конечное состояние анимации. Между этими двумя состояниямиможно добавить еще 98 этапов.

• CSS свойства: CSS свойств, определяются для каждого этапа временнойшкалы.

Например:

@keyframes bounceIn {

0% { transform: scale(0.1); opacity: 0; }

60% { transform: scale(1.2); opacity: 1; }

100% { transform: scale(1); }

}



Свойства анимаций

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

Необходимо добавить следующие два свойства анимации для того, чтобыанимации запустились:

• animation-name: название анимации, определены в @keyframes• animation-duration: продолжительность анимации в секундах

(например, 5s) или в миллисекундах (например, 200ms).

Свойства анимаций могут быть определены в виде сокращенной формыдля более чистого кода.

animation: [animation-name] [animation-duration] [animation-

timing-function] [animation-delay] [animation-iteration-count]

[animation-direction] [animation-fill-mode] [animation-play-

state];



CSS3 свойства анимации

Свойство Описание@keyframes Контейнер для определения анимации.

animationПозволяет задать все значения для настройки выполнения анимации за одно определение.

animation-name Позволяет указать имя анимации.

animation-durationПозволяет задать скорость выполнения анимации в секундах (по умолчанию имеет значение 0).

animation-timing-function

Позволяет задать функцию смягчения отвечающую за плавность выполнения анимации (по умолчанию имеет значение ease).

animation-delay

Позволяет задать задержку перед началом выполнения анимации (по умолчанию имеет значение 0).

animation-iteration-countПозволяет задать количество повторов анимации (по умолчанию имеет значение 1).

animation-direction

При значении alternate в нечетные разы (1,3,5 ...) анимация будет проигрываться в нормальном, а в четные (2,4,6 ...) в обратном порядке. По умолчанию данное свойство имеет значение normal, при данном значении анимация всегда проигрывается в нормальном порядке.



Пример. HTML

<!DOCTYPE html> <html> <head>

<title>JavaScript OOP Example</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

<script type="text/javascript" src="js/functions.js"> </script>

<script type="text/javascript" src="js/chatclient.js"> </script>

<script type="text/javascript" src="js/register.js"> </script>

<body>

<div id="page">

<div id="head">

<div id="logo">

<img src="img/logo.png" height="94" width="100" alt="logo">

</div>

<div id="title">JavaScript OOP Example</div>

</div>

<div class="main">

<div class="innermain">

<div id="menu" class="menu">

<a href="#" id="mi1" class="menuitem">Chat</a>

</div>

<div id="content" class="content">

</div> </div> </div>

<div id="foot">

<p onmouseover="this.className = 'pmouseover'"

onmouseout="this.className = 'pmouseout'">

Move Closer to Change the Style</p>

</div> </div>



Пример. HTML

<script type="text/javascript">

var mi1 = document.getElementById("mi1");

mi1.addEventListener("click", ShowRegisterForm, false);

</script>

</body>

</html>



Пример. Форма<h1>Register to Chat</h1>

<form id='registrationform' method='post'>

<fieldset>

<label for='name'>Name:</label>

<input type='text' id='name' name='name' placeholder='Name' class='anim1' />

</fieldset>

<fieldset>

<label for='surname'>Surname:</label>

<input type='text' id='surname' name='surname' placeholder='Surname' class='anim2' />

</fieldset>

<fieldset>

<label for='email'>Email:</label>

<input type='email' id='email' placeholder='E-Mail' class='anim3' />

</fieldset>

<fieldset>

<label for='gender'>Gender:</label>

<select name='gender' single class='anim4'>

<option value='male' selected>Male</option>

<option value='female'>Female</option>

</select><br />

</fieldset>

<fieldset>

<label for='password'>Password:</label>

<input type='password' id='password' placeholder='P@$$w0rd' class='anim5' />

</fieldset>

<fieldset>

<label for='repassword'>Repeat Password:</label>

<input type='password' id='repassword' placeholder='Re-P@$$w0rd' class='anim6' />

</fieldset>

<fieldset>

<input type='submit' value='Register' class='formbutton anim7' />

</fieldset>

</form>



Пример. CSS

form {

width: 80%;

border: none;

display: table;

}

fieldset {

display: table-row inline;

width: auto;

border: none;

}

fieldset label {

display: flexbox;

width: 150px;

margin-left: 0;

margin-right: auto;

border: none;

clear: both;

}

fieldset input {

display: block;

width: 200px;

margin-left: auto;

margin-right: 0;

border: 1px solid black;

float: right;

}

fieldset input:focus {

background-color: aliceblue;

}

fieldset select {

display: block;

width: 200px;

margin-left: auto;

margin-right: 0;


float: right;

}

fieldset .formbutton {

display: block;

width: 200px;

margin-left: auto;

margin-right: auto;


position: relative;

}

.validatetrue {


}

.validatefalse {

border: 1px solid red;

}



Пример. Анимации

@keyframes bounceIn {

0% {

transform: scale(0.1);

opacity: 0; }

60% {


opacity: 1; }

100% {

transform: scale(1); }

}

@keyframes shaking {

0% {

transform: rotate(30deg); }

60% {

transform: rotate(-30deg); }

100% {

transform: rotate(0deg); }

}

@keyframes opac {

0% {

opacity: 0; }

100% {

opacity: 1; }

}

@keyframes redtowhite {

0% {

background-color: red; }

100% {

background-color: transparent; }

}

@keyframes enlarge {

0% {


opacity: 0; }

100% {

transform: scale(1);

opacity: 1; }

}

@keyframes ensmall {

0% {


opacity: 0; }

100% {


opacity: 1; }

}



Пример. Анимации

@keyframes forbutton {

0% {


10% {

background-color: green; }

20% {

background-color: blue; }

30% {


40% {


50% {


60% {


70% {


80% {


90% {


100% {

background-color: ButtonFace; }

}



Пример. Классы анимаций

.anim1 {

animation-duration: 2s;

animation-name: bounceIn;

animation-delay: 0;

}

.anim2 {


animation-name: shaking;

animation-delay: 0;

}

.anim3 {


animation-name: opac;

animation-delay: 0;

}

.anim4 {


animation-name: redtowhite;

animation-delay: 0;

}

.anim5 {


animation-name: enlarge;

animation-delay: 0;

}

.anim6 {


animation-name: ensmall;

animation-delay: 0;

}

.anim7 {


animation-name: forbutton;

animation-delay: 0;

}



Пример. Скрипт чата

ChatUI = {

...

ShowUIRegistered: function (divID, username) {

ChatEngine.UserName = username;

ChatUI.GlobalChatDivID = divID;

$(ChatUI.GlobalChatDivID).innerHTML =

ChatUI.GetWelcomeHeader() +

ChatUI.GetLoginDiv() +

ChatUI.GetMainChatDiv();

Show($(ChatUI.MainChatDivID));

Hide($(ChatUI.LoginDivID));

$(ChatUI.WelcomeHeaderID).innerHTML =

String.format(ChatUI.WelcomeMessageText,

ChatEngine.UserName);

}

}



Пример. Серверvar ws = require("nodejs-websocket");

var http = require("http");

var fs = require("fs");

var fileNumber = 0;

var httpserver = http.createServer(function (request, response) {

if (request.method == 'POST') {

var body = "";

request.on("data", function (data) {

body += data;

});

request.on("end", function () {

fs.writeFile("d:\\tmp\\test" + fileNumber.toString() + ".txt", body);

fileNumber++;

});

response.writeHead(200, { "Content-Type": "text/plain" });

response.write(“Got It!");

response.end();

}

}).listen(12346);

var server = ws.createServer(function (connection) {

connection.on("text", function (message) {

console.log("Message Received");

server.connections.forEach(function (conn) {

conn.sendText(message);

console.log("Message Sent");

});

})

}).listen(12345);



Пример. Форма

FormUI = {

FormText: " ... ",

SetValidationClass: function (elem, b) {

if (b) {

elem.className -= " validatefalse";

elem.className += " validatetrue";

} else {

elem.className -= " validatetrue";

elem.className += " validatefalse";

}

},

GetForm: function () {

return FormUI.FormText;

},

ShowForm: function (elemID) {

$(elemID).innerHTML = FormUI.GetForm();

var form = document.getElementById("registrationform");

form.setAttribute("action", "http://127.0.0.1:12346");

FormUI.BindEventHandlers();

}

};



Пример. Форма. Валидаторы ввода

ValidateName: function () {

var text = this.value;

FormUI.SetValidationClass(this, (text.length > 3));

},

ValidateSurname: function () {


FormUI.SetValidationClass(this, (text.length > 4));

},

ValidatePassword: function () {


var re = /[A-z0-9]{8,20}/;

FormUI.SetValidationClass(this, (re.test(text)));

},



Пример. Форма. Валидатор сабмита

ValidateSubmit: function () {


var nameField = document.getElementById("name");

var surnameField = document.getElementById("surname");

var passwordField = document.getElementById("password");

var repasswordField = document.getElementById("repassword");

if ((passwordField.value.length == 0) || (repasswordField.value.length == 0)) {

alert("Please input password!");

return false;

} else if ((passwordField.value != repasswordField.value)) {

alert("Password and Re-password are not the same!");

return false;

} else {

username = nameField.value + " " + surnameField.value;

form.submit();

ChatUI.ShowUIRegistered("content", username);

ChatUI.BindEventHandlers();

ChatEngine.ServerAddress = "127.0.0.1:12345";

ChatEngine.StartChat();

return false;

}

return false;

},



Пример. Форма. Привязка обрабочиков

BindEventHandlers: function () {


var nameField = document.getElementById("name");

var surnameField = document.getElementById("surname");

var passwordField = document.getElementById("password");

var repasswordField = document.getElementById("repassword");

nameField.addEventListener("keyup", FormUI.ValidateName, false);

surnameField.addEventListener("keyup", FormUI.ValidateSurname, false);

passwordField.addEventListener("keyup", FormUI.ValidatePassword, false);

repasswordField.addEventListener("keyup", FormUI.ValidatePassword, false);

form.addEventListener("submit",

function () { return FormUI.ValidateSubmit(); }, false);

}

};

function ShowRegisterForm() {

FormUI.ShowForm("content");

}



Пример. Результат



Пример. Результат на сервере

Файл test0.txt:name=Ivan&surname=Ivanov&gender=male



Лабораторная работа №7.

На персональных страницах реализовать добавлениекомментариев с помощью форм.


javascript Базовый. Занятие 10

Education