FORMS

В html форма задається тегами <form></form>. Всі останні

елементи форми розташовуються між цими тегами.
У тега <form> є декілька параметрів:
•name – ім’я форми. Необхідне, якщо на сторінці декілька форм
•action – визначає URL-адресу, по якій буде відправлена
інформація введена користувачем
•method – визначає спосіб відправки інформації
•target – вказує ім’я вікна, в якому будуть відображені результати
обробки відправленої інформації

<form>
<label for="fname">First name:</label><br/>
<input type="text" id="fname" name="fname"><br/>
<label for="lname">Last name:</label><br/>
<input type="text" id="lname" name="lname">
</form>
 Типи полів тега <INPUT>
<INPUT TYPE=”TEXT”>
<INPUT TYPE=”PASSWORD”>   

<INPUT TYPE=”CHECKBOX”>

<INPUT TYPE=”RADIO”>

<INPUT TYPE=”FILE”>
<INPUT TYPE=”HIDDEN”> Невидима зона
<TEXTAREA>…</TEXTAREA>
<SELECT>…<OPTIONS>…</SELECT>
 Текстовое поле
Просте однорядкове текстове поле, в яке можна
вводити и редагувати текст. Задається тегом <input>
з атрибутом type=“text”.
Параметри:
SIZE Визначає ширину поля введення тексту

MAXLENGTH Визначає максимальну кількість символів, які

користувач може ввести у цьому полі

VALUE Визначає задане за замовчуванням значення

поля (або не використовуються взагалі)

NAME Унікальний ідентифікатор

disabled Блокує поле від будь-яких змін

readonly Робить поле доступним тільки для читання

 Текстовое поле для введення
пароля
Це таке ж текстове поле, як і попередній елемент.
Різниця лише в тому, що замість введених символів
відображаються спеціальні символи.
Частіше всього використовується при введенні
паролів. Всі параметри такі ж, як у простого
текстового поля, крім параметра type="password".
 HTML5 Input Types
HTML5 added several new input types:
•color
•date
•datetime-local
•email
•month
•number
•range
•search
•tel
•time
•url
•week
 Прапорці
Цей елемент задається тегом <input>, причому один тег
задає один прапорець. Потрібно чотири прапорці,
прийдеться чотири рази писати input.
Параметри:
•type – тип элемента (в даному випадку – checkbox),
•name – ім’я элемента, вказує програмі-обробнику
форми, який пункт вибрав користувач,
•value – значення елемента, вказує програмі-обробнику
форми значення пункта, який вибрав користувач,
•checked – обраний пункт за замовченням.
 Перемикачі
На відміну від прапорців, можна вибрати тільки один пункт. В
зв’язку з цим значення параметра name повинні бути однакові
для всіх елементів групи. Параметр type="radio", всі останні такі
ж, як у прапорців.

<form name="forma1">
<input type="radio" name="lan" value="H"
сhecked> HTML
<input type="radio" name="lan" value="C">
CSS
<input type="radio" name="lan" value="J">
JavaScript
</form>
 Кнопки. Види кнопок
Існує чотири види кнопок:
•submit – кнопка відправлення вмісту форми web-серверу.
Її параметры:
• type="submit" – тип кнопки,
• name – і’мя кнопки,
• value – надпис на кнопці.
•image – графічна кнопка відправлення вмісту форми web-
серверу. Для її використання необхідно підготувати
картинку кнопки. Її параметри:
• type="image" – тип графічної кнопки,
• name – і’мя кнопки,
• src – адреса картинки для кнопки.

<input type="submit" name="submit" value="Відправити">

<input type="image" name="but_img" src="but.gif">
 Кнопки. Види кнопок
(продовження)
• reset – кнопка, що дозволяє відновити всі значення за
замовченнямв формі. Її параметры:
• type="reset" – тип кнопки очищення,
• name – і’мя кнопки,
• value – надпис на кнопці.
• button – довільна кнопка, її дії призначаються вами,
тобто сама вона робити ничого не може. Її параметры:
• type="button" – тип довільної кнопки,
• name – і’мя кнопки,
• value – надпис на кнопці.
• onclick – вказує, що робити при клікання по кнопці.
Якщо на формі декілька кнопок, то вони повинні мати
різні назви.
<input type="reset" name="reset" value="Очистити">
<input type="button" name="button"
value="Відправити">
 Кнопки
Кнопки можна задавати за допомогою тегів
<button> </button>. Можливості в таких кнопок
дещо ширші, вони можуть мати вміст в вигляді
текста або картинки. Цей тег має наступні
параметри:
•type – тип кнопки, може приймати значення:
• reset – кнопка очищення форми,
• submit – кнопка відправлення даних,
• button – кнопка довільної дії (за замовченням).
•name – і’мя кнопки,
•value – надпис на кнопці.

<button name="but"> <img src="mail.gif"> Відправити

</button>
 Поле для файлів
