Web Formları Oluşturma (Kılavuz)

Web siteleri için web formları oluşturmak (Uygulama Kılavuzu)

Dil: Almanca

Web siteleri için web formu oluşturma (uygulamalı rehber)

Web sitelerin için adım adım web formu nasıl oluşturabilirsin - gösteriyor! İsimler, e-posta adresleri, şifreler, onay kutuları, tarih seçenekleri, listeler ya da açılır menüler eklemek istesen de: Bu uygulama rehberinde ilk HTML formundan tamamen işlevsel bir web formuna nasıl ulaşılacağını öğren.

Web formları oluşturma – temellerden işlevsel formlara kadar
E-posta, şifre ve diğer alanlar için doğru şekilde oluştur ve oku
Onay kutuları, radyo düğmeleri, açılır menüler, çoklu satırlı metin girişleri ve daha fazlasını oluşturun
Geliştirici Stephan Haewß'in kapsamlı, altı saatlik uygulama eğitimi
Gösterilen içerikleri anlamak için proje dosyalarıyla birlikte
Web geliştiriciler, web tasarımcıları ve frontend geliştiriciler için ideal

Basit ad ve e-posta sorgusundan dosya yükleme işlevine sahip daha karmaşık bir iletişim formuna kadar: Web siteleriniz için form oluşturmayı detaylı bir şekilde öğreniyorsunuz!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

DETAYLAR

İçerik: 6 h Video Eğitimi
Lisans: özel ve ticari Kullanım hakları
Bonus: İş malzemeleri dahilindedir

Kategoriler

Web tasarımı, CMS ve geliştirme

Sevgiyle oluşturulmuştur:

Stephan Haewß

Web formları oluşturma - Giriş

Web formları oluşturmak: 1.1 | Giriş ve Genel Bakış

Ücretsiz

Web formları oluşturma: 1.1 | Giriş ve Genel Bakış

Burada kursun ne hakkında olduğunu ve neler bekleyebileceğini öğreneceksin.

Web form oluşturmak: 1.2 | HTML formlar - neden ve nasıl kullanılır?

Web formları oluşturmak: 1.2 | HTML formları - neden ve nasıl kullanılır?

Neden HTML formlarını kullanmalı ve genel olarak nasıl yapılır?

Web form oluşturmak: 1.3 | İlk proje oluşturmak

Web formları oluşturmak: 1.3 | İlk proje oluşturma

Burada proje oluşturulacak ve ilk formun entegre edileceği projeye dahil edilecek.

Web formları oluşturmak: 1.4 | İlk HTML formu

Web formları oluşturma: 1.4 | İlk HTML formu

İlk temel formunu oluşturursun ve temel yapısını öğrenirsin.

Formlar

Web formları oluşturmak: 2.1 | Formlar veya form etiketi neden kullanılır?

HTML formlarının web uygulamalarındaki çeşitli kullanım alanlarını aydınlatıyoruz.

Proje dosyasını indirin

Web form oluşturmak: 2.2 | Form verilerini JavaScript ile okuma

Web formları oluşturmak: 2.2 | Form verilerini JavaScript ile okuma

Kullanıcıların girdiği verileri JavaScript kullanarak nasıl okuyup işleyeceğini öğreniyorsun.

Web form oluşturmak: 2.3 | Form güzelleştirme ve diğer girdi türleri

Web formları oluşturma: 2.3 | Form güzelleştirme ve ek giriş tipleri

Form tasarımı seçeneklerini ele alıyor ve çeşitli giriş alanlarını tanıtıyorum.

Formlar için giriş doğrulaması ve olay işleme

Web formları oluşturma: 3.1 | İlk doğrulama adımı e-posta girişiyle

Web formları oluşturmak: 3.1 | İlk doğrulama e-posta girişi ile

Basit bir e-posta doğrulaması uyguluyorsun, böylece girilen verilerin e-posta formatına uygun olduğundan emin olursun.

Web formları oluşturmak: 3.2 | number input türü ve özellikler

Web formları oluşturmak: 3.2 | Input tipi sayı ve öznitelikleri

Sayısal girişler ve olası değerleri sınırlamak için gereken özniteliklerle ilgileniyoruz.

