HTML FORMLAR - INPUT PARAMETRELERİ

Merhaba...

Input'ların,  formlarda en çok kullanılan elemanları olduğunu söylemiştim. Input elemanları, hem ortak hemde tipine bağlı olarak farklı özellikler yada parametreler alırlar.

PLACEHOLDER

Placeholder metin kutuları için açıklama yazıdır. Tasarım ekranında kutu içersinde biraz solukça gösterilir ancak  CSS ile biçimi değiştirilebilir. Metin kutusu içerisinde bir şey yazılacağı zaman placeholder yazısı kaybolur, kutu içi boşaltılırsa tekrar görünür...

<form action="">
  <label for="ad">Adınız:</label><br>
  <input type="text" id="ad" name="ad" placeholder="Adınız..."><br> <br>
<label for="soyad">Soyadınız:</label><br>
  <input type="text" id="soyad" name="soyad" placeholder="Soyadınız..."><br> <br>
  <input type="submit" value="GÖNDER">
</form>

Yukarıdaki metin alanlarına bir şey yazdığınız zaman placeholder yazıları kaybolacaktır..

VALUE

Value (değer) inputların seçilen değerini belirler. Form onaylandığında sunucuya bu değer gönderilir. Dolayısıyla formun işleneceği sayfada form elamanının value değerine bakılır. 

Value değerleri öncedende tanımlanabilir. Örneğin bir text metin kutusuna başta alue değeri yazılırsa ,tasarımda bu değer metin kutusunun içinde yazılmış olarak gelir...

<form action="">
  <label for="okul">Okulunuz:</label><br>
  <input type="text" id="okul" name="okul" value="GÖZTEPE MTAL"><br> <br>
  <input type="submit" value="GÖNDER">
</form>

READONLY

Readonly (sadece okunur) inputların sadece okunur olmasını sağlar yani içeriği değiştirilemez. Readony özelliği eklenmiş bir kutuyu tıklayabilir ,odaklayabilir ve  içindeki yazıyı kopyalabilirsiniz ancak değiştiremezsiniz. Metin kutusunun value değeri de kod kısmında belirtilmelidir. Readonly özellliği , input etiketi içerisinde parametre olarak yazılır. Sadece readonly şeklinde yazılabileceği gibi readonly="" şeklindede yazılabilir..

Form gönderildiğinde readonly özelliği olsa bile input değeri sunucuya gönderilr.

<form action="">
  <label for="okul">Sınıfınız:</label><br>
  <input type="text" id="okul" name="okul" value="AMP 11/A" readonly><br> <br>
  <input type="submit" value="GÖNDER">
</form>

Yukarıdaki sınıf bilgisini, readonly özelliği olduğu için değiştiremezsiniz...

DISABLED

Disabled (pasif,devre dışı) inputların sadece pasif olmasını sağlar yanikullanım dışı olur ama ekranda görünür. . Disabled özelliği eklenmiş bir kutuyu tıklayamaz ,odaklayamaz  ve kullanamazsınız. Disabled  özellliği , input etiketi içerisinde parametre olarak yazılır. Sadece disabled şeklinde yazılabileceği gibi disabled="" şeklindede yazılabilir..

Form gönderildiğinde , disabled özelliği olan input değeri sunucuya GÖNDERİLMEZ...

Genellikle form içerisinde bazı seçimlere bağlı olarak alanın aktif yada pasif olması gereken durumlarda kullanılır. Bu bağlılığa göre disabled ekleme yada kaldırma JAVASCRIPT ile yapılabilir.

<form action="">
  <label for="okul">Sınıfınız:</label><br>
  <input type="text" id="okul" name="okul" value="AMP 11/A" disabled><br> <br>
  <input type="submit" value="GÖNDER">
</form>

Yukarıdaki sınıf bilgisi (disabled) özelliği olduğu için devre dışıdır. Tıklanamaz, odaklanamaz...

REQUIRED

Reaquired "gerekli" nlamına gelir. Form içerisinde boş bırakılmaması gereken alanlar için kullanılır. Required özelliği yine input etiketi içerinde parametre olarak yazılır. Sdece required olarak yazılabileceği gibi , required="" şeklindede yazılabilir.. Form onaylandığında , required özelliği eklenmiş bir alan varsa form gönderilmez...

<form action="">
  <label for="ad">Adınız:</label><br>
  <input type="text" id="ad" name="ad" placeholder="Adınız..." required><br> <br> 
  <input type="submit" value="GÖNDER">
</form>

Yukarıdaki formu gönderdiğinizde , eğer ad alanına bir şey yazılmadıysa "Lütfen bu alanı doldurun" uyarısı alırsınız ve form gönderilmez...

SIZE

Size özelliği "karakter cinsinden"  input  elemanın genişliğini belirlerler.. Örneğin size="20" ise , 20 karakterlik genişlik anlamına gelir.  Varsayılan değeri 20'dir.  text, search, tel, url, email, and password tiplerinde kullanılır. 

<form action="">
  <label for="ad">Adınız:</label><br>
  <input type="text" id="ad" name="ad" placeholder="Adınız..."  ><br> <br> 
  <label for="soyad">Soyadınız:</label><br>
  <input type="text" id="soyad" name="soyad" placeholder="Soyadınız..." size="50" ><br> <br> 
  <input type="submit" value="GÖNDER">
</form>

Yukarıdaki ad alanına size özellği eklemediğimiz için , bu alan   varsayılan 20 karakter genişliğinde görünür..  Soyadı alanına ise size="50" parametesi ekledik ve genişliği 50 karakterlik olur... 

MAXLENGTH

Maxlength (maksium uzunluk)  bir input elemanın alabileceği maksimum karakter sayısını belirler. Örneğin maxlenth="15" özelliği eklenen bir alana 15'ten daha fazla karakter yazamazsınız....  

<form action="">
  <label for="ad">Adınız: (max 8 karakter)</label><br>
  <input type="text" id="ad" name="ad" maxlength="8"  ><br> <br>  
  <input type="submit" value="GÖNDER">
</form>

Yukarıdaki ad alanına, maxlength="8" özelliği eklendiği için ,  en fazla 8 karakter yazabilirsiniz. 8 karakterden sonra yazsanız bile kutu içerisine eklenmeyecektir. Maxlength için HTML'de henüz bir uyarı yok (max karakter sayısınıa ulaştınız gibi..) . Uyarı yazıları etiketin sağında yada Javascript ile maksiimum karaktere ulaşıldığında gösterilebilir...

AUTOFOCUS

Input'lara autofocus (otomatik odaklanma) özelliği eklenirse ,  sayfa yüklendiğinde input'un odaklanmasını sağlanırr. Yani sayfa yüklendiğinde sanki input tıklanmış gibi olur ,

<form action="">
  <label for="ad">Adınız: </label><br>
  <input type="text" id="ad" name="ad" autofocus ><br> <br>  
</form>

Sayfayı yenilerseniz , yukarıdaki ad alanının  seçili hale geldiğini göreceksiniz..

AUTOCOMPLETE 

Metin kutularına tıklandığında, tarayıcı verssiyonlarına bağlı olarak daha önce buraya yazılmış olan içerikler liste gibi görüntülenir. Eğer autocomplete özelliği "off" yapılırsa , metin kutularına eklenen önceki içerikler görünmez.. On (varsayılan)  yada OFF değerleri alır. 

<form action="">
  <label for="ad">Adınız: </label><br>
  <input type="text" id="ad" name="ad" autocomplete="off"><br> <br>  
</form>

Yukarıdaki metin kutusuna tıklandığında , autocomplete özelliği kapatıldığı için  , önceden girilen değerleri göstermeyecektir..

PATTERN

Inputlar için giriş biçmlerinin belirlenmesini sağlar. düzenli ifadeler olarak ta anılırlar.. Örneğn bir metin kutusuna sadece harflerden oluşan 5 haneli yazı girilmesi yada telefon için kullanılan metin kutusuna 11 haneli numara girilmesinin gerektiği gibi durumlarda pattern kullanılır. Inputa girilen değerin Patternle beliritilen yapıya uyumlu olup olmadığı form gönderilirken kontrol edilir , uyumlu değilse uyarı verilir ve form gönderilmez...

Pattern;

• text,
• date,
• search,
• url, tel,
• email,
• password

tipleri için kullanılır...

Örneğin..

• pattern="[A-Za-z]{5}"   : Küçük ve büyük harflerden oluşan 5 harflik metin girişi...  Örn. "erkan"
• pattern="[0-9]{4} [0-9]{3} [0-9]{2} [0-9]{2}" : Sayılardan oluşan  araları boşluklu 4 bölümlük 11 haneli telefon numarası girişi ..  Örn "0506 242 02 40" ..
• pattern="[0-9]{2}-[0-9]{2}-[0-9]{4}" : Sayılardan oluşan  araları çizgili 4 bölümlük 8 haneli tarih girişi..  Örn "20 06 1982" ..

Pattern ifadelerinde yazılabilecek karakterler (büyük harf,sayı,küçük hraf vs)  köşeli parantez [ ] içerisinde belirtilir.. Karakter sayısı ise hemen yanına süslü parantez { } içerisinde belirtilir. 

  <form action="">
    <label for="ad">5 Harfli bir isim girin..:  </label><br>
    <input type="text" id="ad" name="ad"  required  pattern="[A-Za-z]{5}"><br> <br>  
    <button type="submit">GÖNDER</button> 
  </form>

Yukarıdaki metin kutusu  pattern="[A-Za-z]{5}" özelliği verilmiş .. Dolayısıyla  5 harfli  bir metin girilmediği takdirde , aşağıdaki gibi uyarı yazısı görünür ve form gönderilmez..

MULTİPLE

Kullanıldığı form elemanlarının birden fazla değer almasını sağlar. Genellikle dosya seçimlerinde (type="file") kullanılır.. Ayrıca SELECT seçim kutularında çoklu seçim yapılmasınıda sağlar.

Örneğin file input'larında normal kullanımda tek bir dosya seçilir. Ancak multiple parametresi eklendiğinde istenildiği kadar dosya seçilebilir.

   <form action="" method="post"  enctype="multipart/form-data" > 

        Resim :<br> 
       <input type="file" name="resimler"> <br> 

        Resimler :<br> 
       <input type="file" name="resimler" multiple> 

    </form> 

Üstteki dosya butonu ile tek bir dosya seçilebilirken , alttaki dosya butonu ile  multiple özelliği eklendiği için birden fazla dosya seçilebilir.. 

MİN ve MAX

ınput elemanlarının minimum ve maksimum değerlerini belirlemek için kullanılır.  Aşağıdaki input girişleri için kullanılır.

• number,
• range,
• date,
• datetime-local,
• month,
• time
• week

Range input tipinde kaydırma çubuğunun alacağı değerler belirtilmiş olur. Ancak diğer girişlerde seçilebilecek min ve max değerler belirtilir ve bunların dışında bir değer seçildiğinde form gönderilmez. 

Min ve max beraber kullanılacağı gibi sadece biride kullanılabilir.. 

   <form action="" method="post"  enctype="multipart/form-data" >  

        Yaşınız : ( min:18  max:75 )<br> 
       <input type="number" name="yas" min="18" max="75"><br><br>
       
       Ses Seviyesi : ( min:0 max:100)<br> 
       <input type="range" name="ses" min="0" max="100"  ><br>    

        İşe Giriş Tarihi:  (20 06 1982 ile 20 06 2024 arası) <br> 
       <input type="date" name="d_tarih" min="1982-06-20" max="2024-06-20"><br><br>       

       Olay Zamanı:  ( 08:30 ile 17:20 arası) <br> 
       <input type="time" name="d_tarih" min="08:30" max="17:20"><br><br>       

       <input type="submit" >  
 
    </form> 

Yukarıdaki form elemanlarına belirlenen min ve max değerlerinin dışında değer girildiğinde uyarı görünür ve form gönderilmez..

STEP

Step özelliği uygun inputlarda , artma ve azalma miktarını belirler. Aşağıdaki input girişleri için kullanılır.

• number,
• range,
• date,
• datetime-local,
• month,
• time
• week

Örneğin number tipinde , kutunun sağındaki ok tuşları tıklandığında artım miktarını 5 yapmak için step="5" özelliğini eklememiz gerekir..

<form action="">  

        Yaşınız : ( min:18  max:75 )<br> 
       <input type="number" name="yas" step="5"><br><br>  
 
</form> 

Yukarıdaki number metin kutusunda , klavyedeki alt ve üst tuşlarına her basıldığında yada kutunun sağındaki alt ve üst oklarına her tıklandığında sayı 5er 5er artar yada azalır.. (step=5)

WIDTH ve HEIGHT

Yükseklik(height) ve genişlik(width) değerleri sadece "image" input tipinde kullanılır. Image input tipi , formu gönderecek onay butonunun resim olmasını sağlar. Bunun için input etiketi içerisinde tıpkı IMG etiketinde kullandığımız parametreleri yazarız ;  src , width, height, alt vs... 

<form action="">  
 
       Kullanıcı Adınız:<br> 
       <input type="text" name="k_adi" required> <br><br>

       <input type="image"  src="resim/ok.png" width="50" height="20" alt="resim" title="GÖNDER"> 
 
</form> 

Yukarıdaki image girişindeki resmin yüksekliği 20 , genişliği 50 px yapılmış..

LIST

Lıst özelliği , metin kutuları için önceden tanımlı bir giriş listesi göstermek için kullanılır. <datalist> etiketi ile beraber kullanılır. Datalist'te input sayesinde  yeni girişe izin verirken aynı anda açıılr menüsüyle önceden tanımlı seçeneklerinde görünmesini sağlar. Önceden tanımlı eçenekler datalist içinde opriton etiketleriyle belrlenir.  

<form action="">  
 
    <label for="sehir">Şehir</label><br>
    <input list="sehirler" name="sehir" id="sehir">

    <datalist id="sehirler">
      <option value="izmir"/> 
      <option value="istanbul"/> 
      <option value="ankara"/> 
    </datalist>
 
</form> 

Yukarıdaki şehir kutusu tıklandığında , datalist içinde belirtilen şehirler (izmir,ankara,istanbul) kolayca seçilebilmesi için gösterilecektir..

Görüşmek Üzere...