Html Webmaster

HTML Temel : HTML Formları

HTML FORMLAR

Site ziyaretçisinden bazı veriler toplamak istediğinizde HTML Formları gerekir. Örneğin, kullanıcı kaydı sırasında ad, e-posta adresi, kredi kartı vb. Gibi bilgileri toplamak olabilir.

Bir form site ziyaretçisinden girdi alacak ve daha sonra CGI, ASP Script veya PHP betiği gibi bir arka uç uygulamasına gönderecektir. Arka uç uygulaması, içinde tanımlanmış iş mantığına dayanan geçirilen veriler üzerinde gerekli işlemleri gerçekleştirecektir.

Metin alanları, textarea alanları, açılır menüler, radyo düğmeleri, onay kutuları vb. Gibi çeşitli form öğeleri vardır.

HTML <form> etiketi, bir HTML formu oluşturmak için kullanılır ve aşağıdaki söz dizimini içerir –


Form Etiketleri

Etiket Açıklama
<form> Form
<input> Giriş alanı
<textarea> Çok satırlı metin giriş alanı
<label> Etiket
<fieldset> Alanların ayarlarının nasıl olacağını belirtir.
<legend> Manşet
<select> Açılabilir liste (combobox)
<optgroup> Seçenek kutusu grubu
<option> Açılabilir liste içindeki maddeleri belirtir.
<button> Buton
<isindex> Önemsiz. Bunun yerine <input> etiketini kullanınız.

En sık kullanılan form özellikleri:

nitelik Açıklama
name Formun adı.
action Form aracılığıyla gönderilen bilgileri işleyen programın URL’si.
method Tarayıcının formu göndermek için kullandığı HTTP yöntemi. Olası değerler getve post.
target Komut dosyasının sonucunun görüntüleneceği hedef sayfayı belirten bir ad veya anahtar kelime.Ayrılmış anahtar kelimeler _blank_self_parentve _top.

Metin Giriş Kontrolleri

Formlarda kullanılan üç tür metin girişi vardır –

  • Tek satırlık metin girişi kontrolleri – Bu kontrol, arama kutuları veya adlar gibi yalnızca bir kullanıcı girişi satırı gerektiren öğeler için kullanılır. HTML <input> etiketi kullanılarak oluşturulurlar .
  • Parola giriş kontrolleri – Bu aynı zamanda tek satırlık bir metin girişidir, ancak kullanıcı girdiğinde karakteri maskelemektedir. Ayrıca HTML <input> etiketi kullanılarak oluşturulur.
  • Çok satırlı metin girişi denetimleri – Kullanıcının, tek bir cümleyden daha uzun olabilecek ayrıntılar vermesi gerektiğinde kullanılır. Çok satırlı giriş kontrolleri HTML <textarea> etiketi kullanılarak oluşturulur .

Tek Satırlık Metin Girişi

Bu kontrol, arama kutuları veya adlar gibi yalnızca bir kullanıcı girişi satırı gerektiren öğeler için kullanılır. HTML <input> etiketi kullanılarak oluşturulurlar.

Örnek

İşte ad ve soyadını almak için kullanılan tek satırlı metin girişinin temel bir örneği –


Öznitellikler

Aşağıda, metin alanı oluşturmak için <input> etiketinin özniteliklerinin listesi bulunmaktadır.

Sr.No Özellik ve açıklama
1 type

Giriş kontrol ve ayarlanacak metin girişi kontrol için türünü gösterir text.

2 name

Tanınması ve değeri alması için sunucuya gönderilen kontrole bir isim vermek için kullanılır.

3 value

Bu, kontrolün içinde bir başlangıç ​​değeri sağlamak için kullanılabilir.

4 size

Metin giriş kontrolünün genişliğini karakter cinsinden belirtmenize izin verir.

5 maxlength

Bir kullanıcının metin kutusuna girebileceği maksimum karakter sayısını belirlemenizi sağlar.

Şifre Girişi Kontrolleri

Bu aynı zamanda tek satırlık bir metin girişidir ancak kullanıcı girdiğinde karakteri maskelemektedir. Ayrıca HTML <input> etiketi kullanılarak oluşturulurlar ancak type niteliği password olarak ayarlanır .

Örnek

Kullanıcı şifresini almak için kullanılan tek satırlı şifre girişinin temel bir örneği:


Dosya Yükleme Kutusu

Bir kullanıcının web sitenize dosya yüklemesine izin vermek istiyorsanız, dosya seçme kutusu olarak da bilinen bir dosya yükleme kutusu kullanmanız gerekir. Bu aynı zamanda <input> elemanı kullanılarak yaratılmıştır ancak type niteliği dosyaya ayarlanmıştır .

Örnek

İşte bir dosya yükleme kutusuyla bir form için örnek HTML kodu –


Çok Satırlı Metin Giriş Kontrolleri

Kullanıcının, tek bir cümleyden daha uzun olabilecek ayrıntıları vermesi gerektiğinde kullanılır. Çok satırlı giriş kontrolleri HTML <textarea> etiketi kullanılarak oluşturulur.

Örnek

Öğe açıklama almak için kullanılan çok satırlı metin girişinin temel bir örneği:


Radyo Düğmeleri

Radyo düğmeleri, kullanıcının önceden tanımlanmış bir seçenek grubundan tam olarak bir seçenek seçmesine izin vermek için kullanılır. Özniteliği değeri <input> olan bir öğe kullanılarak oluşturulur .typeradio


Onay Kutuları

Onay kutuları, kullanıcının önceden tanımlanmış bir seçenek grubundan bir veya daha fazla seçenek seçmesini sağlar. Özniteliği değeri <input>olan bir öğe kullanılarak oluşturulur .typecheckbox


Select Kutusu

Seçim kutusu, kullanıcının açılan seçenekler listesinden bir veya daha fazla seçenek seçmesine izin veren açılan bir seçenekler listesidir. Seçim kutusu, <select>element ve <option>element kullanılarak yaratılır . <select>Öğenin içindeki seçenek öğeleri her bir liste öğesini tanımlar.


Buton Kontrolleri

HTML’de tıklanabilir düğmeler oluşturmanın çeşitli yolları vardır. <input> etiketini kullanarak türünü buton ayarlayarak tıklanabilir bir düğme de oluşturabilirsiniz . Type özelliği aşağıdaki değerleri alabilir –

Sr.No Tip ve Açıklama
1 submit

Bu otomatik olarak bir form gönderen bir düğme oluşturur.

2 reset

Bu, form kontrollerini otomatik olarak başlangıç ​​değerlerine sıfırlayan bir düğme oluşturur.

3 button

Bu, kullanıcı bu düğmeyi tıkladığında istemci tarafı komut dosyasını tetiklemek için kullanılan bir düğme oluşturur.

4 image

Bu, tıklanabilir bir düğme oluşturur ancak düğmeyi arka planı olarak bir resim kullanabiliriz.

Örnek

Üç tür düğme içeren bir form için örnek HTML kodu:

Yazar Hakkında

Beytullah Toprak

Genç girişimci olarak web sitemde siz değerli okuyucularımıza elimden geldiğince bilgi aktarmak hem öğrenmek , hem sizlere öğretmek amaçlamaktayız.

Yorum Yap