Yorum Kutusu ve Açılır Liste

<textarea>

<textarea> elemanı ile birden fazla satırda yazı yazılabilen bir metin kutusu oluşturulur. rows ve cols nitelikleri ile metin kutusunun yükseklik ve genişliği belirtilir. rows niteliğinin karşısına girilen sayı satır, cols niteliğinin karşısına girilen sayı karakter sayısını belirtir. maxlength niteliği ile de metin kutusuna girilebilecek maksimum karakter sayısı belirtilebilir.

<textarea> elemanı açılış ve kapanış etiketleri ile kullanılır ve etiketlerin arasına yazılanlar sayfa yüklendiğinde kutunun içerisinde görünür. <form> elemanı içerisine yazıldığında bu eleman da <input> elamanı gibi forma bağlanır.

name niteliği ile metin kutusuna isim verilir ve sunucuya bu alan vasıtasıyla veri gönderildiğinde sunucu tarafından bu isim kullanılır.

autofocus niteliği sayfa yüklendiğinde kullanıldığı <textarea> elemanına odaklanılmasını sağlar. disabled niteliği ile metin kutusuna veri girilmesi engellenebilir. required niteliği belirtilen girdinin doldurulmasının zorunlu olduğunu belirtir. readonly niteliği ile de baştan girilen değerin değiştirilmemesi sağlanabilir. Bu dört niteliğin hepsi de bir değere eşitlenmeden kullanılır. required niteliği yazının yazıldığı an itibarı ile Safari tarafından desteklenmemektedir.

placeholder niteliği ile de metin kutusuna kullanıcı doldurmadan önce yazılı olacak, kullanıcıya gireceği değer hakkında bilgi verecek bir veri girilebilir.

Eğer bir metin kutusu içerisinde yer almadığı bir forma bağlanmak istenirse form niteliği kullanılır. Bunun için öncelikle <form> elemanı id global niteliği ile isimlendirilmelidir. Dışarıda oluşturulan <textarea> elemanı form niteliği ile nitelendirilir ve bu niteliğin karşısına değer olarak forma verilen isim girilirse <textarea> elemanı <form> elemanına bağlanmış olur. Bu nitelik yazının yazıldığı an itibarı ile Internet Explorer tarafından desteklenmemektedir.

wrap niteliğinin karşısına soft ya da hard değerlerinden biri girilebilir. soft girilmesi durumunda form gönderildiğinde metin kutusuna yazılanlardaki alt satıra geçişler yok sayılır. hard değerinin kullanılması durumunda ise yeni satıra geçişler de girilen verinin içinde yer alacaktır.


<select>, <option> ve <optgroup>

<select> elemanı açılır bir liste tanımlamaya yarar. Açılır listenin elemanları <select> etiketleri arasına yazılır. size niteliği ile açılır listenin kaç elemanının görünür olacağı belirtilir. Varsayılan değer birdir.

multiple niteliği birden fazla seçeneğin seçilebileceği belirtilir. disabled niteliği ile kullanıcının listeden seçim yapması engellenebilir. required niteliği ile listeden seçim yapılmasının zorunlu olduğunun belirtilebileceği HTML5 standartlarında yer almaktadır, fakat yazının yazıldığı an itibarı ile bu niteliği hiçbir bilinen tarayıcı desteklememektedir. Bu üç nitelik de karşısına değer yazılmadan kullanılır.

autofocus niteliği sayfa yüklendiğinde kullanıldığı <select> elemanına odaklanılmasını sağlar. Fakat yazının yazıldığı an itibarı ile bu nitelik Mozilla Firefox tarafından desteklenmemektedir.

name niteliği ile <select> elemanına bir isim verilebilir. Bu isim JavaScript kodları ve sunucular tarafından kullanılabilir. Özellikle sunucu tarafından kullanımı önemlidir, Listeden yapılan seçim gönderilirken bu seçimin hangi elemandan geldiğinin anlaşılması bu niteliğe girilen değerle sağlanır.

form niteliği ile bir <select> elemanının içinde bulunmadığı bir <form> elemanına bağlanması sağlanır. Bunun için öncelikle <form> elemanı id global niteliği ile isimlendirilmelidir. Dışarıda oluşturulan <select> elemanı form niteliği ile nitelendirilir ve bu niteliğin karşısına değer olarak forma verilen isim girilirse <select> elemanı <form> elemanına bağlanmış olur. form niteliği yazının yazıldığı an itibarı ile Internet Explorer tarafından desteklenmemektedir.

<option> elemanı ile <select> elemanının içine seçenekler eklenir. Her <option> elemanı için bir value niteliği tanımlanmalıdır. Bu nitelikle tanımlanan değer seçeneğin seçilmesi durumunda sunucuya gönderilecek olan değerdir. Listede görünecek isim ise etiketlerin arasına yazılır.

seleceted niteliği ile bir seçeneğin başta seçili olması sağlanır. disabled niteliği ile de belirtilen seçeneğin seçilebilmesi engellenir. Bu iki nitelik de karşısına değer girilmeden kullanılır.

label niteliğinin karşısına girilen değer etiketlerin arasına girilenlerin kısaltılmış bir şeklini ifade eder ve açılır listede bu kısaltılmış versiyon gösterilir. Bu nitelik yazının yazıldığı an itibarı ile Mozilla Firefox tarafından desteklenmemektedir.

<optgroup> elemanı ile de seçenekler gruplandırılabilir. label niteliği ile gruplara verilecek isimler de listede gösterilir. disabled niteliği ile de istenen grupların seçilebilmesi engellenir.

<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<form action="">
    <select size="5">
        <optgroup label="Marmara">
            <option value="istanbul" disabled>İstanbul</option>
            <option value="bursa">Bursa</option>
            <option value="kocaeli">Kocaeli</option>
        </optgroup>
        <optgroup label="Ege" disabled>
            <option value="izmir">İzmir</option>
            <option value="aydin">Aydın</option>
        </optgroup>
        <optgroup label="İç Anadolu">
            <option value="ankara">Ankara</option>
            <option value="eskisehir">Eskişehir</option>
        </optgroup>
    </select>
    <br>
    <br>
    <input type="submit">
</form>
</body>
</html>

<datalist>

<datalist> elemanı ile bir <input> elemanı için ön tanımlı seçenekler hazırlanabilir. Seçenekler yine <option> elemanı ile hazırlanır. <input> elemanı ile oluşturulmuş alana yazı yazılırken ön tanımlı listeden uygun seçenekler kullanıcıya gösterilecektir. <datalist> elemanını <input> elemanına bağlamak için ilişkilendirilecek <datalist> elemanı id global niteliği ile adlandırılmalı ve <input> elemanındaki list niteliğinin karşısına bu isim girilmelidir.

<!DOCTYPE html>
<html>
<head>
<title>Formlar</title>
</head>
<body>
<form action="">
    <input type="text" list="iller" name="iller>
    <br>
    <br>
    <input type="submit">
</form>
       <datalist id="iller">
            <option value="istanbul">İstanbul</option>
            <option value="bursa">Bursa</option>
            <option value="kocaeli">Kocaeli</option>
            <option value="izmir">İzmir</option>
            <option value="aydin">Aydın</option>
            <option value="ankara">Ankara</option>
            <option value="eskisehir">Eskişehir</option>
        </datalist>
</body>
</html>

<datalist> elemanı yazının yazıldığı an itibarı ile Safari tarafından desteklenmemektedir.