3.1. Таблиці

З усіх об'єктів, які використовуються для розмітки тексту в Інтернеті, таблиці є найскладнішими для початківців. Дійсно, табличні дані доводиться публікувати досить часто. На відміну від списків, абзаців, заголовків, зображень – з таблицями завжди виникає багато проблем.

З цієї лекції ми дізнаємося, як за допомогою HTML описувати таблиці, навчимося робити прості і досить складні таблиці. І, найголовніше, навчимося акуратно оформляти таблиці за допомогою CSS. Ви побачите, як насправді легко і просто працювати з таблицями.

Найпростіша таблиця

Почнемо з найпростішого. Найпростіша таблиця описується за допомогою трьох тегів:

1. <table> позначає таблицю.

2. <tr> розшифровується як «table row», позначає рядок таблиці.

3. <td> розшифровується як «table data», позначає комірку всередині рядка таблиці.

Теги <td> розташовуються усередині тегів <tr>, а ті, у свою чергу, всередині <table>. Дані комірок розміщуються всередині тегів <td>. У простій таблиці в кожному рядку має бути однакова кількість комірок, тобто всередині всіх <tr> має бути однакова кількість <td>.

Задаємо рамки (границі) за допомогою CSS

Таблиці відображаються з рамками по замовчуванню. Такі рамки відображаються, якщо у тега <table> заданий атрибут border з ненульовим значенням. Але за допомогою атрибуту border гнучко керувати рамками не виходить. З його допомогою можна тільки змінювати їх товщину. Тому ми будемо вчитися використовувати CSS-властивість таблиць –  border. За допомогою якої можна задавати як зовнішні рамки таблиці, так і рамки кожної окремої комірки (клітинки):

table {

    border: 3px solid black;

}

По замовчуванню браузер малює рамки таблиці і рамки окремих комірок окремо і з’являється ефект «подвійної рамки»:

Щоб позбутися таких подвійних рамок, використовується CSS-властивість таблиці border-collapse. Ось так:

table {

  border-collapse: collapse;

}

Значення collapse прибирає подвійні рамки: «склеює» рамки сусідніх клітин, а також рамки комірок і зовнішню рамку таблиці.

При цьому зовнішня рамка таблиці може зникнути, і щоб її повернути, можна збільшити її ширину.

Горизонтальні та вертикальні границі

Іноді потрібно, щоб границі клітинок в таблиці відображалися не повністю. Наприклад, щоб відображалася лише нижня границя клітинки, тоді таблиця виходить розкресленою по горизонталі (на стрічки). Аналогічно, якщо відображати тільки бокові границі клітинок, то таблиця виходить розбитою на стовпці. Ці ефекти легко робляться за допомогою CSS. Для цього необхідно використовувати не border, що задає рамки для всіх границь клітинок, а одну з властивостей:

• border-top,

• border-bottom,

• border-right,

• border-left.

Ці властивості відповідають за відображення кожної окремої границі клітини: верхньої, нижньої, правої або лівої відповідно.

Відступи всередині клітин таблиці

За замовчуванням  текст в клітинках таблиці «прилипає» до границь. Якщо додати відступи всередині клітин, то інформація буде сприйматися набагато краще. Відступи всередині комірок можна додавати за допомогою CSS-властивості padding, яка задає «внутрішні відступи елементу» з усіх боків. Можна задавати відступи для кожної зі сторін окремо, використовуючи властивості:

• padding-top,

• padding-right,

• padding-bottom,

• padding-left.

Наприклад, щоб задати для клітинок таблиці всі відступи в 10 пікселів, а відступ зліва в 20 пікселів, потрібно написати такий CSS-код:

td {

  padding: 10px;

  padding-left: 20px;

}

Відступи між клітинами таблиці

