DERS-8) Form Bilgi ve Giriş Elementleri

yorumsuz
184 kez okundu

Kullanıcının sayfaya bilgi girebileceği elementler ekleyebiliriz. Bunun için input ve textarea elementlerini kullanabiliriz.

İNPUT ELEMENTİ: Kullanıcının giriş yapabilmesi için kullanacağımız kodlar “input text”, “input password” gibi input öneki alarak tanımlanan,” text”, “password”,” number”,” tel”, “email”, “url”, “date”, “time” ve “submit” gibi farklı tanımlama isimleri ile tanımlanmış kodlardır.

“input text” ELEMENTİ: Kullanıcı bu alana istediği bir bilgiyi adı-soyadı gibi bir bilgiyi girebilir. Kullanımı aşağıdaki gibidir.

text- kod

Bu kodun ekran görüntüsü aşağıdaki gibi olacaktır.

text-ekran

Gördüğünüz gibi kullanıcının adını girebileceği bir bilgi giriş formu oluşturduk. Bundan sonraki tüm örneklerdeki kodları HTML sayfasının <body>…</body> tag’ları arasına yazacağız.

“input password” ELEMENTİ: Kullanıcı bu alana şifresini girebilir. Böylece kullanıcının girdiği şifrenin gizli bir şekilde girilmesi sağlanır. Örnek kullanım:

password-kod

Bu kodun ekran görüntüsü aşağıdaki gibi olacaktır.

password-ekran

Gördüğünüz gibi kullanıcının şifresini güvenli bir şekilde girebileceği form oluşturuldu.

“input number” ELEMENTİ:  Kullanıcının bir alana sadece rakamsal bir veri girmesini istiyorsak,mesela yaşı gibi,bu input alanını kullanabiliriz.

number-kod

Bu kodu HTML sayfamızın <body>…</body> tag’larının arasına yazarsak;

number-ekran

gibi bir ekran görüntüsü alırız. Dikkat edecek olursanız rakam bilgisini girebileceğimiz yerin sağ tarafında rakamları otomatik arttırıp-azaltabileceğimiz eklentinin otomatik olarak geldiğini görebilirsiniz.

“input tel” ELEMENTİ: Kullanıcının sadece telefon numarası formatına uyan bir bilgi girmesini istiyorsak bu input alanını kullanırız.
tel2kod

Bu kodun ekran görüntüsü;

tel2ekran

 

şeklinde olacaktır. Görüldüğü gibi ikisi de aynı görevi görmektedir.

“input email” ve “input url” ELEMENTİ:  Kullanıcının bir websitesi adresi formatında bir veri girmesini istiyorsak bu 2 input alanını kullanırız.

emailkod

Bu kodun ekran görüntüsü;

emailekran

şeklinde olacaktır.

“input date” ve “input time” ELEMENTİ: Kullanıcının sadece “tarih” veya “saat” cinsinden bir veri girmesini  istiyorsak bu 2 input alanını kullanabiliriz. Bu 2 elementin kullanımı aşağıdaki gibidir.

datekod

Bu kodların ekran görüntüsü ise;

dateekran

şeklinde olacaktır. Görüldüğü gibi saat ve tarih için otomatik seçme eklentileri bulunmaktadır.

“input submit” ELEMENTİ:  Yazımsal anlamı gönder’dir. Bir buton oluşturmamızı sağlar.

SUBMİTKOD

Bu elementteki “value” özelliği butonun adını belirlememizde kullanılır. Bu kodun ekran görüntüsü aşağıdaki gibidir.

submitekran

TEXTAREA ELEMENTİ: Çok satırlı veri girişi için kullanılır. Mesela formda biden adres bilgimize ait verileri girmemizi istedikleri bir alan olabilir. Bu bilgiyi gireceğimizi yerin birden fazla satırlı olması beklenmektedir.

textareakod

Bu kodun ekran görüntüsü;

textarea ekran

şeklinde olacaktır.

NOT-1) “AOTUFOCUS” KOMUTU: Adınız: <br><input type=”text”> kodu ile kullanıcının adını girebileceği bir alan oluşturduk. Kullanıcının bu alana adını girebilmesi için <input type=”text”> komutuyla açılan bölmeye gelip tıkladıktan sonra adını girebilecektir. Biz sayfa ilk açıldığında kullanıcı adını direk
girebilsin isteseydik yani imlecin bizim etkimiz ile değilde sayfa açılır açılmaz kendiliğinden <input type=”text”> komutuyla açılan bölmeye gelmesini isteseydik Adınız : <br><input type=”text” autofocus=”true”> komutunu yazmamız yani Adınız: <br><input type=”text”><br> koduna komutunu eklememiz yeterli olacaktı.

NOT-2) “PLACEHOLDER” KOMUTU: Kullanıcıya gireceği alanla ilgili bilgi vermek isteyebiliriz. Örneğin yaşınız alanına “18-65 yaş aralığında giriniz” mesajını göstermek istiyoruz. Bunun için
Yaşınız: <br><input type=”number” placeholder=”18-65 yaş aralığında giriniz.”> kodundaki gibi “placeholder” komutunu kullanabilir.

NOT-3) “VALUE” KOMUTU: Örneğin soyadını kutuçuğunun sayfa açıldığında boş değilde içinde herhangi bir yazının bulunduğu haliyle açılmasını istiyorsak, mesela KENT yazsın istiyorsak
Soyadınız : <br><input type=”text” value=”KENT”> komutunu kullanabiliriz.Ama KENT soyismi orada kalıcı değil istersek değiştirebiliriz.

Yukarıda anlatılan 3 adet not’a ait örneklerinde içinde bulunduğu basit bir “Form Doldurma Sitesi” nin HTML kodlarını aşağıdaki linkten indirebilirsiniz.

Bir sonraki dersimizde “Aşağı Açılır Kutu Seçim Elementleri” konusuna değineceğiz. Bir sonraki dersimide görüşmek üzere,

İyi günler…:)

Form Doldurma Sitesi

 


Sosyal Medyada Paylaş Facebook Twitter Google+
Etiketler: , , , , , , ,
Eklenme Tarihi: 14 Ekim 2015

Facebook Yorumları

Konu hakkında yorumunuzu yazın


Time limit is exhausted. Please reload the CAPTCHA.