Створення веб-форм (Посібник)

Мова: Німецька

Створення веб-форм для веб-сайтів (практичний посібник)

Як створити веб-форми для своєї веб-сайту - пояснено крок за кроком! Навчитесь, як включити в форму HTML перше ім'я, електронну адресу, паролі, прапорці, дати, списки або випадаючі меню: від першої веб-форми до повноцінної функціональної веб-форми.

Створюйте веб-форми – від основ до функціональних форм
Правильно створюйте і зчитуйте поля для введення електронної пошти, пароля та інших даних
Створити прапорці, радіокнопки, випадаючі списки, багаторядкові поля введення тексту та інше
Всебічний, шестигодинний практичний курс від розробника Штефана Гевсс
З проектними файлами для відновлення показаного вмісту
Оптимально для веб-розробників, веб-дизайнерів та фронтенд-розробників

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

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

деталі

Зміст: 6 h Відео-навчання
Ліцензія: приватна та комерційна Права використання
Бонус: включаючи робочі матеріали

Категорії

Вебдизайн, CMS та розробка

Створено з любов'ю:

Stephan Haewß

Створення веб-форм – Вступ

Безкоштовно

Створення веб-форм: 1.1 | Вступ та огляд

Тут ти дізнаєшся, про що йдеться в курсі та на що можеш розраховувати.

Створення веб-форм: 1.2 | HTML-форми - навіщо та як використовувати?

Створення веб-форм: 1.2 | HTML-форми - чому і як використовувати?

Чому взагалі потрібно використовувати HTML-форми і як це зазвичай відбувається?

Створення веб-форм: 1.3 | Створення першого проекту

Тут буде створено проект, в який буде внесено першу форму.

Створення веб-форм: 1.4 | Перша HTML-форма

Створення веб-форм: 1.4 | Перша форма HTML

Ти створюєш свою першу просту форму та вивчаєш основну структуру.

Формуляри

Створення веб-форм: 2.1 | Чому використовувати форми або тег форми?

Створення веб-форм: 2.1 | Чому використовувати форми або теги форми?

Ми розглянемо різноманітні можливості використання HTML-форм в веб-додатках.

Завантажити файл проекту

Створення веб-форм: 2.2 | Отримання даних форми за допомогою JavaScript

Ти вчишся, як отримати та обробити дані, які вводять користувачі, за допомогою JavaScript.

Створення веб-форм: 2.3 | Покращення форми та інші типи введення

Створення веб-форм: 2.3 | Покращення форм та інші типи введення

Я розгляну можливості оформлення форм та покажу вам різні поля вводу.

Валідація введених даних та обробка подій для форм

Створення веб-форм: 3.1 | Перша перевірка з введенням електронної пошти

Ви реалізуєте просту перевірку електронної пошти, щоб переконатися, що введені дані відповідають формату електронної пошти.

Створення веб-форм: 3.2 | Тип введення number та атрибути

Ми займаємося числовими введеннями та відповідними атрибутами для обмеження можливих значень.

Створення веб-форм: 3.3 | Реагування на зміни в елементі вводу

Створення веб-форм: 3.3 | Реагування на зміни в елементі введення

Ти вчишся, як перехоплювати події в JS, які виникають при зміні вмісту поля введення.

Створення веб-форм: 3.4 | Реагування на зміни за допомогою addEventListener

Ми поглиблюємо тему обробки подій і використовуємо addEventListener для більш гнучкої реакції.

Створення веб-форм: 3.5 | Огляд: елемент введення

Створення веб-форм: 3.5 | Огляд: Елемент вводу

Комплексне узагальнення різних типів введення та їх властивостей.

Створення веб-форм: 3.6 | Атрибути: readonly, disabled, placeholder, minlength, maxlength

Ми розглянемо основні атрибути для керування поведінкою полів вводу.

Створення веб-форм: 3.7 | Атрибути: шаблон та обов'язкове

Створення веб-форм: 3.7 | Атрибути: pattern та required

Ти вчишся, як робити складні перевірки з використанням регулярних виразів та атрибуту required-.

