HTML - Formlar

Site ziyaretçisinden bazı veriler toplamak istediğinizde HTML Formları gereklidir. Örneğin, kullanıcı kaydı sırasında isim, e-posta adresi, kredi kartı vb. Bilgileri toplamak istiyorsunuz.

Bir form site ziyaretçisinden girdi alacak ve daha sonra bunu CGI, ASP Script veya PHP komut dosyası gibi bir arka uç uygulamasına gönderecektir. Arka uç uygulaması, içindeki tanımlanmış iş mantığına göre aktarılan veriler üzerinde gerekli işlemleri gerçekleştirecektir. uygulama.

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

HTML <form> etiketi bir HTML formu oluşturmak için kullanılır ve aşağıdaki sözdizimine sahiptir -

<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

Form Özellikleri

Yaygın özniteliklerin yanı sıra, en sık kullanılan form özniteliklerinin listesi aşağıdadır -

Sr.No	Öznitelik ve Açıklama
1	action Arka uç komut dosyası, aktarılan verilerinizi işlemeye hazır.
2	method Verileri yüklemek için kullanılacak yöntem. En sık kullanılanlar GET ve POST yöntemleridir.
3	target Komut dosyasının sonucunun görüntüleneceği hedef pencereyi veya çerçeveyi belirtin. _Blank, _self, _parent vb. Değerleri alır.
4	enctype Tarayıcının verileri sunucuya göndermeden önce nasıl kodlayacağını belirtmek için enctype niteliğini kullanabilirsiniz. Olası değerler - application/x-www-form-urlencoded - Bu, çoğu formun basit senaryolarda kullandığı standart yöntemdir. mutlipart/form-data - Bu, ikili verileri resim, kelime dosyası vb. Gibi dosyalar biçiminde yüklemek istediğinizde kullanılır.

Note- Form veri yüklemesinin nasıl çalıştığı hakkında ayrıntılı bilgi için Perl & CGI'ye başvurabilirsiniz .

HTML Form Kontrolleri

HTML formunu kullanarak veri toplamak için kullanabileceğiniz farklı form denetimi türleri vardır -

Metin Giriş Kontrolleri
Onay Kutuları Denetimleri
Radyo Kutusu Kontrolleri
Kutu Kontrollerini Seçin
Dosya Seçme kutuları
Gizli Kontroller
Tıklanabilir Düğmeler
Gönder ve Sıfırla Düğmesi

Metin Giriş Kontrolleri

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

Single-line text input controls- Bu kontrol, arama kutuları veya adlar gibi yalnızca bir satır kullanıcı girişi gerektiren öğeler için kullanılır. HTML kullanılarak oluşturulurlar<input> etiket.
Password input controls- Bu aynı zamanda tek satırlık bir metin girişidir ancak bir kullanıcı girer girmez karakteri maskeler. Ayrıca HTMl <input> etiketi kullanılarak oluşturulurlar.
Multi-line text input controls- Bu, kullanıcının tek bir cümleden daha uzun olabilecek ayrıntıları vermesi gerektiğinde kullanılır. Çok satırlı giriş kontrolleri HTML kullanılarak oluşturulur<textarea> etiket.

Tek satırlı metin giriş kontrolleri

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

Misal

Adı ve soyadı almak için kullanılan tek satırlık bir metin girişinin temel bir örneğini burada bulabilirsiniz -

<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
	
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

Metin alanı oluşturmak için <input> etiketinin özniteliklerinin listesi aşağıdadır.

Sr.No	Öznitelik ve Açıklama
1	type Giriş kontrolünün tipini gösterir ve metin giriş kontrolü için ayarlanacaktır. 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şi denetiminin genişliğini karakter cinsinden belirtmeye izin verir.
5	maxlength Bir kullanıcının metin kutusuna girebileceği maksimum karakter sayısını belirlemenize izin verir.

Parola giriş kontrolleri

Bu aynı zamanda tek satırlık bir metin girişidir ancak bir kullanıcı girer girmez karakteri maskeler. Ayrıca HTML <input> etiketi kullanılarak oluşturulurlar ancak type özelliği şu şekilde ayarlanır:password.

Misal

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

<!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
	
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

Şifre alanı oluşturmak için <input> etiketinin özniteliklerinin listesi aşağıdadır.

Sr.No	Öznitelik ve Açıklama
1	type Giriş kontrolünün türünü gösterir ve şifre giriş kontrolü için ayarlanacaktır. password.
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şi denetiminin genişliğini karakter cinsinden belirtmeye izin verir.
5	maxlength Bir kullanıcının metin kutusuna girebileceği maksimum karakter sayısını belirlemenize izin verir.

Çok Satırlı Metin Giriş Kontrolleri

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

Misal

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

<!DOCTYPE html>
<html>

   <head>
      <title>Multiple-Line Input Control</title>
   </head>
	
   <body>
      <form>
         Description : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

<textarea> etiketi için özniteliklerin listesi aşağıdadır.

Sr.No	Öznitelik ve Açıklama
1	name Tanınması ve değeri alması için sunucuya gönderilen kontrole bir isim vermek için kullanılır.
2	rows Metin alanı kutusunun satır sayısını gösterir.
3	cols Metin alanı kutusunun sütun sayısını gösterir

Onay Kutusu Kontrolü

Onay kutuları, birden fazla seçeneğin seçilmesi gerektiğinde kullanılır. Ayrıca HTML <input> etiketi kullanılarak oluşturulurlar ancak type özelliği şu şekilde ayarlanır:checkbox..

Misal

İki onay kutusu olan bir form için örnek bir HTML kodu:

<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
	
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

<checkbox> etiketi için özniteliklerin listesi aşağıdadır.

Sr.No	Öznitelik ve Açıklama
1	type Giriş kontrolünün tipini gösterir ve onay kutusu giriş kontrolü için ayarlanacaktır. checkbox..
2	name Tanınması ve değeri alması için sunucuya gönderilen kontrole bir isim vermek için kullanılır.
3	value Onay kutusu seçilirse kullanılacak değer.
4	checked Varsayılan olarak seçmek istiyorsanız işaretli olarak ayarlayın .

Radyo Düğmesi Kontrolü

Radyo düğmeleri, birçok seçenek dışında kullanılır, yalnızca bir seçeneğin seçilmesi gerekir. Ayrıca HTML <input> etiketi kullanılarak oluşturulurlar ancak type özelliği şu şekilde ayarlanır:radio.

Misal

İki radyo düğmesi olan bir form için örnek HTML kodu:

<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

Radyo düğmesinin özniteliklerinin listesi aşağıdadır.

Sr.No	Öznitelik ve Açıklama
1	type Giriş kontrolünün türünü gösterir ve onay kutusu giriş kontrolü için radyoya ayarlanacaktır.
2	name Tanınması ve değeri alması için sunucuya gönderilen kontrole bir isim vermek için kullanılır.
3	value Radyo kutusu seçilirse kullanılacak değer.
4	checked Varsayılan olarak seçmek istiyorsanız işaretli olarak ayarlayın .

Kutu Denetimini Seçin

Bir kullanıcının bir veya daha fazla seçeneği seçebileceği açılır liste biçiminde çeşitli seçenekleri listeleme seçeneği sunan açılır kutu olarak da adlandırılan bir seçim kutusu.

Misal

Bir açılır kutuya sahip bir form için örnek HTML kodu

<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
	
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

<select> etiketinin önemli özniteliklerinin listesi aşağıdadır -

Sr.No	Öznitelik ve Açıklama
1	name Tanınması ve değeri alması için sunucuya gönderilen kontrole bir isim vermek için kullanılır.
2	size Bu, kayan bir liste kutusu sunmak için kullanılabilir.
3	multiple "Çoklu" olarak ayarlanırsa, kullanıcının menüden birden fazla öğe seçmesine izin verir.

<Seçenek> etiketinin önemli özniteliklerinin listesi aşağıdadır -

Sr.No	Öznitelik ve Açıklama
1	value Seçim kutusundaki bir seçenek seçildiğinde kullanılacak değer.
2	selected Bu seçeneğin, sayfa yüklendiğinde başlangıçta seçilen değer olması gerektiğini belirtir.
3	label Seçenek etiketlemenin alternatif bir yolu

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 gerekecektir. Bu ayrıca <input> öğesi kullanılarak oluşturulur, ancak type özelliği şu şekilde ayarlanır:file.

Misal

İşte tek dosya yükleme kutusu olan bir form için örnek HTML kodu -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Öznitellikler

Dosya yükleme kutusunun önemli özelliklerinin listesi aşağıdadır -

Sr.No	Öznitelik ve Açıklama
1	name Tanınması ve değeri alması için sunucuya gönderilen kontrole bir isim vermek için kullanılır.
2	accept Sunucunun kabul ettiği dosya türlerini belirtir.

Düğme Kontrolleri

HTML'de tıklanabilir düğmeler oluşturmanın çeşitli yolları vardır. Ayrıca <input> etiketini kullanarak, type özniteliğini şu şekilde ayarlayarak tıklanabilir bir düğme oluşturabilirsiniz:button. 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 denetimlerini otomatik olarak başlangıç değerlerine sıfırlayan bir düğme oluşturur.
3	button Bu, kullanıcı o düğmeyi tıkladığında bir 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üğmenin arka planı olarak bir resim kullanabiliriz.

Misal

Burada, üç tür düğme içeren bir form için örnek HTML kodu verilmiştir -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -

Gizli Form Denetimleri

Gizli form kontrolleri, daha sonra sunucuya gönderilebilecek olan sayfanın içindeki verileri gizlemek için kullanılır. Bu kontrol kodun içinde gizlenir ve gerçek sayfada görünmez. Örneğin, geçerli sayfa numarasını korumak için aşağıdaki gizli form kullanılmaktadır. Bir kullanıcı bir sonraki sayfayı tıkladığında, gizli kontrol değeri web sunucusuna gönderilecek ve orada geçirilen geçerli sayfaya göre bir sonraki sayfanın görüntüleneceğine karar verecektir.

Misal

Gizli kontrolün kullanımını gösteren örnek HTML kodu -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
	
</html>

Bu, aşağıdaki sonucu verecektir -