Урок 28. Створення динамічних елементів на веб-сторінках. Валідація та збереження даних форм
28.1. Створення динамічних елементів на веб-сторінках
Порівняння статистичних та динамічних сторінок
Статичні веб-сторінки
Статичні веб-сторінки залишатимуться однаковими до тих пір, поки хтось не змінить їх вручну
Прості у дизайні
Мови додатків та веб-мови, що використовуються для створення веб-сторінок HTML, JavaScript, CSS
Інформація оновлюється рідко
Сторінки завантажуються швидко
Динамічні веб-сторінки
Динамічні веб-сторінки є поведінковими та мають можливість створювати виразний контент для різних відвідувачів
Складні в побудові
Мови додатків та веб-мови, що використовуються для створення веб-сторінок CGI, AJAX, ASP, ASP.NET
Інформація оновлюється часто
Сторінки завантажуються довше
Для написання динамічних веб-сторінок використовуються фрагменти коду, написані на мові JavaScript, яка має синтаксис, відмінний від HTML. Для того щоб відділити ці фрагменти від решти частини HTML-документа, такий код розміщують між тегами <SCRIPT>...</SCRIPT>.
Приклад створення Таблиці множення
Цей приклад дуже простий, але він демонструє способи використання деяких основних операторів JavaScript. Можна написати кожен рядок таблиці множення вручну:
<TABLE>
<TR>
<TD>2×2=4</TD> //символ × означає знак множення
<TD>3×2=6</TD>
<TD>4×2=8</TD> і так далі...
Але такий спосіб достатньо довгий і нудний, набагато швидше і раціональніше використати JavaScript:
<SCRIPT>
var i, j ; //оголошення змінних
for (i=2; i<=10; i++) { document.write ("<TR>"); //рядки
for (j=2; j<10; j++) document.write("<TD>"+j+"×"+i+"="+(i*j)+"</TD>") ; //стовпці
document.write ("</TR>"); }
</SCRIPT>
Код веб-сторінки Таблиця множення
(index.html, 1.css і результат - вигляд сторінки у браузері).
index.html
<BODY><h2>Таблиця множення</h2><TABLE align="center" BORDER="1" CELLSPACING="5" CELLPADDING="5" RULES="cols"><SCRIPT> var i, j ; for (i=1; i<=10; i++) { document.write ("<TR>"); for (j=1; j<10; j++) document.write("<TD>"+j+"×"+i+"="+(i*j)+"</TD>") ; document.write ("</TR>") ; }</SCRIPT></TABLE>
</BODY></HTML>
1.css
28.2. Валідація та збереження даних форм
Що таке валідація форми?
Ви, непевно, неодноразово відвідували сайти з формою реєстрації і пробували її заповнити? Якщо так, то при цьому могли бачити наступні повідомлення:
"Це поле є обов'язковим для заповнення" (ви не можете залишити це поле порожнім)
"Будь ласка, введіть ваш телефонний номер в форматі xxx-xxxxxxx" (введіть три цифри, тире, сім цифр)
"Будь ласка, введіть справжню адресу електронної пошти" (якщо ваша запис не в форматі "somebody@example.com")
"Ваш пароль повинен бути від 4 до 15 символів довжиною, і містити одну велику літеру, один символ, і число" і т.п.
Валідація форми - це коли користувач вводить дані, а веб-додаток перевіряє чи вони коректні. Якщо дані вірні, додаток дозволяє даними бути відправленими на сервер і (як правило) бути збереженими в базі даних, якщо ні - він видає повідомлення про помилку.
Різні типи валідації форми
Існує два різних типи перевірки форми:
Перевірка на стороні клієнта - це перевірка, яка відбувається в браузері, перш ніж дані будуть відправлені на сервер. Це зручніше, ніж перевірка на стороні сервера, так як дає миттєву відповідь.
Перевірка на стороні сервера - це перевірка, яка виникає на сервері після відправки даних. Серверний код використовується для перевірки даних перед їх збереженням в базі даних. Якщо дані не проходять перевірку валідності, відповідь відправляється назад клієнту, щоб повідомити користувачеві, які виправлення повинні бути зроблені. Перевірка на стороні сервера не така зручна, як перевірка на стороні клієнта, оскільки вона не видає помилок до тих пір, поки не буде відправлена вся форма. Проте, перевірка на стороні сервера - це остання лінія захисту вашого додатки від неправильних або навіть шкідливих даних. Всі популярні серверні фреймворки мають функції для перевірки і очищення даних (що робить їх безпечними).
У реальному світі розробники схильні використовувати комбінацію перевірки на стороні клієнта і сервера.
index.html
1.css
form { max-width: 300px; margin: 0; padding: 0 5px;}
p > label { display: block;}
input[type=text],input[type=email],input[type=number],textarea,fieldset {-webkit-appearance: none; width : 100%; border: 1px solid #333; margin: 0; font-family: inherit; font-size: 90%; -moz-box-sizing: border-box; box-sizing: border-box;}
input:invalid { box-shadow: 0 0 5px 1px red;}
input:focus:invalid { outline: none;}