Більшість завдань з оформлення таблиць вирішуються за допомогою роботи з границями, відступами всередині клітин, зміни кольору фону клітин. Крім внутрішніх відступів можна задавати відступи між клітинами таблиці. Відступи між клітинами не працюють при border-collapse:collapse, що досить логічно, адже границі клітин в цьому режимі «склеєні» і їх не розірвати. Тому для цього використовується border-collapse:separate, властивість, що «розклеює» клітини. Насправді це значення за умовчанням, а ми використовуємо його лише для наочності. Якщо видалити властивість border-collapse, то результат не зміниться, клітини будуть відображатися роздільно. Відступи між клітинами можна задати:

• за допомогою атрибуту cellspacing тега <table>

• або c допомогою CSS-властивості border-spacing.

Відзначимо, що властивість border-spacing задається для таблиці, на відміну від padding, що задається для клітин.

Заголовки стовбців (стрічок)

Зазвичай в таблицях виділяють назви стовпців або рядків. У HTML для цього передбачений спеціальний тег <th>, що розшифровується як «table header» і позначає клітинку-заголовок. Тег <th> аналогічний <td>, він так само повинен розташовуватися всередині <tr>, і для нього стилями можна задавати все ті ж властивості. За умовчанням текст всередині <th> виділяється жирним і вирівнюється по центру осередки.

Заголовок таблиці

Для створення підпису до таблиці (або заголовок таблиці) використовується тег <caption>. Тег <caption> повинен розміщуватися всередині тега <table>, причому безпосередньо всередині нього і першим, відносно решти вкладених тегів. Ось так:

<table>

  <caption> Текст </ caption>

  ...

 </ table>

Тег заголовка йде перший всередині таблиці, але за допомогою CSS можна перемістити заголовок таблиці в будь-яке місце: зверху чи знизу таблиці, по центру, праворуч або ліворуч. По вертикалі заголовок таблиці переміщається CSS-властивістю caption-side зі значеннями top, що розміщує заголовок перед таблицею, і bottom – що розміщує заголовок після таблиці відповідно.

По горизонталі заголовок таблиці вирівнюється CSS-властивістю text-align зі значеннями left, right і center.

Об’єднання клітинок в таблиці

Ми підійшли до одного з найскладніших питань у роботі з таблицями – це об'єднання клітинок. Коли Ви об’єднуєте клітинки в текстовому редакторі, наприклад Word, то програма багато робить за Вас. У чистому HTML завдання об'єднання складніше, однак не варто лякатися, сам принцип об'єднання клітинок не такий вже складний, просто потрібно більше уважності.

Вихідна таблиця в прикладі не дуже красива, але за допомогою об'єднання клітинок ми зробимо складну «шапку» в таблиці, що має ось такий вигляд:

Почнемо з об'єднання клітин по горизонталі. Щоб об'єднати клітини по горизонталі необхідно використовувати атрибут colspan у тегів <th> або <td>. Коли ви задаєте клітині атрибут colspan зі значенням 2, то вона ніби «розтягується» на клітинку праворуч, але та клітинка не зникає, а відсувається і в таблиці з'являється новий стовпець. Щоб видалити його, потрібно видалити клітину, що знаходиться праворуч від «розтягнутої».

Об'єднання клітин по вертикалі трохи складніше. Воно здійснюється за допомогою атрибуту rowspan тега <td> або <th>. Коли Ви задаєте клітині атрибут rowspan зі значенням 2, то вона ніби «розтягується» на наступний рядок. При цьому клітина, яка була під «розтягнутою», відсувається у своєму ж рядку вправо, що робить в таблиці зайвий стовпець. Видаливши клітинку, яка була під «розтягнутою» ми позбудемося цього стовпця. Фактично клітинки, місце яких займають об’єднанні клітинки, ніби видавлюються далі поздовж рядка:

Чи можна об'єднувати більше двох клітинок по горизонталі? Можна! При цьому точно так само використовується атрибут colspan. Однак, так як клітинка «розтягується» вправо більш, ніж на одну сусідню клітинку, то і зайвих стовпців з'являється більше. Наприклад, якщо встановити colspan рівним 4, то клітинка розтягнеться на три сусідні клітини праворуч, а вони в свою чергу змістяться додавши в таблицю три стовпці.

