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

Темы лекции: Работа с формами.
Практическое задание: Работа с формами.
Тренер: Игорь Шкулипа, к.т.н.
JavaScript. Базовый курс
Занятие 10

http://www.slideshare.net/IgorShkulipa 2
Формы
Формы дают возможность пользователям вводить информацию и отправлять ее по
указанному адресу.
Тег <form> устанавливает форму на веб-странице. Форма предназначена для
обмена данными между пользователем и сервером. Область применения форм не
ограничена отправкой данных на сервер, с помощью клиентских скриптов можно
получить доступ к любому элементу формы, изменять его и применять по своему
усмотрению.
Документ может содержать любое количество форм, но одновременно на
сервер может быть отправлена только одна форма. По этой причине данные
форм должны быть независимы друг от друга.
Для отправки формы на сервер используется кнопка Submit, того же можно
добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit
отсутствует в форме, клавиша Enter имитирует ее использование.
Когда форма отправляется на сервер, управление данными передается программе,
заданной атрибутом action тега <form>.
Предварительно браузер подготавливает информацию в виде пары
«имя=значение», где имя определяется атрибутом name тега <input>, а
значение введено пользователем или установлено в поле формы по умолчанию.

Тег <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
Срабатывают при
вставке/копировании/удалении
текста. В них можно отменить
действие браузера, и тогда
вставке/копирования/удаления не
произойдёт.
Вставляемое значение
получить нельзя: на
момент срабатывания
события в элементе всё
ещё старое значение.

Событие 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:tmptest" + 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.

More Related Content

What's hot

Viewers also liked

Similar to JavaScript Базовый. Занятие 10.

More from Igor Shkulipa

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