HTML'de Form Nasıl Oluşturulur

HTML'de Form Nasıl Oluşturulur

Bir web sitesi kullanıcısından veri toplamak birkaç farklı yolla yapılabilir. Web sitelerindeki formlar, bir kullanıcıyı bir bültene abone olmak gibi basit bir işleve veya bir iş başvuru formu olarak hareket etmek gibi daha karmaşık bir amaca sahip olabilir.





Ancak, tüm bu basit ve karmaşık formların ortak noktası HTML'dir ve daha özel olarak HTML'dir. etiket.



Form Etiketini Kullanma

NS etiketi, formlar için yapı taşları olarak kabul edilebilecek diğer öğeleri içine alan kapsayıcı olarak kullanılan bir HTML öğesidir. Bu temel unsurlardan bazıları şunları içerir: etiket, etiketi ve etiket.





NS etiketinin işlevselliğine katkıda bulunan önemli bir özelliği vardır. Bu özniteliğe eylem denir ve forma girilen verilerin aktarılacağı dosyayı tanımlamak için kullanılır.

Etiket Örneğinin Kullanılması





Yukarıdaki örnek, projelerinizde form etiketinin nasıl kullanılacağını gösterir. Ana çıkarımlardan biri, bir form etiketi açarsanız kapatmayı hatırlamanız gerektiğidir. Bu bir form yapısı oluşturacak ve ayrıca forma girilen verilerin doğru bir şekilde işlenmesini sağlayacaktır.



Etiketi Kullanma

NS etiketi, her giriş alanındaki verileri bir formda tanımlamak için kullanılır. Bu etiketin bir için bir formun işlevselliğini geliştirmek için kullanılan nitelik.

İlgili: Kodunuzu Test Etmek İçin En İyi Ücretsiz Çevrimiçi HTML Düzenleyiciler



Karşılık gelen giriş alanına atanan kimlik, için içindeki değer etiketine tıkladığınızda bu giriş alanı otomatik olarak vurgulanacaktır.

Etiket Örneğinin Kullanılması


First Name:

Yukarıdaki örnekte görebilirsiniz, için özniteliğe değer atanır isim . Bu nedenle, bir giriş alanı oluşturursanız, isim id, bu alan her tıkladığınızda vurgulanacaktır. Öncelikle İsim etiket.



Etiketi Kullanma

En temel haliyle, etiketi bir metin kutusu olarak görülebilir. NS etiketi, kullanıcıdan veri yakalar ve daha önemli özelliklerinden biri, tip bağlanmak. NS tip öznitelik, bu metin kutusunun toplayabileceği veri türünü belirtir.

İlgili: CSS'de Yığılmış Form Nasıl Oluşturulur

için atayabileceğiniz birkaç farklı değer vardır. tip öznitelik, ancak daha popüler olanlardan bazıları aşağıdaki gibidir.

  • Metin
  • Sayı
  • E-posta
  • resim
  • Tarih
  • onay kutusu
  • Radyo
  • Parola

etiketini kullanma Örnek


First Name:

NS Yukarıdaki koddaki etiket, her biri benzersiz bir işleve sahip üç farklı özelliğe sahiptir. NS tip özniteliğe bir metin değeri atanır, bu, metin kutusunun yalnızca karakterleri kabul edeceği anlamına gelir.

NS İD öznitelik, metin kutusu için benzersiz bir tanımlayıcıdır ve bu öğeye bir CSS dosyasından erişim sağladığı için önemlidir. NS isim nitelik aynı zamanda benzersiz bir tanımlayıcıdır; ancak name niteliği, geliştirmenin sunucu tarafındaki bir öğeyle etkileşim kurmak için kullanılır.

NS İD ve isim özniteliklere genellikle, biri istemci tarafından bir öğeye, diğeri ise sunucu tarafından erişim sağladığı için aynı değere atanır.

Onay Kutusu Öğesini Kullanma

Onay kutusu öğesi, ile kullanabileceğiniz diğer öğelere kıyasla çok benzersizdir. etiket. Bir kullanıcının ilgili seçenekler listesinden bir veya daha fazla seçenek seçmesine olanak tanır. Onay kutuları, seçildiğinde bir onay içeren küçük kare kutularla temsil edildikleri için kolayca tanımlanır.

Onay Kutusu Öğe Örneğinin Kullanılması


Programming Languages:
Java
JavaScript
Python

Yukarıdaki örnekte, onay kutusu öğelerinin her birinin bir değer özniteliği vardır ve bu, her bir onay kutusu seçeneğini koleksiyondan ayırt etmeye yardımcı olduğu için önemlidir. Bu nedenle, bir kullanıcı yukarıdaki seçeneklerden 'Java'yı seçerse, veriler bunu yansıtacaktır.

Etiketi ve Radyo Öğelerini Kullanma

