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
  • HTML Onay Kutuları
  • HTML Radyo Düğmeleri
  • HTML Açılır Listeler
  • HTML Seçim Aralıkları
  • HTML Formun Ortak Öğelerini Toplamak
  • Sayfanın dilini belirtmek
  • HTML Dil Kodları
  • HTML Ülke Kodları
  • HTML Farklı Dillerde Sayfalar
  • Diğer dersler
  • Database - Veritabanları
  • HTML5 Nedir?
  • ens

K-kudo

HTML öğren

HTML araçları

  • 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, tarayıcı bir düz metin kutusu <input type="text"> görüntülemek istediğin anlayacaktır.

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, veriyi göndermek 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 ana 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 olarak yaptım, 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 

önceki ders sonraki ders

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