Sayfa içeriği
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">
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">
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">
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">
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">
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>
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>
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">
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>
Ç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>
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>
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>