Об'єднання кількох комірок по вертикалі теж можливе. Як Ви пам'ятаєте, при вертикальному об'єднанні витісняються клітинки, які знаходяться в рядках під «розтягнутою» клітинкою. І ці клітини «з’їжджають» праворуч у своїх рядках.

Можна розтягувати комірку одночасно по вертикалі та по горизонталі. Для цього потрібно задати комірці два атрибути: rowspan і colspan. Витіснення сусідніх комірок відбуватиметься так само, як і при звичайному об'єднанні комірок. Правда, витіснених комірок виявиться більше. Наприклад, комірка з rowspan = "2" і colspan = "2" витіснить три сусідні комірки – одну в першому рядку і дві у другому:

Вирівнювання тексту в комірках

Вміст комірок можна вирівнювати по горизонталі і по вертикалі за допомогою CSS. За вирівнювання по горизонталі відповідає CSS-властивість text-align. Найчастіше використовуються значення left, center і right. За вирівнювання по вертикалі відповідає CSS-властивість vertical-align. Найчастіше використовуються значення top, middle і bottom. Насправді, значень у обох властивостей більше, але у випадку з комірками нас цікавлять лише перераховані. Щоб задати вирівнювання контенту комірок, треба в стилях вказати:

td {

  vertical-align: значення;

  text-align: значення;

}

Ці стилі вплинуть на всі комірки таблиці. Щоб задати вирівнювання тільки в деяких, потрібно назначити їм класи і створити стилі для відповідних класів.

Зміна кольору фону в таблиці

Таблиці можна розфарбовувати, задаючи колір фону окремих комірок, колір тексту в комірках, а також колір рамок (границь). Кольором елементів можна керувати за допомогою властивостей:

• background-color - задає колір фону,

• color - колір тексту,

• border-color - колір рамки.

До цього ми використовували компактну форму для опису рамок: border: 1px solid lightgray. У цьому записі колір задає третій параметр - lightgray. Значення кольорів у CSS задаються різними способами, ми будемо використовувати ключові слова для опису кольору. Таким чином, щоб задати колір для комірки в CSS, потрібен наступний код:

td {

  color: колір;

  background-color: колір;

  border: 1px solid колір;

}

Звичайно, розфарбовувати можна і td, і th, і навіть table. Якщо задавати стилі для тега, наприклад td, то вони застосуються до всіх тегів - td. Як бути, якщо стилі потрібно задати для якоїсь певної комірки, групи комірок, або рядка? Можна використовувати класи і застосовувати стилі для цих класів. Наприклад, ось так:

.my-class {

  стилі

}

Також для фону можна задавати картинки.

Задання розмірів таблиці

За замовчуванням ширина і висота таблиці залежить від вмісту і відступів всередині її комірок. Чим менший вміст, тим менший розмір таблиці. За допомогою CSS можна управляти розмірами таблиці, задавати бажану ширину і висоту. Також розмірами можна керувати за допомогою атрибутів таблиці, але ми розглянемо лише CSS. Варто відзначити, що у таблиці є мінімальні розміри, які залежать від змісту, менше яких вона не стиснеться, яке б значення ширини або висоти не задавалося.

Ширина таблиці задається за допомогою CSS-властивості width, а висота за допомогою властивості height, наприклад:

table {

  width: 100px;

  height: 100px;

}

Розміри таблиці можна задавати як в абсолютних одиницях, наприклад, в пікселях - 20px, так і у відносних – відсотках - 20%.

При використанні відсотків розміри таблиці будуть обчислюватися з урахуванням розмірів батьківського елементу, наприклад ширини вікна браузера. Особливе значення auto включає розрахунок розмірів за замовчуванням. Наприклад: width:auto; або height:auto;. Варто зазначити, що відсотки при заданні висоти зазвичай не працюють.