Web formları oluşturma: 3.3 | input elementindeki değişikliklere yanıt verme

Web formları oluşturmak: 3.3 | input elementindeki değişikliklere yanıt verme

Bir giriş alanının içeriği değiştiğinde JS'de nasıl olayları ele alacağını öğreniyorsun.

Web formları oluşturmak: 3.4 | Değişikliklere addEventListener ile yanıt vermek

Web formları oluşturmak: 3.4 | Değişikliklere addEventListener ile tepki vermek

Olay işleme konusunu derinleştiriyor ve daha esnek tepkiler için addEventListener kullanıyoruz.

Web formları oluşturmak: 3.5 | Genel Bakış: Giriş elementi

Web formları oluşturmak: 3.5 | Genel bakış: input Elementi

Farklı input türlerinin ve özelliklerinin kapsamlı bir özeti.

Web formları oluşturmak: 3.6 | Öznitelikler: salt okunur, devre dışı, yer tutucu, en az karakter sayısı, en fazla karakter sayısı

Giriş alanlarının davranışını kontrol etmek için temel nitelikleri açıklıyoruz.

Web formları oluşturma: 3.7 | Özellikler: pattern ve required

Web formları oluşturmak: 3.7 | Öznitelikler: desen ve zorunlu

Düzenli ifadeler ve required özniteliği ile karmaşık doğrulamaları nasıl gerçekleştireceğini öğreniyorsun.

Web formları oluşturmak: 3.8 | spellcheck özniteliği

Formlarınızdaki yazım denetimini etkinleştirmeyi veya devre dışı bırakmayı nasıl yapacağını sana göstereceğiz.

Web formları oluşturmak: 3.9 | Input tipi şifre

Web formları oluşturmak: 3.9 | Input türü şifre

Şifre alanları nasıl oluşturulur öğreneceksin.

Onay kutuları

Web formları oluşturmak: 4.1 | Etki Kutusu - Temeller

Web formları oluşturmak: 4.1 | Checkbox – Temel İlkeler

Kutuların temel prensipleri ve kullanım olanaklarıyla başlıyoruz.

Web formülleri oluşturmak: 4.2 | JavaScript'te checkbox kullanmak

Web formu oluşturma: 4.2 | Checkbox'u JS'te kullanma

JavaScript kullanarak onay kutularının durumunu nasıl okuyup ayarlayacağını öğreniyorsun.

Web formları oluşturmak: 4.3 | Onay kutusunu stilize etmek

Web formları oluşturmak: 4.3 | Onay kutusunu stillendirme

Farklı onay kutusu görünümlerini özelleştirmenin çeşitli yollarını gösteriyorum.

Form giriş türleri ve genişletilmiş alanlar

Web formları oluşturmak: 5.1 | Radyo düğmeleri

Radyo düğmelerinin nasıl çalıştığını ve nasıl formülünüzde kullandığınızı açıklıyorum.

Web formları oluşturmak: 5.2 | Dosya Yükleme

Kullanıcılara dosya yükleme izni verme konusunu öğreniyorsun.

Web form oluşturabilirsiniz: 5.3 | File Input ile JS

Web formları oluşturmak: 5.3 | JS ile dosya girişi

Seçili dosyayı JavaScript ile nasıl düzenleyebileceğinizi öğrenerek, dosya yükleme konusundaki bilgilerinizi derinleştirirsiniz.

Web form oluşturma: 5.4 | Gizli giriş alanları

Web formu oluşturma: 5.4 | Gizli giriş alanları

Gizli giriş alanlarının ek bilgilerin iletilmesinde nasıl kullanıldığına değineceğim.

Web formları oluşturmak: 5.5 | Sayı girişleri

Web formları oluşturma: 5.5 | Sayı girişleri

Farklı sayı giriş seçeneklerini özetliyoruz.

Web formları oluşturmak: 5.6 | Aralık Kaydırıcısı

Web formu oluştur: 5.6 | Aralık Kaydırıcısı

Range-Slideler ile belirli bir değer aralığını seçmeyi öğrenir ve bir kaydırıcı ekleyebilirsin.

Web formları oluşturmak: 5.7 | Tarih ve saat girişi