Створення веб-форм: 3.8 | Атрибут spellcheck

Ми покажемо вам, як активувати або деактивувати перевірку орфографії в ваших формах.

Створення веб-форм: 3.9 | Тип введення password

Створення веб-форм: 3.9 | Введення типу пароля

Ти дізнаєшся, як створювати поля для пароля.

Чекбокси

Створення веб-форм: 4.1 | Практичні аспекти чекбоксів

Створення веб-форм: 4.1 | Прапорці – Основи

Ми починаємо з основ чекбоксів та їх можливостей використання.

Створення веб-форм: 4.2 | Використання прапорця в JS

Ти вчишся, як зчитувати та встановлювати стан прапорців за допомогою JavaScript.

Створення веб-форм: 4.3 | Стилізування чекбоксів

Створення веб-форм: 4.3 | Стилізація прапорців

Я покажу різні способи налаштування вигляду прапорців.

Типи введення форм та розширені поля

Створення веб-форм: 5.1 | Radiobuttons

Я поясню, як працюють радіокнопки і як їх використовувати в своїх формах.

Створення веб-форм: 5.2 | Вивантаження файлів

Створення веб-форм: 5.2 | Завантажити файл

Ти вчишся, як дозволити користувачам завантажувати файли.

Створення веб-форм: 5.3 | Вибір файлу за допомогою JS

Створення веб-форм: 5.3 | Вибір файлу з JS

Ти поглиблюєш свої знання про завантаження файлів та вчишся, як можна обробляти обрані файли за допомогою JavaScript.

Створення веб-форм: 5.4 | Приховані поля введення

Створення веб-форм: 5.4 | Приховані поля вводу

Я розгляну процес використання прихованих полів для передачі додаткової інформації.

Створення веб-форм: 5.5 | Введення чисел

Ми узагальнимо різноманітні способи введення чисел.

Створення веб-форм: 5.6 | Ползунок діапазону

Створення веб-форм: 5.6 | Повзунок діапазону

Ти вивчаєш, як вибирати певний діапазон значень за допомогою регуляторів діапазону та як реалізувати бігунок.

Створення веб-форм: 5.7 | Введення дати та часу

Я покажу тобі, як встановити введення дати та часу у своїх формах.

Створення веб-форм: 5.8 | Електронна пошта та URL

Ми зосереджуємося на особливих полях введення для електронної пошти та URL-адрес.

Створення веб-форм: 5.9 | Колі?

Ти вчишся, як дозволити користувачам вибирати колір через палітру кольорів.

Створення веб-форм: 5.10 | Типи search та tel

Я представляю тобі поля для введення пошукових запитів та номерів телефонів.

Створення веб-форм: Багаторядкові текстові поля з textarea

Створення веб-форм: 5.11 | Багаторядкові текстові поля з використанням textarea

Ти дізнаєшся, як реалізувати багаторядкові текстові введення за допомогою елементу textarea.

Створення веб-форм: 5.12 | Списки з вибором

Створення веб-форм: 5.12 | Списки із вибором

Я поясню, як створити вибирані списки за допомогою елемента select.

Розширена структура форми та валідація за допомогою JavaScript та фреймворків

Створення веб-форм: 6.1 | Групування опцій

Ви вивчаєте, як групувати варіанти у випадаючому списку.

Створення веб-форм: 6.2 | Списки рекомендацій з datalist

Створення веб-форм: 6.2 | Списки пропозицій з datalist

Я покажу тобі, як створити список пропозицій для полів вводу.

Створення веб-форм: 6.3 | Атрибут автозаповнення

Ти вчишся, як активувати автоматичне заповнення вводу.

Створення веб-форм: 6.4 | Розділи форми з Fieldsets

Я поясню, як ти можеш структурувати свої форми за допомогою елементів fieldset-.

Створення веб-форм: 6,5 | Перевірка за допомогою JavaScript

Створення веб-форм: 6.5 | Валідація через JavaScript

Всебічне введення у клієнтську валідацію форм за допомогою JavaScript.

Створення веб-форм: 6.6 | Опрацювання на серверному рівні з Node.JS та Express

Створення веб-форм: 6.6 | Серверна обробка за допомогою Node.JS та Express

Я покажу, як ти отримуєш відправлені дані форми на сервері за допомогою Node.js та Express .

Завантажити файл проекту

Створення веб-форм: 6.7 | Отримання даних форми за допомогою обробника GET

Створення веб-форм: 6.7 | Дані форми управління отримано за допомогою GET-обработника

Ти вчишся, як отримувати дані форми за допомогою методу GET.

Створення веб-форм: 6.8 | Отримання даних форми за допомогою обробника POST

Я поясню, як ти отримуєш дані форми за допомогою методу POST.

Створення веб-форм: 6.9 | Створення форм та елементів форм у React - створення проекту

Ми розпочинаємо створення проекту React та інтеграцію форм.

Завантажити файл проекту

Створення веб-форм: 6.10 | Елементи введення в React

Ти вчишся, як використовувати різноманітні елементи введення в React.

Створення веб-форм: 6.11 | Елементи вибору та текстові області в React

Створення веб-форм: 6.11 | Елементи вибору та текстові поля в React

Ми працюємо з елементами select- та textarea- в React.

Створення веб-форм: 6.12 | Форми з Alpine.js

Я покажу, як ти обробляєш форми з фреймворком Alpine.js.

Завантажити файл проекту

Створення веб-форм: 6.13 | Форми з VueJs

Я поясню, як ви інтегруєте форми в додатки Vue.js.

Завантажити файл проекту

Деталі щодо вмісту

Веб-форми та їх поля введення – пояснено крок за кроком
Ти хочеш розширити свої знання у розробці веб-форм? У цьому навчальному посібнику ти навчишся створювати функціональні форми з використанням HTML, JavaScript, а також серверних скриптів та бібліотек. Чи то простий запит на ім'я і електронну пошту, чи складна контактна форма – після цього курсу ти зможеш програмувати власні веб-форми з відповідними полями введення та вбудовувати їх у свої веб-сайти.
Більш як шестигодинний відео-посібник від розробника програмного забезпечення та наставника Стефана Хевса адресований усім, хто створює веб-форми, розробникам, які використовують форми в JS-UI-фреймворках, та веб-розробникам, які хочуть запитувати дані від користувачів без використання багато JavaScript. Оптимально для веб-розробників, веб-дизайнерів, фронтенд-розробників, для початківців і досвідчених користувачів – і це легко сприймати навіть з базовими знаннями HTML.

Основи HTML для форм на твоїх веб-сайтах

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

Динамічні веб-форми, обробка на сервері та форми в сучасних JavaScript-фреймворках

Взаємодія з елементами форм може бути цілеспрямовано керована за допомогою JavaScript для створення динамічного та дружнього для користувача досвіду. Таким чином можна отримувати, редагувати і в разі потреби автоматично валідувати введені дані. За допомогою клієнтської валідації можна уникнути некоректних або неповних даних безпосередньо у користувача перед їх відправленням на сервер. Це покращує якість даних і скорочує можливі джерела помилок. Ще одним важливим аспектом є динамічне пристосування форм до введення та взаємодії користувачів. У відео-посібнику розглядаються всі ці аспекти.

Крім того, ти дізнаєшся про посилання та отримання даних форми на сервер та їх обробку на сервері на прикладі Node.js і Express. Крім цього, ти розглянеш використання веб-форм в сучасних JavaScript-фреймворках, наприклад, інтеграцію форм у React-додатки та створення реактивних форм за допомогою React Hooks та компонентів. Отримай важливі поради щодо оформлення форм та елементів форм, а також щодо безпеки даних.

Навчальні матеріали цього практичного посібника

Витягни з курсу всебічні знання у розробці HTML-форм. Дізнайся про різні поля введення та їх особливості. Дізнайся, як ти керуєш елементами форми за допомогою JavaScript та як використовувати атрибути та валідації. Додатково дізнайся, як вбудовувати форми в сучасні JavaScript-фреймворки, такі як React, VueJs та AlpineJs.