HTML5, telefon numaraları ile ilişkili olarak kullanılan bir alan türü olan tel içerir.
Telefon numaranız: <input type="tel" name="telefon">
Cep telefonları ve tabletlerde, alanın üzerine tıklanınca telefon numarası girişi için numaraların ekranı açılır.
url ile İnternet adresi alanları
url tipindeki alanlar, İnternet adreslerinin girilmesi için tasarlanmıştır.
<input type="url" />
URL alanları otomatik olarak doğrulanır. Tarayıcılar, bu tür alanlarda gerçekten sözdizimine uygun bir URL girilip girilmediğini kontrol etmelidir.
output ile Çıkış Alanı
output alanıyla içerikler çıktı olarak verilebilir. Örneğin, JavaScript ile ilişkilendirilebilir. Bu alan burada değişkenlerin çıktısı için kullanılabilir. Ayrıca, hesaplanmış değerlerin çıktısı için de kullanılabilir. Alan yalnızca veri çıkışı için kullanılır. Kullanıcı girişleri mümkün değildir.
Bir örnek:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Merhaba,"
wort2="Dünya!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>Bu örnekte iki değişken tanımlanmıştır. Bu değişkenlerin içeriklerinin output alanında gösterilmesi amaçlanmıştır.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Opera gibi tarayıcılar istenilen değeri gösterir. Ancak output öğesini anlayamayan tarayıcılar hiçbir şey göstermez.output üç özelliğe sahiptir.
• form – output öğesinin içinde bulunduğu form.
• for – Çıktı alanının ilişkilendirildiği alanları veya değerleri belirler. Değerler ve alanlar birbirinden boşlukla ayrılmalıdır.
• name – Bir ad belirtilirse, form gönderildiğinde alanın içeriği iletilir.
• value – Alanın değerini belirtir.output, matematiksel hesaplamalar için de kullanılabilir. Örneğin, prompt alanları aracılığıyla değerler alabilir ve bunları birbiriyle çarpmak için kullanabilirsiniz.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Sayı 1.",0));
b=parseInt(prompt("Sayı 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Çarpma işleminin sonucu:</label>
<output name="result" />
</output>
</form>
</body>
</html>Sayfayı ziyaret ettiğinizde, bir Prompt penceresi açılır ve ilk değer istenir.
Girişi Tamam olarak onayladığınızda, ikinci bir pencere açılır. (Her iki pencereden birinde İptal düğmesine basarsanız, sonuç NaN olacaktır, yani Number değil).
İkinci pencereyi de Tamam olarak onaylarsanız, betiğin çarpma işleminin sonucunu output alanına değer olarak aktarır.
progress ile İlerleme Göstergeleri
progress öğesi ile ilerleme çubuğu oluşturulabilir. Örneğin, dosyaların indirilmesiyle ilgili olarak kullanışlı olabilir..gif "HTML ve CSS'ye giriş (Bölüm 16): Formlar (4)")
Google elementi zaten yorumlar. Elementi bilmeyen diğer tarayıcılar, içeriğini gösterir.
Bir örnek:
İndirme devam ediyor ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>progress öğesi iki özelliği bilir:
• max – Toplamda kaç adım gerektiğini belirler.
• value – Kaç adımın tamamlandığını gösterir.progress öğesi asıl olarak JavaScript devreye girdiğinde daha fazla ilgi çeker. progress ve JavaScript kombinasyonunun nasıl kullanılabileceği en iyi bir örnekle gösterilebilir.
Bu örnekte, birden fazla adımda doldurulacak bir formdan hareket edilir. Sırasıyla aşağıdaki bilgiler istenir:
• Ad
• Soyad
• Sokak
• Posta Kodu
• Şehir
Şimdi bu birkaç değeri bir sayfada sorgulamak mümkün olabilir. Ancak, eğer kullanıcıdan çok sayıda bilgi alınacaksa ne olacak? O zaman kapsamlı formlar daha çok korkutucu olur. Bu nedenle daha iyi olan, formların birden fazla sayfaya bölünmesidir.
Varsayalım ki formu çağırıyorsunuz.
Burada adınız sorulacaktır. Alanın altındaki durum çubuğu, progress öğesiyle gerçekleştirilmiştir.
<fieldset id="schritt1" style="display: none;"> <p>Ad: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Adım 1 / 5</progress></p> <p><input type="button" value="İleri" onclick="naechserSchritt(2)"></p> </fieldset>
Bu sözdiziminde önemli olan birkaç şey vardır. Her bir fieldset öğesi önce görünmez olarak ayarlanır. çünkü ilk bakışta öyle görünmese de, form aslında yalnızca bir sayfadan oluşur. Her bir alan ayrı fieldset öğesine eklenmiştir. Ve bu fieldset öğeleri (içerikleriyle birlikte) görünmezdir.
Gerçekten gizli olan ögelerin, ilgili İleri düğmelerine tıklandıktan sonra görünür hale gelmesi için bir JavaScript switch işlevi kullanılır. Bu nasıl görünüyor, bu öğreticinin devamındaki bölümde gösterilecektir.
Ancak önce formu tekrar ele alalım. İleri düğmelerine tıklanarak formda dolaşacaksınız. Bu esnada progress ögeleri, ne kadar ilerlediğinizi gösterir.
Ayrıca tarayıcının progress öğesini yorumlamaması çok da önemli değil.Bu tarayıcılar sadece bu öğenin içeriğini gösterir.
<progress max="5" value="1">Adım 1 / 5</progress>
Yerine Progress göstergesi olarak Adım 2 / 5 biçiminde bir metin görünecektir.
Form şu şekildedir:
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>Ad: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Adım 1 / 5</progress></p> <p><input type="button" value="İleri" onclick="naechsterSchritt(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>Soyad: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">Adım 2 / 5</progress></p> <p><input type="button" value="İleri" onclick="naechsterSchritt(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>Cadde: <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">Adım 3 / 5</progress></p> <p><input type="button" value="İleri" onclick="naechsterSchritt(4)"></p> </fieldset> <fieldset id="schritt4" style="display: none;"> <p>Posta Kodu: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">Adım 4 / 5</progress></p> <p><input type="button" value="İleri" onclick="naechsterSchritt(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>Şehir: <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">Adım 5 / 5</progress></p> <input type="submit" value="Son"> </fieldset> </form>
Burada üç önemli şey vardır:
• Her fieldset öğesine bir ID atanır.
• Tüm fieldset öğeleri display: none olarak ayarlanır.
• Düğmelere naechsterSchritt(n) işlevi atanır.
İşlev naechsterSchritt(n) şu şekildedir:
<script>
/* <![CDATA[ */
function naechsterSchritt(n) {
switch(n) {
case 1:
document.getElementById('schritt1').style.display = "block";
break;
case 2:
document.getElementById('schritt1').style.display = "none";
document.getElementById('schritt2').style.display = "block";
break;
case 3:
document.getElementById('schritt2').style.display = "none";
document.getElementById('schritt3').style.display = "block";
break;
case 4:
document.getElementById('schritt3').style.display = "none";
document.getElementById('schritt4').style.display = "block";
break;
case 5:
document.getElementById('schritt4').style.display = "none";
document.getElementById('schritt5').style.display = "block";
break
default: break;
}
}
naechsterSchritt(1);
/* ]]> */
</script>
Bu işlev mevcut fieldset öğesini gösterir ve diğer fieldset öğelerini gizler. Kesinlikle, işlevi alan tanımlamasının arkasına yerleştirdiğinizden emin olun. Yani bunu kapatma </form> etiketinizin hemen ardında yerleştirin.