Web formları oluşturma: 5.7 | Tarih ve saat girişi

Sana, form alanlarında tarih ve saat girişlerini nasıl yapacağını göstereceğim.

Web formları oluşturmak: 5.8 | E-posta ve URL

Web formu oluştur: 5.8 | E-posta ve URL

Öncelikle e-posta adresleri ve URL'ler için özel giriş alanlarına odaklanıyoruz.

Web formları oluşturmak: 5.9 | Renk

Renkleri bir renk seçme alanı üzerinden nasıl seçeceğini öğreniyorsun.

Web formları oluşturmak: 5.10 | search ve tel tipleri

Web formları oluştur: 5.10 | search ve tel türleri

Arama terimleri ve telefon numaraları için giriş alanlarını tanıtıyorum.

Web form oluşturma: 5.11 | textarea ile çok satırlı metin girişleri

Web formları oluştur: 5.11 | textarea ile çok satırlı metin girişi

textarea öğesiyle çok satırlı metin girişlerini nasıl gerçekleştireceğini öğreneceksin.

Web formları oluşturmak: 5.12 | Seçeneklerle listeler

Web formları oluşturmak: 5.12 | Seçenekleri olan listeler

Seç öğesiyle seçilebilir liste oluşturmayı açıklayacağım.

JavaScript ve çerçeveler ile genişletilmiş form yapısı ve doğrulama

Web formları oluşturmak: 6.1 | Seçeneklerin Gruplandırılması

Web formu oluşturma: 6.1 | Seçeneklerin gruplandırılması

Bir seçim listesindeki seçenekleri nasıl gruplayacağını öğreniyorsun.

Web formları oluşturma: 6.2 | datalist ile öneri listeleri

Web formları oluşturmak: 6.2 | datalist ile öneri listeleri

Sana, giriş alanları için öneri listeleri nasıl oluşturulur, göstereceğim.

Web-form oluşturmak: 6.3 | Otomatik tamamlama özniteliği

Web formu oluşturma: 6.3 | autocomplete özniteliği

Giriş otomatik tamamlamayı nasıl etkinleştireceğini öğreniyorsun.

Web formları oluşturmak: 6.4 | Form bölümleri ile Fieldsetler

Web formları oluşturmak: 6.4 | Form bölümleri ile alan setleri

Formlarınızı fieldset öğeleriyle nasıl yapılandıracağınızı açıklıyorum.

Web formları oluşturmak: 6.5 | JavaScript ile doğrulama

JavaScript ile istemci taraflı form doğrulamanın kapsamlı bir tanıtımı.

Web formları oluşturmak: 6.6 | Node.JS ve Express ile Sunucu Tarafı İşleme

Web form oluşturma: 6.6 | Node.JS ve Express ile sunucu tarafı işlemler

Form verilerinin Node.js ve Express ile sunucuda nasıl alındığını göstereceğim.

Proje dosyasını indirin

Web formları oluşturmak: Form verilerini GET işleyici ile almak

Web formları oluşturmak: 6.7 | GET işlemcisi ile form verilerini almak

Form verilerini GET yöntemi ile nasıl alacağını öğreniyorsun.

Web formları oluşturmak: POST işleyici ile form verilerini almak

Web formları oluşturun: 6.8 | POST işleyici ile form verilerini alın

POST yöntemiyle form verilerini nasıl alacağını anlatacağım.

Web formları oluşturmak: 6.9 | Formlar ve form elemanları React'te - Proje oluşturma

Web formları oluşturmak: 6.9 | Formlar ve Form Elemanları React'ta - Proje oluşturma

React projesi oluşturarak ve formları entegre ederek başlıyoruz.

Proje dosyasını indirin

Web formu oluşturma: 6.10 | Giriş öğeleri React'ta

Web formu oluşturma: 6.10 | React'ta Input öğeleri

Farklı giriş elemanlarını React'ta nasıl kullanacağını öğreniyorsun.

Web formları oluşturmak: 6.11 | Select ve Textarea öğeleri React'ta

Web form oluşturmak: 6.11 | Seçim ve metin alanı öğeleri React'ta

React'te select- ve textarea- elemanlarıyla ilgileniyoruz.