NS etiket ve radyo öğeleri, bir kullanıcının bir seferde yalnızca tek bir değer seçmesine izin vermeleri bakımından benzerdir; bu nedenle, aynı işleve sahip oldukları söylenebilir. Ancak görünüş olarak çok farklılar.

Radyo elemanı görünüşte onay kutusu elemanına daha yakındır, ancak radyo elemanı ile kareler yerine daireleriniz olur.

NS etiketi, kullanıcının tek bir değer seçmesine izin veren, aslında bir açılır kutu olan şeyi üretir.

Etiket ve Radyo Öğesini Kullanma Örneği


Sex:

Male
Female
Other


Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer

Tarih Öğesini Kullanma

Tarih öğesi, tıklandığında bir takvim oluşturan küçük bir metin kutusu oluşturur. kullanma tarih formlarınızdaki bir giriş türü olarak, bir kullanıcının potansiyel olarak yanlış bir tarih girmesine karşı koruma sağlar, bu da potansiyel olarak hatalı verilerin toplanmasına neden olabilir.

Tarih Öğesi Örneğinin Kullanılması


E-posta ve Parola Öğesini Kullanma

Bir geliştirici, bir e-posta veya parola değerlerini type özniteliğine atadığında etiketi, her biri aynı metin kutusu üretir. Ancak bu kutuları kullanmaya başladığınızda farklar ortaya çıkıyor.

E-posta öğesi, metin kutusuna girilen verileri izler ve her gönderimin bir e-posta adresinin standart gereksinimini karşılamasını sağlar; bu, yerel bir kısma sahip olmak, ardından @ sembolüne sahip olmak ve bir etki alanı ile biten anlamına gelir.

E-posta Öğesi Örneğinin Kullanılması


Yukarıdaki örnekte, adlı yeni bir öznitelikle tanıştınız. Yer tutucu ve bu öznitelik, metin kutusunda soluk gri olarak görüntülenen bir metin değeri alır. Bu metin, yukarıdaki örnekte görüldüğü gibi metin kutusuna yerleştirilecek verileri belirtmek için kullanılır.

Parola öğesi, metin kutusuna girilirken karakterleri yıldızlara dönüştürür. Bu nedenle, bilgisayar ekranınız başkaları tarafından görülüyorsa, girdiğiniz şifreyi görmezler.

Parola Öğesini Kullanma Örneği


Düğme Etiketini Kullanma

Bir formda, genellikle iki farklı düğme türü vardır. İlki, forma girilen verileri, eylem özniteliğine atanan değere gönderen gönder düğmesidir. < biçim> etiket).

Gönder Düğmesi Örneği

Submit

Genellikle bir formda kullanılan ikinci düğme türü, kullanıcının yeni veriler girebilmesi için formdaki verileri temizleyen sıfırlama düğmesidir. NS etiketi var tip düğmenin işlevini belirtmek için kullanılan nitelik. Yukarıdaki örnekte tip nitelik değeri atamaktır Sunmak , bu nedenle, bir düğme tip değeri Sıfırla formu sıfırlamak için kullanılır.

Sıfırlama Düğmesi Örneği

Reset

Form Oluşturma

HTML'de basit bir form oluşturmak için yukarıda bahsedilen tüm öğeleri bir etiket.

Form Örneği Oluşturma






Forms








First Name:

Last Name:




Date of birth:

Age:




Gender:

Male
Female
Other

Email Address:




Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer



Programming Languages:
Java
JavaScript
Python



Password:

Confirm Password:



Submit
Reset




Yukarıdaki kod aşağıdaki formu üretecektir:

ücretsiz filmler kayıt veya indirme yok

Artık HTML'de Basit Bir Form Oluşturabilirsiniz

Bu makale, işlevsel bir HTML formu oluşturmak için tüm araçları sağlar. Form oluşturmada kullanılan farklı HTML etiketlerini tanımlar ve bu etiketlerle kullanılabilecek farklı nitelikleri araştırır.

Ancak, web sitelerinde gördüğünüz çoğu formun ek bir bileşeni vardır; Forma hayat vermek ve daha estetik hale getirmek için kullanılan CSS.

Paylaş Paylaş Cıvıldamak E-posta Temel CSS3 Özellikleri Hile Sayfası

CSS3 özellikleri hile sayfamızla temel CSS sözdiziminde ustalaşın.

Sonrakini Oku İlgili konular
  • Programlama
  • HTML
  • Web Geliştirme
  • Kodlama Eğitimleri
Yazar hakkında Kadeisha Kean(21 Makale Yayınlandı)

Kadeisha Kean, Full-Stack Yazılım Geliştirici ve Teknik/Teknoloji Yazarıdır. En karmaşık teknolojik kavramların bazılarını basitleştirme konusunda belirgin bir yeteneğe sahiptir; herhangi bir teknoloji acemi tarafından kolayca anlaşılabilecek malzeme üretmek. Yazma, ilginç yazılımlar geliştirme ve dünyayı gezme (belgeseller aracılığıyla) konusunda tutkulu.

Kadeisha Kean'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın