Önemli uyarı
Bu site yapım aşamasındadır ve henüz bitmemiştir.
Daha fazla yardım siteler eklenecek ve mevcut olanlar tamamlanacak, tüm dili kapsayan daha fazla ders eklenecek ve değiştirilecektir.
Sitede veya bir derste fikirlerini belirtmek gibi farklı şekillerde bana yardımcı olabilirsin ve bu beni çok mutlu edecektir.
Sitede reklam göstermediğimi bilerek, daha iyi bir site oluşturmak yardımcı olması için reklam engelleyiciyi kapatabilirsin.
reklam engelleyiciyi kapatmak, sitenin istatistiklerini yükseltmeme yardımcı oluyor.
anlayışınız için teşekkür ederim.
adblock photo
Ara
  • Temel Bilgileri
  • HTML Dile Genel Bakış
  • HTML Editörler
  • HTML Temelleri
  • Paragraf Koordinasyon
  • HTML Paragrafları
  • HTML Başlıklar
  • HTML Metin Biçimlendirme
  • HTML Metin Düzenleme
  • HTML Alıntılar
  • HTML Kod biçimlendirme
  • HTML Bağlantılar
  • Listeler ve Tablolar
  • HTML Tablolar
  • HTML Sıralamalı listeler
  • HTML Sırasız Listeler
  • HTML Açıklama listeleri
  • Medya ve Dahili Sayfalar
  • HTML Dosya Yolları
  • HTML Resimler
  • HTML Videolar
  • HTML Sesleri
  • HTML Iframe
  • Form oluşturma
  • HTML Formlar
  • HTML Form Öğeleri Adresleme
  • HTML Form Giriş Alanları
  • HTML Formda Normal Düğmeler
  • Diğer dersler
  • Database - Veritabanları
  • HTML5 Nedir?
  • ens

K-kudo

HTML öğren

Menü

  • Ana Sayfa
  • Kod Editor
  • Kod Dönüştürücü
  • Color Picker
  • Yardım
  • Araştırma

HTML Form Giriş Alanları

önceki ders sonraki ders
Sayfa içeriği
  • ›Metin kutusu eklemek
  • ›Çok satırlı bir metin kutusu eklemek

Metin kutusu eklemek

Sayfaya bir metin kutusu eklemek için <input> etiketini kullanabilirsin, bu etiketin daha sonraki derslerde öğreneceğimiz birçok başka şey eklemek için kullanılabileceğini unutmayalım.

<input> etikete aşağıdaki özellikleri ekleyebilirsin:

  • id: <label> etiketi ile ilişkilendirmek istiyorsak buna ekliyoruz.
  • name: Gönder butonuna tıklandığında içine yerleştirilen değerin gönderilmesi için ekliyoruz.
  • type: Etiketin sayfada bulunduğu konumun görüntüleneceği türü veya biçimi belirtir.
  • value: Ana başlangıç değeri vermek için.
  • readonly: değerini değişmez kılmak için.
  • disabled: Soluk görünmesini sağlamak ve değerini kopyalanamaz veya değiştirilemez hale getirmek için.
  • size: Kutuda kaç karakter görünmesini istediğinizi belirtir (sanki içine girilebilecek karakter sayısıyla orantılı olarak kutunun boyutunu belirtiyormuşsun gibi).
  • maxlength: Girilebilecek maksimum karakter sayısını belirtir.
  • placeholder: Boşsa görünen metin kutusunun içinde bir ipucu gösterir.
  • required: Boş bırakılırsa ve gönder düğmesini tıkladıysa, kullanıcıyı metin kutusuna bir değer girmeye zorlamak için buna ekleyebilirsin.

Metin kutusu türünü tanımlamak

type özelliği ile tanımladığımız metin kutusu tipi için aşağıdaki varyasyonlar çok önemlidir:

  • <input type="text"> Düz metin kutusu için bu, varsayılan türüdür.
  • <input type="password"> Bir parola girişi metin kutusu için.
  • <input type="number"> Sayıları girmek için özel bir metin kutusu için.
  • <input type="email"> Bir e-posta girmek için özel bir metin kutusu için.

Varsayılan olarak, <input> etiketinin biçimini belirtmezsen, bir düz metin kutusu <input type="text"> görüntülemek istediğin kabul edilecektir.

Aşağıdaki örnekte, türünü belirtmeden bir metin kutusu görüntülüyoruz.

  • <label for="username">Username</label><br>
  • <input id="username" name="username">
kod dene 

Aşağıdaki örnekte, bir e-posta girmek için bir metin kutusu ve bir şifre girmek için bir metin kutusu gösterdim.

Not: Kullanıcı e-postaya benzeyen bir metin girmezse, veri gönder düğmesine tıklarsa hata verecektir.
  • <label for="email">Email</label><br>
  • <input type="email" id="email" name="email"><br>><br>
  • <label for="password">Password</label><br>
  • <input type="password" id="password" name="password">
kod dene 

Aşağıdaki örnekte, bir sayı girmeye ayrılmış bir metin kutusu gösterdim.

Not: Burada kullanıcının yalnızca metin kutusu içine sayı girmesine izin verilir.
  • <label for="age">senin yaşın</label> <br>
  • <input type="number" id="age" name="age">
kod dene 

