15 Ocak 2018 Pazartesi

HTML- FORM ELEMANLARI_1

Artık formlarla birlikte dinamik web tasarımına ilk adımı atmış oluyoruz. Formlar yoluyla ziyaretçiden bilgi alabilir, aldığımız bilgi doğrultusunda birçok işlemi gerçekleştirebiliriz. Ziyaretçiye gönderilecek formu hazırlarken, göze hoş görünmesi açısından, tablolar en çok kullanacağımız bileşenler olacaktır. e-bankacılık, e-sigortacılık, e-ticaret, e-eğitim,... gibi etkileşimli (interactive) her işte form kullanılır.
action = "dosya ismi"     Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolu.
method = "yöntem"      Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemi Formdan gelen verilerin gizli ya da açık olarak gönderileceğini belirtir. Post=gizli, Get=açık yoldur.

<input>

Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlar.
Input etiketi yardımcı kodları

type = "eleman türü"    Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır. Etiketin bu değerlerle nasıl kullanıldığını aşağıda örnekleriyle açıklamaya çalıştım.

name = "isim"   Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir.

value = "değer"     "radio" ve "checkbox" dışında bu parametrenin kullanımı isteğe bağlıdır. Belirtilecek "değer" eleman türüne göre değişir.

size = "değer"   "text" ve "password" elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır.

maxlength = "değer"     "text" ve "password" elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Öntanımlı değeri sınırsızdır.

checked = "değer"         Sadece "radio" ve "checkbox" elemanlarında seçili elemanı "on" olarak belirtmek için kullanılır. Diğerlerinde yok sayılır.

src = "dosya ismi"        "image" elemanında resim dosyasını belirtmek için kullanılır.

aredonly      Veri girme amacıyla kullanılmayacak elemanlar içindir.

disabled       Veri girişi engellenecek elemanlar içindir.

Autocomplete   Html5 ile gelen bir özellik, önceden kayıtlı verilerin çıkmasını engeller. Siz bir metin kutusuna bir şeyler yazmaya başladığınızda daha önceden benzer bir şeyler yazılmışsa otomatik olarak tarayıcı bunları çıkarır, bu durumu engellemek için değeri "off" yapılmalıdır.

Autofocus   Html5 ile gelen bir özellik, sayfa yüklendiğinde otomatik olarak odaklanılmasını istediğiniz input elemanına yazabilirsiniz.

Placeholder  Html5 ile gelen bir özellik, başlangıçta metin kutusu içerisinde görünmesini istediğiniz metni yazabilirsiniz. Tıklanıp yeni bir metin yazılmaya başlandığında kaybolacaktır.

Required   Bir input alanının boş bırakılmasını istemiyorsanız zorunlu hale getirmek için kullanılır.

Pattern   Html5 ile gelen bir özellik, regexp yazım formatı ile kullanıcıyı istediğiniz formata uygun veri girişine zorlamanız mümkün.

Novalidate   HTML5 ile gelen validation özelliklerini iptal etmek için kullanılır

type parametresi ile belirtilebilecek eleman türleri:
text
Formumuza tek satırlık yazı yazılabilecek alan eklemek için kullanılır.
label
Verilerimize etiket tanımlamak için kullanılır. For parametresi ile tanımlanan etiketin hangi nesneye ait olduğu belirtile bilinir

      <label for="ad"> ADINIZI GİRİN
      <input type="text" name="ad" value="Adınız">
       </label>

password
Formumuza parola yazılabilecek alan eklemek için kullanılır. "text" elemanından farklı olarak bu alana girilen her karakter * ile gösterilir.

Kullanıcı: <input type="text" name="username"><br>
Parola: <input type="password" name="password">

checkbox
Formumuza onay kutuları eklemek için kullanılır.

<input type="checkbox" name="kutu1" checked="on"> HTML<br>
<input type="checkbox" name="kutu2"> PHP<br>
<input type="checkbox" name="kutu3"> MySQL


radio
Seçim butonları koyar. Kullanıcıya birden çok seçenek arasından birinin seçilmesi istenirse bunları kullanırız

<form> Cinsiyetinizi Seçiniz
<input type="radio" name="cinsiyet" value="Bayan">
Bayan <br> <input type="radio" name="cinsiyet" value="Bay">
Bay
</form>


submit, reset, button, 
Formumuzda belirtilen bilgileri ilgili dosyaya yollamak için kullanılacak düğmeler yerleştirmek için kullanılır. Submit formu kabul eder ve yollar, reset ise girilen bilgileri sıfırlar. Button ve image herhangi bir amaçla kullanmak içindir. Diğer ikisi gibi ön tanımlı bir davranışı olmayan, gerçekleştireceği eylem bir betikle tanımlanabilen düğmelerdir. 

file
Formumuza dosya ismi giriş alanı eklemek için kullanılır.

<input type="file">


<button> </button>
Düğmelerin input etiketiyle kullanımına benzer şekilde kullanılır. Ancak sonlandırıcı etiket içerdiğinden yorum alanında başka etiketlerin yer alabilmesi nedeniyle daha geniş bir kullanım alanı vardır. Image ile oluşturulan düğme src parametresinde belirtilen dosyadaki düğme resmi kullanılarak oluşturulur.





bir sonraki derste görüşmek üzere esen kalın... ebi 

yararlanılan kaynaklar:
Öğr. Gör. M. Mutlu YAPICI[WEB Adresi]

Hiç yorum yok:

Yorum Gönder

yukarı git