Розміри окремих комірок і стовпців теж можна задавати вручну, особливо якщо вам не подобається, як браузер розподілив ширину колонок. Розміри комірок задаються точно так само, як і розміри таблиці: за допомогою CSS-властивостей width і height.

Є два варіанти використання стилів для окремих комірок:

1. призначати коміркам унікальні імена класів, наприклад: class="cell-11", і застосовувати стилі для цих класів;

2. використовувати атрибут style, всередині якого можна писати CSS-код.

Приклад другого варіанту:

<td style="width:100px;">   ... </ td>

На щастя, не часто є потреба задавати розміри кожної комірки. Зазвичай розміри комірок прописують, якщо треба вручну встановити ширину стовпців таблиці: для цього досить задати ширину для кожної комірки першої строки.

3.2. Форми

Всесвітній павутині було потрібно не так багато часу, щоб перетворитися з мережі сторінок для читання, в місце, куди приходять, щоб досягти мети - купити товари, замовити квитки на літак, підписати петиції, знайти сайт, розмістити оголошення ... список можна продовжувати нескінченно! Всі ці взаємодії обробляються за допомогою форм. Форми потрібні для того, щоб відправляти дані з веб-сторінки на веб-сервер, який зможе ці дані обробити: зареєструвати користувача, створити повідомлення на форумі, відправити листа і так далі. Загалом, форми у веб просто необхідні.

Типова форма складається з двох частин. Перша - це та, яку ви бачите на сторінці, створена за допомогою розмітки HTML. Форми складаються з кнопок, текстових полів та випадаючих списків (відомих під загальною назвою елементи форми), призначених для збору інформації користувача. Крім того, форми можуть містити текст та інші елементи.

Друга частина являє собою додаток або сценарій на стороні сервера, який обробляє введені користувачем дані і повертає відповідний результат. Ось що призводить форму в дію. Розробка веб-додатків і сценаріїв вимагає певних знань в області програмування, які Ви отримаєте в наступному семестрі.

Щоб створити форму, потрібно використовувати парний тег <form>, усередині якого розміщуються поля форми. У тега <form> є два важливі атрибути:

• action задає адресу URL додатка або сценарію відправки форми для подальшої обробки її даних;

• method задає метод надсилання форми.

Приклад:

<form action="https://echo.htmlacademy.ru" method="get">

  поля форми

</ form>

Для відправки даних, що вів користувач на формі, зазвичай використовують методи get або post. Якщо не вказати атрибут method, то буде використаний get.

Метод get посилає дані форми в рядку запиту, тобто їх видно в адресному рядку браузера – вони ідуть після знаку питання. Наприклад:

https://www.google.com/search?q=htmlacademy

Метод get краще використовувати в пошукових формах, тому що він дозволяє отримати посилання на результати пошуку і передати її комусь. Метод GET підходить, якщо користувачам потрібно надати можливість зберігати в закладках результати відправки даних форми (наприклад, список результатів пошукового запиту). Оскільки дані, введені у форму, видно всім (адресна стрічка браузера після відправки даних форми), такий метод не підходить для форм введення персональної чи фінансової інформації. Крім того, метод GET непридатний, щоб завантажувати файли на сервер.

Метод post посилає дані в тілі HTTP-запиту і використовується, коли потрібно відправити багато даних і посилання на результат обробки цих даних не потрібне. Вміст цього запиту доступний лише серверу, у зв'язку з чим цей метод оптимальний для передачі конфіденційних даних, таких як реквізити банківських карт або інша персональна інформація.

Текстове поле вводу

Більшість полів форм створюється за допомогою одиночного тега input. Функції і зовнішній вигляд елемента input змінюються залежно від значення атрибуту type. У специфікації HTML5 використовується 23 різних елементи форми.

В тега input є два обов'язкові атрибути:

• type задає тип поля;

