HTML/HTML5 Dersleri

1. HTML TEXTAREA 
HTML TEXTAREA etiketi ile 10 satır ve 30 sütunluk metin giriş kutusu oluşturulmasını göstermektedir.
Örnek:
<br />
Kodlar:

<textarea rows="10" cols="30">
</textarea>

2. HTML BUTTON
HTML <BUTTON> etiketi, INPUT type=button etiketi ile oluşturulan düğmeden biraz daha gelişmiş bir düğme (button) kontrolü oluşturulmasını sağlar. En önemli farkı BUTTON etiketi içinde bazı HTML etiketlerinin kullanılabilmesidir. Dolayısıyla IMG etiketi kullanılarak buton üzerinde göstermek için bir resim eklenebilir.
HTML BUTTON etiketi kullanılarak içinde iki satırlık uyarı gösterilen bir düğme (button) oluşturulmasını göstermektedir.
Örnek:

Kodlar:

<button type="button">Formu göndermek için<br />buraya tıklayınız.</button>

*Kırmızı ile gösterilen yere içerik eliceksiniz

3. HTML <INPUT type=file>
HTML <INPUT type=file> etiketi, bir metin kutusu (textbox) ve gözat (browse) butonu ile sunucuya dosya gönderme/yükleme (upload) kontrolü oluşturulmasını sağlar. 
Dosyanın gönderilmesi için FORM etiketinin method özelliğinin post, enctype özelliğinin multipart/form-data olarak belirtilmiş olması gerekir.

Örnek:

Kodlar:

<input type="file" id="dosyaGonder" />

*File yazılan yere dosya linki ekleyin.

4. HTML <INPUT type=password>
Girilen karakterlerin maskelenerek gösterilmediği tek satırlık bir metin giriş kontrolü (password textbox) oluşturulmasını sağlar.
HTML INPUT type=password etiketi ile şifre giriş kontrolü oluşturularak bir JavaScriptfonksiyonu ile şifrenin kontrol edilmesini göstermektedir.
Örnek:
Lütfen şifreyi giriniz :


Kodlar:

<script type="text/javascript">
function sifreKontrol() {
    if( document.getElementById("girisSifre").value == 'sifre' )
        alert("Kod kabul edildi.");
    else
        alert("Girdiğiniz şifre hatalı. Lütfen tekrar deneyiniz.");
}
</script>

Lütfen şifreyi giriniz : 
<input type="password" id="girisSifre" />

<br />
<button onclick="sifreKontrol()">Şifre Kontrol</button>

5. HTML <SELECT>
Etiketi, biri liste kutusu (listbox) diğeri aşağı açılır liste (drop-down list) tipinde olmak üzere iki farklı tipte seçim kutusu (select box) oluşturulmasını sağlar. Bu iki tip arasındaki tek fark size özelliği ile belirtilen seçim kutusu içinde gösterilecek seçenek miktarıdır. Liste elemanları optgroup ve option etiketleri ile tanımlanır.
1.Örnek:
*HTML SELECT etiketi kullanılarak aşağı açılır liste (drop-down list) oluşturulmasını göstermektedir.
Seçim-1 Seçim-2 Seçim-3
Kodlar:

<select>
    <option>Seçim-1</option>
    <option>Seçim-2</option>
    <option>Seçim-3</option>
</select>

Kırmızı ile yazılı yere siz istediğinizi yazabilirsiniz.

2.Örnek

Aşağıdaki örnek, HTML SELECT etiketi ile CTRL tuşu kullanılarak birden fazla seçim yapılabilen liste kutusu(listbox) oluşturulmasını göstermektedir.
Seçim-1 Seçim-2 Seçim-3 Seçim-4 Seçim-5
Kodlar:

<select size="4" multiple="multiple">
    <option>Seçim-1</option>
    <option>Seçim-2</option>
    <option>Seçim-3</option>
    <option>Seçim-4</option>
    <option>Seçim-5</option>
</select>

Kırmızı ile yazılı yeri isteğinize göre değiştirin,
Mavi yazılı rakamı ise buton sayısı nekadar çoğaltacaksanız o rakamı yazın örneğin 10 yapacaksanız 4 yazan yere 10 yazın.

