Nvu 1.0 NVU, web sayfaları oluşturmanızı ve düzenlemenizi sağlayan bir web editörüdür. WYSIWYG tarzında bir web editörü olduğundan NV...
Site Tasarımı Ve Yönetimi Aracı Nvu Programı
Kişisel Hacker İndex'si Hazırlama
HACKER İNDEX'Sİ NASIL HAZIRLANIR; Öncelikle Merhaba Arkadaşlar... Şimdi kısaca size kendizini anlatan kişiliğinizi göstermek amaçlı...
HTML5 İle Video Yapımı
HTML5 İLE VİDEO PLAYER YAPIMI Siteniz için veya blogger blogunuzda kendi videolarınızı yayınlamak için HTML5 kodları ile video player yapa...
HTML/HTML5 Dersleri
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>
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-dataolarak belirtilmiş olması gerekir.
Örnek:
Kodlar:
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:
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.
Kodlar:
<input type="file" id="dosyaGonder" />
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.
Kodlar:
<select>
<option>Seçim-1</option>
<option>Seçim-2</option>
<option>Seçim-3</option>
</select>
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.
Kodlar:
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:
Kodlar:
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:
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:
Kodlar:
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.
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>
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:
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:
Kodlar:
<input type="checkbox" id="chkSecim" checked="checked" />
<label for="chkSecim">Seçim Kutusu</label>
9. HTML <FIELDSET>
HTML FIELDSET etiketi kullanılarak kişisel ve iletişim giriş kontrollerinin ayrılmasını göstermektedir.
Örnek:
Kodlar:
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:
Form Örneği
<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:
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>
Bizi Takip Edin
Pinterest Facebook Twitter
© by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakabilirsiniz.
1. HTML TEXTAREA HTML TEXTAREA etiketi ile 10 satır ve 30 sütunluk metin giriş kutusu oluşturulmasını göstermektedir. Örnek: Kodlar:...