• name задає ім'я поля, що передається на сервер разом з даними, що ввів користувач. Всі елементи форми повинні містити в собі атрибут name, щоб пов'язаний сценарій міг розрізнити дані по полях.

Тип поля впливає на те, як воно буде відображатися і поводитися. Найпоширеніший тип - це text, який позначає текстове поле. Він же використовується за умовчанням. Приклад:

<form action="https://echo.htmlacademy.ru" method="get">

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

</form>

Ім'я поля потрібно, для того, щоб правильно обробити дані на сервері. Зазвичай ім'я поля має бути унікальним в межах форми хоча є винятки. Для задання імені поля використовують латинські букви і цифри.

Ідентифікатор, значення за замовчуванням та максимальна довжина

Атрибут id поля вводу позначає ідентифікатор, який повинен бути унікальним не лише в межах форми, а й на сторінці. Зазвичай ідентифікатори використовують для підвищення зручності роботи з формою, наприклад створюють підписи пов'язані з невеликими полями. При клацанні по таким підписам активується зв'язане поле. І це зручно, так як по великому підпису потрапити легше, ніж по маленькому полю. Наприклад поле Дата народження, що складається лише з двох цифр. Також ідентифікатори використовують в JavaScript для роботи з полями. Ідентифікатор на відміну від імені поля не передається на сервер. Краще використовувати ідентифікатори, що відрізняються від імені поля, особливо актуально це для полів, що дозволяють множинний вибір.

Атрибут value задає значення по замовчуванню для поля вводу. Це підвищує зручність. Погодьтеся, приємно зайти у величезну анкету, в якій значення Вашого міста проживання підставилось автоматично, на основі Вашої ІР-адреси, в потрібне поле і заповнювати його не треба (за таким принципом працюють сайти з даними про погоду). І все завдяки тому, що програміст додав до полів, атрибут value з потрібними даними.

За замовчуванням користувачі можуть вводити в текстове поле необмежену кількість символів незалежно від розміру поля (текст буде прокручуватися вправо, якщо його довжина перевищує ширину вікна). Максимальне число символів текстового поля можна задавати за допомогою атрибуту maxlength, якщо цього потребують сценарій обробки форми. Атрибут maxlength (новий в специфікації HTML5) встановлює обмеження на кількість символів, які можуть бути введені в полі.

Підпис для поля вводу

Можна подумати, що зробити підпис до поля дуже просто. Пишемо текст поряд з полем і все готово:

Підпис <input type = "text" name = "username">

Насправді цього недостатньо - ми отримали просто шматок тексту і поле, які розташовані поруч один з одним, але логічно ніяк не пов'язані.

Є спеціальний тег, який дозволяє сміливо сказати: «Цей шматок тексту дійсно підпис до цього поля!». Це парний тег <label>. Він пов'язує текст і поле вводу логічно. А ще, якщо клацнути по тексту такого підпису, то курсор переміститься у відповідне поле. Створювати підписи до полів за допомогою <label> - хороший прийом, намагайтесь його використовувати. Необхідно просто «обернути» текст підпису та тег поля у тег <label>, ось так:

<label>

  Підпис <input type="text" name="username">

</label>

Треба відзначити, що при «обертанні» тексту в тег <label> він візуально ніяк не змінюється, адже головне завдання підпису - створити логічний зв'язок.

Іноді «обернути» поле і текст підпису в тег <label> не можна, наприклад, коли вони розміщені в різних клітинках таблиці. У цьому випадку можна зв'язати підпис з полем за допомогою атрибуту id. Алгоритм такий:

1. Додаємо до поля введення ідентифікатор за допомогою атрибуту id.

2. «Обертаємо» текст підпису в тег <label>.

3. Додаємо тегу <label> атрибут for.

4. У атрибут for записуємо таке ж значення, що і в атрибуті id у поля.

Наприклад:

<label for="user-field-id"> Ім'я користувача </label>

...