Web formları oluşturmak: 6.12 | Alpine.js ile formlar

Web formları oluşturma: 6.12 | Alpine.js ile formlar

Alpine.js ile JavaScript çerçevesi kullanarak form işlemlerini nasıl yapacağını göstereceğim.

Proje dosyasını indirin

Web formu oluşturmak: 6.13 | Formlar VueJs ile

Web formları oluşturma: 6.13 | VueJs ile formlar

Vue.js uygulamalarında formları nasıl entegre edeceğinizi anlatacağım.

Proje dosyasını indirin

İçerik detayları

Web Formları ve Giriş Alanları – Adım Adım Açıklanmış
Web Formları Geliştirmek konusundaki bilgilerini genişletmek mi istiyorsun? Bu rehberde, HTML, JavaScript ve sunucu taraflı betikler ve kütüphaneler ile işlevsel formlar oluşturmayı öğreneceksin. İsim ve e-posta sorgulamasından karmaşık iletişim formuna kadar – bu kurs sonrasında kendi web formlarını oluşturabilir ve sitelerine entegre edebilirsin.
Yazılım geliştirici ve eğitmen Stephan Haewß'in yaklaşık altı saatlik video rehberi, sayfalarına web formları eklemek isteyen herkes, JS-UI çerçevelerinde form kullanmayı hedefleyen geliştiriciler ve çok fazla JavaScript kullanmadan kullanıcı giriş özellikleri talep eden web geliştiricileri için idealdir. Web geliştiricileri, web tasarımcıları, ön uç geliştiriciler, yeni başlayanlar ve ileri düzeyde olanlar için uygundur – ve temel HTML bilgileriyle kolayca takip edilebilir.

Web sitelerindeki Formlar için HTML Temelleri

Eğer şimdiye kadar web formları alanında hiç veya az bilgi sahibi değilsen, temellerle başlayarak rehbere adım at. Bir HTML Formunun yapısı ile ilgili temel bilgileri ve farklı HTML form elemanları hakkında her şeyi öğreneceksin. Checkboxlar, Radyo Düğmeleri, Dosya Yükleme, Şifre Alanları ve Metin gibi farklı giriş alanlarını, niteliklerini ve doğrulama seçeneklerini öğren. Kullanıcı dostu ve erişilebilir formaları çeşitli form elemanlarıyla nasıl oluşturabileceğini öğren.

Dinamik Web Formları, Sunucu Taraflı İşleme & Modern JavaScript Çerçevelerinde Formlar

Form elemanları ile etkileşimı, dinamik ve kullanıcı dostu bir deneyim sağlamak için JavaScript ile özellikle yönlendirebilirsin. Bu sayede girişler alınabilir, düzenlenebilir ve gerektiğinde otomatik olarak doğrulanabilir. İstemci taraflı doğrulama ile yanlış veya eksik veriler direkt olarak kullanıcı tarafından yakalanabilir, sunucuya gönderilmeden önce. Bu, veri kalitesini artırır ve olası hata kaynaklarını azaltır. Bir diğer önemli konu da formların kullanıcı girişlerine ve etkileşimlerine dinamik olarak uyum sağlanmasıdır. Tüm bu yönler, video rehberinde ele alınır.

Ayrıca, Form Verilerinin Sunucuya Gönderilmesi ve Alınması ile Node.js ve Express örneğindeki sunucu taraflı işlemeye ve modern JavaScript çerçevelerinde form kullanımına bakacaksın, örneğin React uygulamalarında formların entegrasyonu ve React Hooks ve bileşenlerle reaktif formların nasıl oluşturulacağı. Form ve form elemanlarının stilini ve veri güvenliği konusunda önemli ipuçları da al.

Bu Uygulama Rehberinde Neler Öğreneceksin

HTML Formları geliştirmek konusunda kapsamlı bilgi edinmek için kursu kullan. Farklı giriş alanlarını ve özelliklerini tanı. Form elemanlarını JavaScript ile kontrol etmeyi ve nitelikleri ve doğrulamaları nasıl uygulayacağını öğren. Ayrıca, formları modern JavaScript çerçeveleri olan React, VueJS ve AlpineJS gibi entegre etmeyi öğren.