6. HTML <OPTGROUP>
etiketi, SELECT etiketi ile oluşturulan seçim kutusu (select box) içinde OPTION etiketleri ile 
Aşağıda oluşturulan seçeneklerin mantıksal olarak gruplandırılmasını sağlar.
oluşturulan birkaç eğitim kurumu seçeneğinin OPTGROUP ile sınıflandırılmasını göstermektedir.Bu illa eğitim kurumu olmak zorunda değildiz siz bunu sitenizin içeriğine görede değiştirebilirsiniz.
Örnek:
ODTÜ Bilkent Boğaziçi Çınarlı EML Atatürk EML
Kodlar:

<select>
    <optgroup label="Üniversiteler">
        <option>ODTÜ</option>
        <option>Bilkent</option>
        <option>Boğaziçi</option>
    </optgroup>
    <optgroup label="Liseler">
        <option>Çınarlı EML</option>
        <option>Atatürk EML</option>
    </optgroup>
</select>

7. HTML <INPUT type=hidden>
Etiketi, sayfada gösterilmeyecek gizli bir değer tanımlamak için kullanılan bir form kontrolü oluşturulmasını sağlar.
Örnek:





Kodlar:

<script type="text/javascript">
function gizliDegerGoster() {
    var deger = document.getElementById('gizliDeger').value;
    alert(deger);
}
</script>

<input type="hidden" id="gizliDeger" value="Bilgi Cafem61"/>

<button type="button" onclick="gizliDegerGoster()">Gizli Değeri Göster</button>

8. HTML <INPUT type=checkbox>
Etiketi, seçim kutusu (check box) form kontrolü oluşturulmasını sağlar.
label etiketi ile "Seçim Kutusu" ismiyle etiketlendirilmesini göstermektedir.
Örnek:

Bilgi Cafem61
Kodlar:

<input type="checkbox" id="chkSecim" checked="checked" />
<label for="chkSecim">Seçim Kutusu</label>

Seçim kutusu yazan yeri değiştirebilirsiniz...

9. HTML <FIELDSET>

HTML FIELDSET etiketi kullanılarak kişisel ve iletişim giriş kontrollerinin ayrılmasını göstermektedir.

Örnek:

Kişisel Bilgiler

Ad Soyad :
Doğum Tarihi :

İletişim Bilgileri

Telefonu :
Adresi :

Kodlar:

<fieldset>
<legend>Kişisel Bilgiler</legend>
<table>
    <tr><td>Ad Soyad : </td><td><input type="text" /></td></tr>
    <tr><td>Doğum Tarihi : </td><td><input type="text" /></td></tr>
</table>
</fieldset>

<br />

<fieldset>
<legend>İletişim Bilgileri</legend>
<table>
    <tr><td>Telefonu : </td><td><input type="text" /></td></tr>
    <tr><td>Adresi : </td><td><textarea></textarea></td></tr>
</table>
</fieldset>

10. HTML <INPUT type=submit>
Etiketi kullanılarak hazırlanan basit bir form içinde HTML <INPUT type=submit>etiketi ile Gönder düğmesi oluşturulmasını göstermektedir. Kullanıcı verilerini girdikten sonra Kaydet butonuna bastığında form verileri, method ile belirtilen yöntemle action ile belirtilen adrese gönderilir.
Örnek:

Kişisel Bilgiler

Ad Soyad :
Doğum Tarihi :

Kodlar:

<html>
<head>
    <title>Form Örneği</title>
</head>
<body>
<form action="http://www.mynotlar.com/kullaniciekle.aspx" method="post">

<fieldset>
<legend>Kişisel Bilgiler</legend>
<table>
    <tr><td>Ad Soyad : </td><td><input type="text" /></td></tr>
    <tr><td>Doğum Tarihi : </td><td><input type="text" /></td></tr>
</table>
<input type="submit" />
</fieldset>

</form>
</body>
</html>

Kullaniciekle ekle yazan yere siz formun cevabı gelecek olduğu adresi veya mailinizi yazacaksınız...


Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakabilirsiniz.