HTML-FORM ELEMANLARI_2

Buraya kadar gördüğümüz input nesnesine ait type parametresi ile oluşturduğumuz nesneler HTML 5 ten önce de var olan nesnelerdi. Şimdi HTML 5 ile beraber gelen diğer nesneleri göreceğiz. HTML 5 ile gelen İnput nesneleri :

İnput nesnemizin type özelliğini color yaparak renk seçme paleti oluşturabiliriz:

<form> Favori Renginizi Seçiniz: <input type="color" name="favcolor" value="#FF0000" > </form>

İnput nesnemizin type özelliğini date yaparak tarih seçme paleti oluşturabiliriz:

<form> Doğum Gününü Seç: <input type="date" name="dgunu" max="1979-12-31" min="2018-01-02" > </form>

İnput nesnemizin type özelliğini datetime-local yaparak tarih seçme paleti oluşturabiliriz:

<form> Doğum Gününü Seç: <input type="datetime-local" name="dgunu" max="1979-12-31" min="2018-01-02" > </form>

İnput nesnemizin type özelliğini month yaparak aylık tarih seçme paleti oluşturabiliriz:

<form> AY YIL Seç: <input type="month" name="ay"> </form>

İnput nesnemizin type özelliğini week yaparak haftalık tarih seçme paleti oluşturabiliriz:

<form> Haftayı Seçin: <input type="week" name="hafta"> </form>

İnput nesnemizin type özelliğini time yaparak haftalık tarih seçme paleti oluşturabiliriz:

<form> Saati Seçin: <input type="time" name="saati"> </form>

İnput nesnemizin type özelliğini e-mail yaparak tarih seçme paleti oluşturabiliriz:

<form> Mail Adresi: <input type="e-mail" name="posta"> </form>

İnput nesnemizin type özelliğini range yaparak numara seçme paleti oluşturabiliriz:

<form> Numara Seçin : <input type="number" name="points" min="0"

max="100" step="10" value="30">

</form>

İnput nesnemizin type özelliğini url yaparak web sayfası giriş alanı oluşturabiliriz:

<form> Web Sayfası Girin : <input type="url" name="websayfasi">

</form>

İnput nesnemizin type özelliğini number yaparak numara seçme paleti oluşturabiliriz:

<form oninput="x.value=parseInt(a.value)"> Numara Seçin : <input type="range" name="a" min="0"

max="100" value="30">

<output name="x" for="a b"></output>

</form>

İnput nesnemizin içerisinde kullandığımız list parametresi nesnenin üzerine tıklandığında liste çıkmasını sağlamaktadır:

<input list="browsers">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

 <option value="Chrome">

<option value="Opera">

 <option value="Safari">

</datalist>

HTML de çok satırlı bir yorum kutusunu textarea nesnesi ile oluşturmaktayız. Bu nesnenin rows özelliği ile satır sayısını cols özelliği ile sütun sayısını belirleriz.

<textarea rows="4" cols="50">

</textarea>

HTML de select nesnesi ile seçme kutusu oluşturabiliriz. Select nesnesinin multiple özelliği ile çoklu seçme sağlanır. Her bir seçeneği option özelliği ile belirleriz. Option özelliğinin disabled ve selected özellikleri vardır

<select>

<option value="volvo">Volvo</option>

 <option value="saab">Saab</option>

<option value="mercedes">Mercedes</option>

 <option value="audi">Audi</option>

</select>

HTML de select nesnesinin option group (optgroup) özelliği ile seçenekleri gruplar halinde listeleyebiliriz.

<select>

<optgroup label="Swedish Cars">

<option value="volvo">Volvo</option>

 <option value="saab">Saab</option>

</optgroup>

<optgroup label="German Cars">

<option value="mercedes">Mercedes</option>

 <option value="audi">Audi</option>

</optgroup>

</select>

HTML de fieldset nesneleri daha güzel bir tasarım oluşturmak için kullanılır. Belirli nesneleri gruplamaya yarar. Grup halinde gösterir. Legend nesnesi başlığını belirler.

<fieldset>

<legend>Kişisel Bilgiler:</legend>

Ad: <input type="text">

<br>

 Email: <input type="e-mail">

<br>

Doğum Tarihi: <input type="date">

 </fieldset>

  bir sonraki dersimizde görüşmek üzere esen kalın... ebi 

yararlanılan kaynaklar:

Öğr. Gör. M. Mutlu YAPICI[WEB Adresi]