Tarih :15 Aralık 2019

HTML Input Type

HTML #3

Html dersimizin 3. Bölümüne hoş geldiniz. Bu bölümde sizlere form öğelerini ve nelere yapabileceğimizden bahsedeceğim.Önce form öğelerimizi tanıyalım

 


 
 
 



 











Yukarıdaki input type’ların çalışır halini aşağıda bulabilirsiniz.


Buton oluşturmamıza yarar.

Kutucuk oluşturmamıza yarar.

Renk kutucuğu oluşturmamıza yarar.

Tarih bölümü oluşturmamıza yarar.

Yerel saat-zaman oluşturmamıza yarar.

Email maskeli kutucuk oluşturmamıza yarar.


Ayları listelemeye yarar

Şifre maskelemeye yarar

Yuvarlak seçim yapmamıza yarar

Aralık belirtmek için kullanırız.

Form sıfırlamamıza yarar

Arama barı oluşturur.

Form yollamak için buton oluşturur.

Telefon numarası maskelemeye yarar.

Metin girmemize yarar.

Saat seçmemize yarar.

Url girmemize yarar.



En Fazla kullanacağımız form öğelerimiz text,password, button, radio, checkbox ‘dır. Her birini tanıyalım.

Form öğelerimizi tanıtmak için kullanmamız gereken etiket yukarıda görüldüğü gibi <input> etiketidir.

Text öğemizin görünümü bu şekildedir. Ve yapacağımız sitede kullanıcının veri girişi yapmasını sağlar, formlar da aslında veri toplamak amacı ile kullanılmaktadır.

Kullanıcı Adı :

Textimizin içerisinin örnek bir yazı ile dolu olmasını istiyorsak placeholder=”id-giriniz” parametresini kullanmalıyız

Kullanıcı Adı :

Password öğesi ise düşündüğünüz gibi kullanıcının şifre girmesine yarayan öğedir. Ve içerisine girilen öğeleri görünmez yapar. Örneğin ;

Şifre :

Radio öğesinin kullanımı ise kullanıcının kendisine özel seçim yapmasına olanak sağlar örnek verecek olursak;

BMW MERCEDES

Button öğesi ise doldurmuş olduğumuz form’un onaylanması gibi işlemlerin yapılmasında son ve  aktif olan ögedir.

“Aktiften kastım ise tıklandığı zaman bir işlem yapmaya yarayan”



Butonun aldığı parametrelerden birisi value=”Gönder” dir. Value parametresi butonun üzerinde yazan yazıyı belirlemek için kullanılmaktadır.

Örnek bir kullanıcı giriş formu ;


Kullanıcı Adı:
Şifre :

Çıktısı ise ;

Kullanıcı Adı:

Şifre :



Önemli Bilgiler

<br>: Bir alt satıra geçmemize yarayan etiket.

<strong> : Kalın bir şekilde yazı yazma etiketi.

<i>  : İtalik bir şekilde yazı yazma etiketi.

<center>  : Yarattığımız öğeleri sayfaya göre ortalama etiketi.

<style>     :  Yarattığımız öğelerin stillerini ayarlamamıza yardımcı olan etiket.

3.Dersimizin sonuna gelmiş bulunmaktayız. Yorumlarınızı ve sorularınızı beklemekteyim.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir