Създаване на уеб формуляри (Урок)

Език: Немски

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

Как да създадете уеб формуляри за вашия уебсайт - обяснено стъпка по стъпка! Независимо дали искате да поискате имена, имейли, пароли, кутии за избор, дати, списъци или падащи менюта: Научете от този урок на практика как да стигнете от първата 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.3 | Създаване на първи проект

Тук ще бъде създаден проектът, в който ще бъде интегрираната първата форма.

Създаване на уеб формуляри: 1.4 | Първата HTML форма

Създаваш своята първа проста форма и се запознаваш с основната структура.

Формуляри

Създаване на уеб формуляри: 2.1 | Защо използваме формуляри или тагове за форма?

Разглеждаме многобройните възможности за използване на HTML формуляри в уеб приложения.

Сваляне на проектен файл

Създаване на уеб формуляри: 2.2 | Извличане на данни от формуляра с JavaScript

Създаване на уеб формуляри: 2.2 | Извличане на данни от формуляри с JavaScript

Научаваш как да прочетеш и обработиш данните, въведени от потребителите, с помощта на JavaScript.

Създаване на уеб формуляри: 2.3 | Подобряване на формуляра и добавяне на допълнителни типове въвеждане

Създаване на уеб формуляри: 2.3 | Подобряване на формуляра и добавяне на други видове въвеждане

Засягам възможностите за оформяне на формуляри и представям различни полета за въвеждане на данни.

Валидация на входа и обработка на събития за формуляри

Създаване на уеб формуляри: 3.1 | Първа валидация с въвеждане на имейл

Въвеждаш проста валидация на имейл, за да се увериш, че въведените данни отговарят на формата на имейл.

Създаване на уеб формуляри: 3.2 | Входен тип число и атрибути

Създаване на уеб формуляри: 3.2 | Входен тип номер и атрибути

Занимаваме се с числени входове и съответните атрибути за ограничаване на възможните стойности.

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

Научаваш как да хващаш събития в JS, които се случват при промяна на съдържанието на поле за въвеждане.

Създаване на уеб формуляри: 3.4 | Реагиране на промени с addEventListener

Създаване на уеб формуляри: 3.4 | Реагиране на промените с addEventListener

Заглубяваме се в обработката на събитията и използваме addEventListener за по-гъвкави реакции.

Създаване на уеб формуляри: 3.5 | Преглед: Елементът за въвеждане данни

Пълно резюме на различните видове входни типове и техните характеристики.

Създаване на уеб формуляри: 3.6 | Атрибути: readonly, disabled, placeholder, minlength, maxlength

Разясняваме основните атрибути, за да контролираме поведението на полетата за въвеждане на данни.

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

Научаваш как да извършваш сложни валидации с регулярни изрази и атрибута required.

Създаване на уеб формуляри: 3.8 | Aтрибутът за проверка на правописа

Създаване на уеб формуляри: 3.8 | Атрибутът за проверка на правописа

Ще ти покажем как да активираш или деактивираш правописната проверка в твоите формуляри.

Създаване на уеб формуляри: 3.9 | Тип вход за парола

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

Научаваш как да създадеш полета за пароли.

Флажици

Създаване на уеб формуляри: 4.1 | Флажка - Основи

Създаване на уеб формуляри: 4.1 | Форма за избор - Основни начала

Започваме с основите на отметките за избор и техните възможности за използване.

Създаване на уеб формуляри: 4.2 | Използване на отметче в JS

Създаване на уеб формуляри: 4.2 | Използване на отметка в JS

Научаваш как да прочетеш и зададеш състоянието на отметките с JavaScript.

Създаване на уеб формуляри: 4.3 | Стилизиране на полето за избор

Създаване на уеб формуляри: 4.3 | Стилизиране на отметковката

Показвам различни начини за персонализиране на изгледа на отметките за избор.

Видове входни формуляри и разширени полета

Създаване на уеб формуляри: 5.1 | Бутони за избо?

Създаване на уеб формуляри: 5.1 | Радиобутони

Обяснявам как работят радиобутоните и как да ги използвате във вашите формуляри.

Създаване на уеб формуляри: 5.2 | Качване на файлове

Научаваш как да позволиш на потребителите да качват файлове.

Създаване на уеб формуляри: 5.3 | Входен файл с JS

Създаване на уеб формуляри: 5.3 | Вход за файл с JS

Разширяваш познанията си за качване на файлове и научаваш как да обработиш избрания файл с JavaScript.

Създаване на уеб формуляри: 5.4 | Скрити полета за въвеждане

Засягам използването на скрити полета за предаване на допълнителна информация.

Създаване на уеб формуляри: 5.5 | Въвеждане на числа

Обединяваме различните възможности за въвеждане на числа.

Създаване на уеб формуляри: 5.6 | Range Slider

Научаваш как да позволиш на потребителя да избере определен обхват от стойности с Range-Sliders и как да имплементираш плъзгач.

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

Ще ти покажа как да въведеш дати и часове във формулярите си.

Създаване на уеб формуляри: 5.8 | Имейл и URL

Ние се фокусираме върху специалните полета за въвеждане на имейл адреси и URL адреси.

Създаване на уеб формуляри: 5.9 | Цвят

Научаваш как да позволиш на потребителите да избират цветове чрез поле за избор на цвят.

Създаване на уеб формуляри: 5.10 | Типовете search и tel

Представям ви полетата за въвеждане на ключови думи и телефонни номера.

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

Ще научиш как да реализираш многоредови текстови входове с елемента textarea.

Създаване на уеб формуляри: 5.12 | Списъци с избор (select)

Обяснявам как да създадете избирателни списъци с елемента select.

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

Създаване на уеб формуляри: 6.1 | Групиране на опциите

Научаваш как можеш да групираш опциите в падащ списък.

Създаване на уеб формуляри: 6.2 | Списъци с предложения с datalist

Показвам ти как да създадеш списъци с предложения за полета за въвеждане.

Създаване на уеб формуляри: 6.3 | Атрибутът autocomplete

Създаване на уеб формуляри: 6.3 | Атрибутът за автоматично завършване

Научаваш как да активираш автоматичното довършване на въвежданията.

Създаване на уеб формуляри: 6.4 | Секции на формуляри с Fieldsets

Създаване на уеб формуляри: 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 обработчик

Създаване на уеб формуляри: 6.8 | Получаване на формулярни данни с POST обработчик

Обяснявам как да приемеш данни от формуляра с метода POST.

Създаване на уеб формуляри: 6.9 | Създаване на форми и елементи на формуляри в React - Създаване на проект

Създаване на уеб формуляри: 6.9 | Създаване на формуляри и елементи на формуляри в React - Създаване на проект

Започваме със създаването на React проект и интеграция на формуляри.

Сваляне на проектен файл

Създаване на уеб формуляри: 6.10 | Елементи за въвеждане в Реакт

Създаване на уеб формуляри: 6.10 | Въвеждащи елементи в Реакт

Научаваш как да използваш различни елементи за въвеждане в React.

Създаване на уеб формуляри: 6.11 | Елементи за избор и текстово поле в Реакт

Създаване на уеб формуляри: 6.11 | Елементи „Select“ и „Textarea“ в Реакт

Занимаваме се с select- и textarea- елементите в React.

Създаване на уеб формуляри: 6.12 | Формуляри с Alpine.js

Създаване на уеб формуляри: 6.12 | Formulari с Alpine.js

Показвам как обработваш формуляри с JavaScript Framework Alpine.js.

Сваляне на проектен файл

Създаване на уеб формуляри: 6.13 | Формуляри с VueJs

Обяснявам как да интегрирате формуляри в приложения Vue.js.

Сваляне на проектен файл

Детайли за съдържанието

Уеб формуляри и техните полета за въвеждане – обяснени стъпка по стъпка
Искаш ли да разшириш познанията си по създаването на уеб формуляри? В този урок ще научиш как да създадеш функционални формуляри с HTML, JavaScript, както и със сървърни скриптове и библиотеки. Без значение дали става въпрос за просто попитване за име и имейл или сложна контактна форма – след този курс ще бъдеш в състояние да програмираш собствени уеб формуляри с необходимите полета за въвеждане и да ги вградиш в своите уеб сайтове.
Този видеоурок, продължителен над шест часа, на софтуерния разработчик и инструктор Стефан Хавс се насочва към всички, които желаят да създадат уеб формуляри, към разработчици, които използват формуляри в JS-потребителски интерфейсни рамки и към уеб разработчици, които искат да използват потребителски входни данни без много JavaScript. Идеален за уеб разработчици, уеб дизайнери, фронтенд разработчици, за начинаещи и напреднали – и лесно разбираем за онези, които вече разполагат с основни познания по HTML.

Основи на HTML за формуляри на твоите уеб сайтове

Ако досега нямаше или разполагаше само с ограничени познания в областта на уеб формулярите, започни урока с основите. Ще узнаеш всичко важно за структурата, както и за различните елементи на HTML формуляр. Научи различните полета за въвеждане като отметки, радиобутони, качване на файлове, паролни полета и текст, както и техните атрибути и възможности за валидация. Присвои си уменията за създаване на потребителски приятни и бариерно свободни формуляри с разнообразни елементи на формулярите.

Динамични уеб формуляри, сърверна обработка & формуляри в модерни JavaScript рамки

Взаимодействието с елементите на формуляри може да се управлява целенасочено с помощта на JavaScript, за да се създаде динамично и потребителски приятно изживяване. Така въведените данни могат да бъдат извлечени, преработени и автоматично валидирани при нужда. Чрез клиентска валидация неправилни или непълни данни могат да бъдат засечени директно при потребителя, преди да бъдат изпратени на сървъра. Това подобрява качеството на данните и намалява възможните източници на грешки. Още един важен аспект е динамичното приспособяване на формулярите към въведения и взаимодействията на потребителите. Всички тези аспекти са разгледани във видео урока.

Освен това се занимаваш с изпращането и получаването на данни от формуляри към сървъра, както и със сърверната им обработка на пример с Node.js и Express. Освен това разглеждаш използването на уеб формуляри в модерни JavaScript рамки като например интегрирането на формуляри в React приложения и създаването на реактивни формуляри с React-Hooks и компоненти. Получаваш важни съвети за стилизирането на формуляри и елементите на формуляри, както и за сигурността на данните.

Това научаваш в този учебник за практика

Използвай курса, за да си придобиеш всеобхватни познания в създаването на HTML формуляри. Научи различните полета за въвеждане и техните специфики. Научи как да контролираш елементите на формуляри с JavaScript и как да прилагаш атрибутите и валидациите. Виж също как да интегрираш формуляри в модерни JavaScript рамки като React, VueJs и AlpineJs.