багато-багато інших тегів

...

<input id="user-field-id" type="text" name="username">

Якщо у полі вводу, користувач вводить пароль або інші дані, які не бажано відображати на екрані, необхідно для атрибуту type задати значення password, тоді текст в полі при вводі користувачем буде відображатись «зірочками».

Багаторядкове поле вводу

Багаторядкове текстове поле (те, що містить не один рядок, а декілька) створюється за допомогою парного тега <textarea>. У нього є атрибути name та id, які аналогічні атрибутам текстового поля, а атрибут rows задає висоту багаторядкового поля в рядках. В свою чергу атрибут cols задає ширину поля в символах. В якості ширини символу береться деяка «усереднена ширина».

Атрибут value у багаторядкового поля відсутній, а значення за замовчуванням задається по-іншому – текст розташований між відкриваючим і закриваючим тегом <textarea> і є значенням за замовчуванням. Ось так:

<textarea> Значення за замовчуванням </textarea>

Чекбокс або «галочка»

Поле-галочка - це тег <input> з типом checkbox. Галочка працює за принципом «або так, або ні». Якщо галочка стоїть, то браузер посилає змінну з ім'ям поля на сервер, якщо галочки немає, то не надсилається нічого. Таким чином, атрибут value не є обов'язковим. Щоб галочка стояла за замовчуванням, потрібно додати до тегу атрибут checked. Ось так:

<input type = "checkbox" checked>

Чекбокс не передбачає вибір одного елемента з декількох, тому якщо в одній формі є кілька чекбоксів то імена у них повинні бути різними.

Атрибути disabled і readonly

Атрибути disabled і readonly можна вказувати в будь-якому елементі форми, якщо потрібно зробити так, щоб користувачі не змогли значення елемента або виділити його мишею. Відключені елементи форми вибирати не можна. Графічні браузери за замовчуванням затінюють такий елемент (але, звичайно, це можна змінити за допомогою CSS). Стан «Відключено» (disabled) можна змінити тільки за допомоги сценарію. Цей атрибут вельми корисний для обмеження доступу до деяких поляів форми на підставі раніше введених даних. Атрибут readonly не дозволяє користувачеві змінювати значення елементів форми (але при цьому їх можна виділяти). Це дозволяє розробникам встановлювати значення елементів форми залежно від раніше введених даних за допомогою сценаріїв. Дані, до яких застосований атрибут readonly, повинні помітно виділятися зовні, щоб було зрозуміло, що вони відрізняються від інших введених даних, інакше вони можуть збентежити користувачів, що спробували змінити їх значення.

Перемикач або «радіобатон»

Поле-перемикач - це тег <input> з типом radio. Зазвичай перемикачі розміщують групами по декілька штук. Причому у перемикачів однієї групи має бути однакове ім'я і різні значення, які задаються c допомогою value. Таким чином, атрибут value є для перемикачів обов'язковим. Браузер відправляє на сервер значення value вибраного перемикача.

Щоб зробити перемикач обраним за замовчуванням, потрібно додати до його тегу <input> атрибут checked, як у поля-чекбокса.

Випадаючий список або «селект»

Список, що розкривається так само, як і перемикач дозволяє вибрати один варіант відповіді з декількох. Список, що розкривається створюється за допомогою парного тега <select>, у якого є атрибути name і id.

Пункти списку задаються за допомогою парних тегів <option>, які повинні розташовуватися всередині тега <select>. Наприклад:

<select name = "theme">

  <option value = "light"> Світла тема </ option>

  <option value = "dark"> Темна тема </ option>

  ...

</select>

В атрибуті value тега <option> задається значення за яке відповідає пункт випадаючого списку, а всередині цього тега розташовується підпис пункту – що відображається користувачу. Якщо при відправленні форми в обраного варіанту заданий value, то на сервер відправиться значення цього атрибута. В іншому випадку буде відправлений текст підпису.