Aşağıdaki örnekte, metin kutusunda görünebilecek karakter sayısının 20 ve içine girilebilecek maksimum karakter sayısının 25 olduğunu belirttim.

  • <label for="username">Username</label><br>
  • <input type="text" id="username" name="username" size="20" maxlength="25">
kod dene 

Aşağıdaki örnekte, metin kutusuna bir ilk değer ekledim.

  • <label for="username">Username</label><br>
  • <input type="text" id="username" name="username" value="kaneki kudo">
kod dene 

Aşağıdaki örnekte, metin kutusunun değerini salt olarak yaptım, yani kullanıcı metini sadece okuyabilır ve metini değiştiremez.

  • <label for="username">Username</label><br>
  • <input type="text" id="username" name="username" value="kaneki kudo" readonly>
kod dene 

Aşağıdaki örnekte, metin kutusunu inaktif hale getirdim, bu da onun soluk bir renkte göründüğü ve kullanıcı değeri kopyalanamaz veya değiştirilemez anlamına geliyor.

  • <label for="username">Username</label><br>
  • <input type="text" id="username" name="username" value="kaneki kudo" disabled>
kod dene 

Aşağıdaki örnekte, metin kutularının boş olmaları durumunda ipuçlarını göstermesini sağladım.

  • <label for="email">Email</label><br>
  • <input type="email" id="email" name="email" placeholder="senin e-postan ekle"> <br><br>
  • <label for="password">Password</label><br>
  • <input type="password" id="password" name="password" placeholder="senin şifren ekle">
kod dene 

Aşağıdaki örnekte, metin kutuları boş bırakılırsa kullanıcıyı doldurmaya ve gönder düğmesine tıklamaya zorladım.

  • <label for="email">Email</label><br>
  • <input type="email" id="email" name="email" required> <br><br>
  • <label for="password">Password</label> <br>
  • <input type="password" id="password" name="password" required>
kod dene 

Çok satırlı bir metin kutusu eklemek

Birden fazla satır içeren bir metin kutusunu görüntülemek için <textarea>metin</textarea> gibi <textarea> etiketini kullanıyoruz.
Metin kelimesi yerine, içinde görüntülemek istediğimiz tüm metni ekliyoruz.

Kullanıcıdan adresini veya profilini girmesini istediğimizde genellikle çok satırlı bir metin kutusu kullanıyoruz.

Bu etikete aşağıdaki özellikleri ekleyebilirsin:

  • id <label> etiketi ile ilişkilendirmek istiyorsak buna ekliyoruz.
  • name Gönder butonuna tıklandığında içine yerleştirilen değerin gönderilmesi için ekliyoruz.
  • readonly Değerini değişmez kılmak istiyorsak readonly ekliyoruz.
  • disabled Soluk bir renkte görünmesini istersek ve değeri kopyalanamaz veya değiştirilemez diye disabled ekliyoruz.
  • cols Aynı satırda görünebilecek maksimum karakter sayısını belirtmek istiyorsak, yani genişliğini her satıra girilebilecek maksimum karakter sayısıyla orantılı olarak belirtiyorsun gibi ekliyoruz.
  • rows Her seferinde içinde kaç satır çıkabileceğini belirtmek istersek, yani uzunluğunu onun için belirttiğin satır sayısıyla orantılı olarak belirtmişsin gibi ekliyoruz.

Aşağıdaki örnekte, içinde ilk değeri olan birden fazla satırdan oluşan bir metin kutusu ekledim.

  • <label for="biography">Biography</label> <br>
  • <textarea name="biography" id="biography">k−html.com 2021'de yayınlandı.</textarea>
kod dene 

Aşağıdaki örnekte, her satırda görünebilecek maksimum karakter sayısını ve içinde görünecek varsayılan satır sayısını belirten, birden fazla satırdan oluşan bir metin kutusu ekledim.

  • <label for="biography">Biography</label> <br>
  • <textarea name="biography" id="biography" cols="40" rows="4">k−html.com 2021'de yayınlandı.</textarea>
kod dene 

Aşağıdaki örnekte, boyutunu belirten ve değerini sadece okunabilir hale getiren, birden fazla satırdan oluşan bir metin kutusu ekledim.

  • <label for="biography">Biography</label><br>
  • <textarea name="biography" id="biography" cols="40" rows="4" readonly>Form genellikle, kullanıcının sayfaya veri girmesini sağlamak amacıyla sayfaya yerleştirilen bir dizi öğedir.Formlarla ilgilendiğimiz yaygın örnekler, giriş sayfaları, yeni hesap oluşturma sayfaları, yorum ekleme, gönderi ekleme vb.</textarea>
kod dene 
  • <label for="biography">Biography</label><br>
  • <textarea name="biography" id="biography" cols="40" rows="4" disabled>Form genellikle, kullanıcının sayfaya veri girmesini sağlamak amacıyla sayfaya yerleştirilen bir dizi öğedir.Formlarla ilgilendiğimiz yaygın örnekler, giriş sayfaları, yeni hesap oluşturma sayfaları, yorum ekleme, gönderi ekleme vb.</textarea>
kod dene 
önceki ders sonraki ders

Kullanım Koşulları ve Gizlilik Politikası © 2021-2022 HTML öğren.