HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
html form input list
html form input options
html form values
html value options
html value option select
html select readonly option
html options readonly
readonly option in html
html readonly select option
html disabled options
html disabled option in select
html option disabled
html disable option
html select disabled options
html disabled option select
html size options
html option size
html font size option
html select size option
html option maxlength
html select option maxlength
html select option max length
html select option value max length
html option value max length
html form input align

HTML Form Giriş Özellikleri (Form Input Properties)

HTML Form Giriş Özellikleri (Form Input Properties)
Html
<input type="text" name="renk" value="Renk:"><br><br>


<input type="text" name="id" value="3" readonly><br><br>


<input type="text" name="id" value="3" size="7" disabled><br><br>


<input type="text" name="isimsoyisim" value="Enes Mehmet Kılıç" size="20"><br><br>


<input type="text" name="telno" value="5365555555" maxlength="10">

Form elemanlarını bir önceki ders ayrıntılı olarak işlemiştik. Bu dersimizde ise <input> etiketinin bazı özelliklerinden bahsedeceğiz. Bu özellikler sayesinde ziyaretçileri bazı yönlerden kısıtlayabiliriz...

1-Value Özelliği

Bu parametre ile sanki ziyaretçiymişsiniz gibi ilgili etikete değer verebilirsiniz. 

Kullanımı:

<input type="text" name="renk" value="Renk:">

Diyelim veritabanına kullanıcının sevdiği renkleri kaydetmek istiyorsunuz. Kaydederken Başında hep "Renk:" şeklinde yazı olsun istiyorsunuz. Ziyaretçi bunu bilemez tabi yada renk kutusunun yanında belirtirsiniz berki ama ziyaretçi bunu yapmaya üşenir gulucuk. Bunu siz varsayılan değer olarak girerseniz kullanıcı bunun devamına yazacaktır. Sonuç olarak "Renk:Mavi" gibi bir değer almış olacaksınız.

2-Readonly Özelliği

Biraz ingilizceniz varsa az çok ne olduğunu tahmin etmişsinizdir. Programlamada ingilizceniz iyiyse kolay kolay kod yapılarını unutmazsınız. Readonly, sadece okunabilir demek; yani ziyaretçinin veri girmesine izin vermezsiniz.

Ee O zaman niye koyduk bu etiketi ziyaretçi veri girmeyecek ise ?

Güzel Soru. Böyle önemli konuları akılda kalması açısından soru-cevap şeklinde gidiyorum bazen. Bir örnek ile açıklayayım bunu, şimdi sitenizde içerik oluşturmak istediğiniz zaman mecburen veritabanı kullanacaksınız çünkü bu verilerin bir yerde saklanması gerekiyor. İçeriğinizi oluşturdunuz, başlığımızı attınız, resminizi eklediniz, makalenizi de yazdınız, kaydet butonuna bastınız ve kaydedildi. Aa oda ne ? Bir kelimeyi yanlış yazmışsınız. Bunu düzeltmek için güncelle sayfası oluşturdunuz. Güncelle sayfasında veritabanınızın kendisinin atadığı bir anahtar numara bulunur. Bu numarayla verilerinize ulaşabilirsiniz. Bu numara güncelleme sayfasında bir kutu içinde gösterilmek zorunda çünkü siz güncelle butonuna bastığınızda, güncelleme işlemi bu numaraya göre olacak yani bu numara mutlaka formla birlikte gelmesi lazım. Buraya kadar umarım anlatabilmişimdir. Biraz konu dışına çıktık ama ileri doğru bu işlerle uğraşırsanız rahat bir şekilde anlamanız için yazdım.Ne demiştik? Bu anahtar numara formda yazıyor fakat bu numara yanlışlıkla değişebilir. Olur da yanlışlıkla klavyeden değiştirilmesin diye sadece okunur bir kutu olmalı yani forumda tutulmalı fakat kimse değiştirmemeli. Çok şart bir şey değil tabi ama bu şekilde kullanmanızı tavsiye ederim. Kod editöründe daha iyi anlayacaksınız.

Kullanımı:

<input type="text" name="id" value="3" readonly>

3-Disabled Özelliği

Bu özellik öncekine çok benzer o yüzden fazla üzerinde durmayacağım. Öncekiyle aynı şekilde formu kullanan kişinin veri girmesine engel oluyor fakat bu sefer biraz daha farklı bir görselliği var bunu iki kodu yazıp çalıştırarak anlayabilirsiniz.

Kullanımı:

<input type="text" name="id" value="73" disabled>

4-Size Özelliği

Kutunuzun ne kadar geniş olacağını ayarlamanızı sağlar. Sayı değeri alır.Örneğin id yazan kutuyu küçük yapıp diğer kutuları biraz daha büyük yapabilirsiniz. Tabi çok orantısız da olmasın gulucuk.

Kullanımı:

<input type="text" name="isimsoyisim" value="Enes Mehmet Kılıç" size="20">

5-Maxlength Özelliği

Kutunuza en fazla kaç karakter girilebileceğini belirtmenizi sağlar. Bunun en iyi örneği bence telefon numarası çünkü telefon numaraları 10 haneden oluşur. Ziyaretçi bu sebeple fazla sayı girmemiş olur.

Kullanımı:

<input type="text" name="telno" value="5365555555" maxlength="10">

Son olarak..

Size en temel giriş özelliklerinden bahsettim. Html 5 ile beraber birçok yeni özellik geldi onlar biraz daha başlangıç seviyesine göre zor o yüzden biraz alıştıktan sonra Html 5 başlıklı derslerde bu konuyu inceleyebilirsiniz.



Paylaş:

Enes KILIÇ
Webmaster