Web Tasarım ve Prog.HtmlHtml Form Nesneleri 2

Textarea Etiketi

Text kutularının görevi, hazırlamakta olduğumuz forma tek satırlık veri giriş alanları eklemek iken Textarea kullanarak forma, birden fazla satırdan oluşan alanlar ekleyebiliriz. Rows (satır) ve cols (sütun) tanımlamaları yapılarak bu metin alanının kaç satır ve kaç sütundan oluşması gerektiği belirlenir. Form elemanlarından inpu etiketi kapatılmaz iken textarea etiketini kapatmak gerekir.

Örnek :

<form action="" method="post">
Adresiniz: <br>
<textarea name="adres" rows="5" cols="40"></textarea>
</form>

Tarayıcı Çıktısı :

 

Not : Textarea etiketi içerisine başlangıçta bir metin yazılması istenirse etiket kapatmadan önceki alana metin yazılabilir.

 

Örnek :

<form action="" method="post">
Adresiniz: <br>
<textarea name="adres" rows="5" cols="40">Adresinizi yazin.</textarea>
</form>

Tarayıcı Çıktısı :

 

Select Etiketi

Select etiketi ile forma açılır bir kutu veya liste görünümlü bir form elamanı eklenebilir. Select etiketine name parametresi ile bir isim verilmelidir. Bu nesne içerisine eklenecek herbir değer <option> </option> etekitleri arasına yazılmalıdır. Form gönderildiğinde hangi seçimin yapıldığını belirtmek için option içerisine value parametresi eklenir.

Örnek : Açılır menü eklemek

<form action="" method="post">
  <select name="sehir">
    <option value="">Seçiniz...</option>
    <option value="01">Adana</option>
    <option value="06">Ankara</option>
    <option value="34">İstanbul</option>
    <option value="35">İzmir</option>
  </select>
</form>

 Tarayıcı Çıktısı :

 Eğer bir liste görünümünde seçim yaptırılmak istenirse select etiketine size parametresi eklenir. Size parametresine girilen değer kadar seçenet liste içersinde gösterilir.

Örnek : Liste görünümü

<form action="" method="post">
  <select name="sehir" size="3">
    <option value="">Seçiniz...</option>
    <option value="01">Adana</option>
    <option value="06">Ankara</option>
    <option value="34">İstanbul</option>
    <option value="35">İzmir</option>
  </select>
</form>

 Tarayıcı Çıktısı :

 

 

 

Liste görünümünde Ctrl tuşu kullanılarak kullanıcının birden fazla seçim yapabilmesi istenirse multiple="multiple" kullanılabilir.

Örnek : Liste çoklu seçim

<form action="" method="post">
  <select name="sehir" size="3" multiple="multiple">
    <option value="01">Adana</option>
    <option value="06">Ankara</option>
    <option value="34">İstanbul</option>
    <option value="35">İzmir</option>
  </select>
</form>

 Tarayıcı Çıktısı :