Поле для вводу імені файла, що супроводжується
кнопкою Browse (Вибрати), при кліканні на яку
відкривається вікно перегляду дерева папок
компь’ютера, де можна вибрати потрібний файл.

<input type="file" name="load" size="50">

 Багаторядкове текстове поле
Для об’ємних текстів, наприклад для поштових повідемлень, зручно
використати саме цей елемент. Він створюється тегами <textarea>
</textarea> та має наступні параметри:
•name – і’мя поля,
•cols – ширина поля в символах,
•rows – кількість рядків текста, видимих на екрані,
•wrap – спосіб переносу слів:
• off – без переносу,
• virtual – перенос відображається, але на сервер поступає неділимий рядок,
• physical – перенос і на екрані і при потраплянні на сервер.
•disabled – неактивне поле,
•readonly – дозволено тільки читання.
<textarea cols="20" rows="3"
wrap="off"></textarea><br/>
<textarea cols="35" rows="5"
wrap="virtual"></textarea><br/>
<textarea cols="50" rows="7"
wrap="physical"></textarea>
 Списки, що відкриваються
Списки бувають з можливістю вибору одного елемента та з
множинним вибором. Реалізувати це можна за допомогою тегів
<select> </select>, всередині яких розміщені елементи значень –
<option>. Розглянемо параметри цих тегів:
•<select>:
• name – і’мя списка. Кожен вибраний елемент списка при
передачі на сервер буде мати вигляд: name.value, де значення
(value) береться з тега option.
• size – визначає кількість видимих елементів в списку: 1 – простий
список, що розкривається, більше 1 – список с полосою
прокрутки.
• multiple – дозволяє вибір декількох елементів списку.
•<option>:
• selected – вибраний елемент.
• value – значення, що буде відправлене серверу, якщо пункт
вибраний.
Створення меню у формах
<SELECT NAME ="Name" [SIZE="Size"]
[MULTIPLE]>
<OPTION> Київ
<OPTION SELECTED> Миколаїв
<OPTION> Львів
</SELECT>
 Надписи
Всі елементи форми можна пов'язати з їх
написами за допомогою елемента <label> і його
параметра for, значенням якого є ім'я елемента, з
яким пов'язуємо напис.
Наприклад:
<label for="load">Вибирайте файл:
</label>
<input type="file" name="load"
size="30">
 Введення в HTML5

HTML5 - це п'ята версія мови розмітки HTML,

призначена для створення веб-застосунків,
що використовують аудіо, відео, графіку,
анімацію та інші функції, необхідні для
розробки мультимедійних застосунків.
 Історія розвитку HTML
Перша версія HTML, була розроблена Тімом
Бернерсом-Лі в Церні (Женева, Швейцарія) 1991-
1993 роках. Подальший розвиток HTML:
1. 1993 – HTML2.0
2. 1997 січень – HTML 3.2
3. 1997 грудень – HTML 4.0
4. 1999 – HTML 4.1
5. 2014 – HTML5
 Нова ідеологія HTML5

• Сумісність
• Зручність у використанні
• Спрощення взаємодії з браузером
• Універсальність доступу
• Парадигма без модулів
 Спеціальні символи
 Символ
 HTML-код   Назва
 
– &mdash; (довге) тире
  &nbsp; нерозривний пробіл  
§ &sect; параграф
© &copy; символ авторского права
« &laquo; ліва українська лапка
» &raquo; права українська лапка
® &reg; зареєстрована торгова марка 
° &deg; градус
² &sup2; квадрат
³ &sup3; куб
¼ &frac14; чверть
½ &frac12; половина
¾ &frac34; три чверті
× &times; знак множення
÷ &divide; знак ділення
 Спеціальні символи

Т.Г.&nbsp;Шевченко&nbsp;&mdash; справжній
український патріот.
З дому вийшов Т.Г. Вийшов Т.Г. Шевченко
Шевченко – справжній – справжній
український патріот. український патріот.

Дім здали в 2011&nbsp;році.

Пес важив 12&nbsp;кг.

Список застарілих презентаційних
елементів і атрибутів
Елементи Атрибути
basefont align 
big background 
center bgcolor 
font border 
plaintext cellpadding 
s cellspacing 
strike height 
tt valign 
u width 
 Новий дескриптор DOCTYPE

HTML4
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML5
<!DOCTYPE html>

Нове оголошення кодування

символів
HTML 4
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8“

HTML5
<meta charset=“utf-8”>
 Підключення CSS та JS

HTML4
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="scripts.js" type="text/javascript"> </script>

HTML5
<link rel="stylesheet" href="styles.css"/>
<script src="scripts.js"></script>
 Семантична розмітка
<header> </header>
<footer></footer>
<section></section>
<article></article>
<aside></aside>
<nav></nav>
<hgroup></hgroup>
<mark></mark>
 Відмінності HTML 5 від HTML 4

 Нові правила лексичного розбору;

 Нові елементи — footer, section, video,
audio, progress, nav, meter, time, aside,
canvas
 Нові типи input-елементів;
 Нові атрибути;
 Глобальні атрибути — id, tabindex, repeat
 Устарівші елементи прибрано — center,
font, strike
Коротко про головне
 CSS:
 Покращена типографіка
 Трансформації та переходи
 Нові селектори
 HTML:
 Нова розмітка
 Нові форми
 Canvas!
 Мультимедія
 JavaScript
 Drag & Drop
 Geolocation
 Збереження даних
 CSS3
Границі
Закруглені кути
.border_rounded {
background-color: #ddccb5;
border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}
 Округлені кути
Округлення на основі Округлення на основі еліпса
кола
border-radius:  R1 / R2;
border-radius: радіус; R1 – горизонтальний радіус;
R2 – вертикальний радіус.

Приклад:
Приклад: border-radius: 10px/6px;
border-radius: 10px;
border-radius: 10px; Радіус округлення для всіх
кутів

border-radius: 0 10px; лівий верхній + правий нижній

правий верхній + лівий нижній

border-radius: 20px 10px 0; лівий верхній,

правий верхній + лівий нижній,

правий нижній
border-radius: 20px 10px 5px 0; лівий верхній,

правий верхній,

правий нижній,

лівий нижній
 CSS3
Границі
Градієнтні границі
.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b
#d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b
#d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b
#d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b
#d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}
 CSS3
Границі
Тіні
.border_shadow {
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}
 CSS3
Текстові ефекти в CSS3
Тінь від тексту
.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}
 CSS3
Текстові ефекти в CSS3
Перенос довгих слів
.text_wrap {
word-wrap: break-word;
}
 CSS3
Текстові ефекти в CSS3
Використання власних шрифтів
@font-face {
font-family: 'Ім’я вашого шрифту';
src: url('http://vremenno.net/files/fonts/font.ttf');
}
 CSS3
Користувацький інтерфейс
Розтягування блоків
.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both; //або inline overflow: auto;
}
 CSS3
Користувацький інтерфейс
Виділення
.ui_outline {
width: 150px;
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid #897048;
outline-offset: 15px;
}
 CSS3
Користувацький інтерфейс
Мультиколонність
column-count: число|auto – кількість колонок
column-width: значення|auto – ширина колонок
column-gap: значення|normal – відстань між колонками
column-rule: <border-width>|<border-style>| <колір> – лінія між колонками
 CSS3
Користувацький інтерфейс
Мультиколонність
.multiplecolumns {
-moz-column-width: 130px;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}
 CSS3
Користувацький інтерфейс
Об’єднання колонок
h2 {
column-span: all;
}
 CSS3
Фонові зображення
Комбінування фонових зображень
.multiplebackgrounds {
height: 150px;
width: 270px;
padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat, url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}
 CSS3
Правила
@charset
Команда @charset застосовується для завдання кодування
зовнішнього CSS-файлу. Це має значення в тому випадку, якщо в
CSS-файлі використовуються символи національного алфавіту.
Для зовнішньої таблиці стилів браузер послідовно переглядає
наступні пункти для визначення кодування таблиці стилів:
•кодування, яке віддає сервер;
•правило @charset;
•атрибут charset тега <link>;
•кодування, встановлене в документі через метатег (<meta
charset = "utf-8">).
@charset "windows-1251";
 CSS3
Правила
@font-face
(font-family, font-size, font-style та ін.)
@font-face {
font-family: Pompadur; /* І’мя шрифту */
src: url(fonts/pompadur.ttf); /* Шлях до файлу
з шрифтом */
}
P{
font-family: Pompadur;
}
 CSS3
Правила
@media
Тип Опис
all Всі типи. Це значення використовується за умовчанням.
Мовні синтезатори, а також програми для відтворення тексту
aural
вголос. Сюди, наприклад, можна віднести мовні браузери.
Пристрої, засновані на системі Брайля, які призначені для сліпих
braille
людей.
handheld Надолонні комп'ютери і аналогічні їм апарати.
print Друкуючі пристрої на кшталт принтера.
projection Проектор.
screen Екран монитору.
tv Телевізор.
 CSS3
Правила
@media
@media тип1 [, тип2] { Опис стилю }

@media screen { /* Стиль для відображення в браузері */

body {
font-family: Arial, Verdana, sans-serif; /* Рублений шрифт */
font-size: 0.9em; /* Розмір шрифту */
color: #000080; /* Колір тексту */
}
h1 {
background: #faf0e6; /* Колір фону під текстом */
border: 2px dashed #800000; /* Рамка навколо заголовку */
color: #a0522d; /* Колір тексту */
padding: 7px; /* Поля навколо тексту */
}
}
 CSS3
Правила
@media
@media тип1 [, тип2] { Опис стилю }

@media print { /* Стиль для друку */

body {
font-family: Times, 'Times New Roman', serif; /* Шрифт с засічками */
}
h1, h2, p {
color: #000; /* Чорний колір тексту */
}
}