Список, що розкривається можна перетворити на так званий «мультиселект», тобто список, в якому можна вибрати не один, а кілька варіантів. Щоб зробити це, потрібно додати до тегу <select> атрибут multiple. Вибрати декілька варіантів можна, клацаючи по ним з затиснутою клавішею Ctrl на Windows або Command на OS X.

Висоту мультиселекту можна змінювати за допомогою атрибуту size тега <select>.

Щоб відзначити декілька пунктів, що вибрані за замовчуванням, потрібно до відповідних тегів <option> додати атрибут selected.

Поле для завантаження файлів

Поле для завантаження файлів - це тег <input> з типом file. Для цього поля обов'язковим атрибутом є ім'я. Щоб поле запрацювало і браузер зміг передати вибраний файл на сервер, необхідно додати формі атрибут enctype зі значенням multipart/form-data. Звертаємо Вашу увагу, що це атрибут форми а не якогось її поля. До речі, зовнішній вигляд таких полів дуже сильно відрізняється від операційної системи і дуже погано змінюється за допомогою стилів.

Елементи дати і часу

Якщо ви коли-небудь бронювали номер у готелі або авіаквитки у Всесвітній павутині, то, безсумнівно, користувалися невеликим відметом календаря для вибору дати. Швидше за все, маленький календар був створений за допомогою JavaScript. Мова HTML5 представляє шість нових типів введення даних, які перетворюють віджети для вибору дати і часу в одну зі стандартних вбудованих можливостей візуалізації браузера (таку ж, як здатність відображати чекбокси, випадаючі списки та інші сучасні елементи). Елементи вибору дати і часу підтримуються не у всіх браузерах, наприклад в Opera і Chrome частково. У браузерах, що не підтримують ці елементи поля введення дати і часу відображаються у вигляді звичайного текстового поля. Нові елементи введення, пов'язані із зазначенням дати і часу, наступні:

<input type = “date">

<input type = "time">

<nput type = “datetime”>

<input type = “datetime-local">

<input type = "month”>

<input type = "week">

Наприклад:

<input type = "date" namе = "ім'я" valuе = "2013-01-14">

Створює елемент введення дати, такий як спливаючий календар, для зазначення дати (рік, місяць, день). Початкове значення повинно бути представлено у форматі міжнародної організації зі стандартизації, International Organization for Standardization, ISO (рррр-мм-дд).

<input type = “time" namе ="ім'я" value ="03:13:00">

Створює елемент введення часу (години, хвилини, секунди, частки секунди) без часового поясу. Значення вказується наступним чином: гг:хх:сс.

<input type = "month" name = "ім'я" value = "2004-01">

Створює елемент введення певного місяця року (рррр-мм).

<input type = "week" name = "ім'я" value = "2004-W2">

Створює елемент введення дати для позначення певного тижня в році з використанням нумерації формату ISO (rrrr-w #).

Приховане поле

І ще одне невидиме і дуже корисне поле. Це приховане поле. Його використовують, коли у формі потрібно відправити якісь додаткові службові дані, які не вводяться користувачем. Наприклад, це можуть бути реквізити замовлення або геолокація користувача. Приховане поле - це тег <input> з типом hidden.

Кнопка відправки даних форми на сервер

Після створення на формі всіх полів, що повинен заповнити користувач необхідно додати кнопку яка буде відправляти ці данні на наш сервер. Така кнопка створюється за допомогою тега <input> c типом submit. Напис на кнопці можна задати за допомогою атрибуту value.

Для кнопки відправки форми задавати ім'я необов'язково. Але якщо ім'я задано, то на сервер будуть відправлятися ім'я і значення кнопки. Зазвичай ім'я для кнопки відправки задають, коли у формі кілька кнопок, що відповідають за різні дії. Браузер відправляє на сервер ім'я і значення тільки тієї з них, на яку натиснув користувач. Таким чином, сервер може зрозуміти, на яку саме кнопку натиснули і що потрібно зробити.