Слідкую за курсом HTML and CSS in Depth від META — власника Facebook — і вирішив почати пояснювати фрагменти HTML-коду, що представлені там (курс не був моїм першим знайомством з HTML і CSS).
Для початку, код, який я поясню, має на меті вибір дати. Хто вибирає дату? Це ви!
Припустимо, ви обираєте дату для відвідування музею — не знаю, чи можна записуватися на дату для відвідування музеїв і не знаю, чи це взагалі існує — і питаєте себе, як ця опція дати можлива, як вона стає видимою для вас, користувача.
Існує кілька способів, щоб ця опція стала доступною, і я поясню один з них, який, як я вже сказав, походить з курсу META.
< div >
< label for = "booking_date" > Дані бронювання
< input type = "date" id = "booking_date" name = "booking_date" >
Почну з пояснення блоків, які я уявляю в своїй голові. Їх три. Перший — це DIV, який має функцію, грубо кажучи, створювати коробку навколо, як на малюнку, який я зробив:
Отже, ця коробка має мету — поділити, це своєрідна організація контенту. Однак важливо знати, що вона не має сенсу сама по собі, тобто не має семантичного значення. Вона також використовується для стилістичних цілей або коли немає іншого семантичного елемента.
Інший елемент — це label, що є етикеткою (в перекладі — "ярлик"), тут важливо знати англійську. Його завдання — визначити або дати ідентичність введенню (input).
for — це зв'язок з введенням. Label має for = booking_date.
Все це нагадує деякі сторінки з книги Вступ до логіки Цезаря А. Мортарі.
Тут for визначає зв'язок з input через id (booking_date). Уявіть собі простір, де кілька точок з'єднані між собою, як блоки всередині нескінченних блоків.
< label for = "booking_date" > Дані бронювання
Якби перед вами стояло кілька відкритих сміттєвих баків, а над ними були написані голографічними літерами назви кожного з них, куди ви можете вставити необхідні дані, щоб потім надіслати їх і зібрати ваші дані в організованому вигляді.
Тепер input служить для введення даних, що також залежить від значення його атрибута type, який визначає тип введення. Це type, що дозволяє визначити, чи буде введення текстом, телефоном, електронною поштою, датою або варіантом вибору.
У коді нижче значення — date (дата), ідентифікація введення — booking_date — це унікальний тип ідентифікації, як код паспорта або серійний номер, який не можна дублювати, а name відповідає за надання ярлика даним, коли вони надсилаються на сервер.
Коли ви наближаєтеся до вогню, ваше тіло (терморецептори) виявляє невидиме відчуття тепла, а тепло породжує вогонь, так ми можемо сказати. Тому тіло надсилає мозку значення атрибута name. Значення — це назва ідентифікації, і мозок обробляє цю інформацію як відоме відчуття тепла. Це організовує інформацію в мозку.
< тип вводу = "date" id = "data_de_reserva" name = "data_de_reserva" >
Приклад — це пляшка Coca-Cola, або будь-яка пляшка.
Етикетка Coca-Cola, що пише "Coca-Cola", вказує на те, що всередині пляшки знаходиться один з найбільш популярних напоїв на планеті. Введення — це пляшка, етикетка — це стрічка навколо пляшки, а дані — це напій всередині пляшки.
Так само, як Coca-Cola визначила власну етикетку на пляшці, тут ви також можете вирішити, що помістите всередину пляшки, яку ви маєте: чи це буде вода, пісок, повітря, бензин, сік — вибір за вами.
Просту візуальну репрезентацію того, як я бачу все це, я зробив ось так:
Отже, коротко кажучи, label — це етикетка, input — це сховище даних, як відро, що спускається з верхньої частини будівлі донизу з молотом всередині. DIV — це невидиме простір навколо нього. Власне, це те, що дозволяє таку візуалізацію.
Якщо у вас є якісь пропозиції, напишіть їх нижче. Дякую!
Перекладено з: Input date — Escolha de uma data.