HTML5 menyediakan jenis input tel yang didesain untuk digunakan dalam konteks nomor telepon.
Nomor telepon Anda: <input type="tel" name="telefon">
Pada smartphone dan tablet, saat bidang tersebut diklik, keypad angka akan muncul untuk memasukkan nomor telepon.
Bidang untuk alamat internet dengan url
Bidang bertipe url ditujukan untuk memasukkan alamat internet.
<input type="url" />
Bidang URL secara otomatis divalidasi. Browser akan memeriksa apakah sebuah URL yang benar secara sintaksis telah dimasukkan ke dalam bidang tersebut.
Bidang output dengan output
Bidang output digunakan untuk menampilkan konten. Hal ini dapat menjadi menarik terutama saat terkait dengan JavaScript. Dengan demikian, bidang ini dapat digunakan untuk menampilkan variabel. Selain itu, bidang ini juga dapat digunakan untuk menampilkan nilai-nilai yang telah dihitung. Bidang ini khusus digunakan untuk output data. Input pengguna tidak dimungkinkan.
Contoh:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="Hallo,"
wort2="Welt!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>Pada contoh ini, dua variabel telah dideklarasikan. Isi dari variabel-varibel tersebut akan ditampilkan di dalam bidang output.
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Browser seperti Opera akan menampilkan nilai yang diinginkan. Sebaliknya, browser yang tidak dapat menangani output, tidak akan menampilkan apa-apa.output memiliki tiga atribut:
• form – Formulir tempat elemen output berada.
• for – Memberikan hubungan dengan bidang atau nilai yang diacu oleh bidang output. Nilai dan bidang tersebut harus dipisahkan oleh spasi.
• name – Saat nama diberikan, isi bidang akan ditransfer saat formulir dikirimkan.
• value – Menentukan nilai bidang.output juga bisa digunakan untuk perhitungan matematika. Sebagai contoh, melalui prompt, nilai-nilai dapat diambil dan kemudian dikalikan.
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Ziffer 1.",0));
b=parseInt(prompt("Ziffer 2.",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Das Ergebnis der Multiplikation:</label>
<output name="result" />
</output>
</form>
</body>
</html>Saat halaman diakses, jendela prompt akan muncul untuk mengambil nilai pertama.
Ketika pengguna mengonfirmasi masukan dengan OK, jendela kedua akan muncul. (Jika pengguna memilih Batal di salah satu jendela, hasilnya akan menjadi NaN, singkatan dari Not a Number).
Jika pengguna juga mengonfirmasi jendela kedua dengan OK, skrip akan mengirimkan hasil perkalian sebagai nilai ke bidang output.
Indikator progres dengan progress
Indicator progres dapat diimplementasikan melalui elemen progress. Hal ini berguna terutama saat berkaitan dengan unduhan file..gif "HTML & CSS untuk Pemula (Bagian 16): Formulir (4)")
Google sudah menginterpretasi elemen tersebut. Browser lain yang tidak mengenali elemen tersebut akan menampilkan isinya.
Contohnya:
Sedang mengunduh ...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>
Elemen progress memiliki dua atribut:
• max – Menentukan berapa langkah total yang diperlukan.
• value – Menunjukkan berapa langkah yang sudah selesai.
Elemen progress menjadi lebih menarik ketika digunakan bersamaan dengan JavaScript. Bagaimana kombinasi progress dan JavaScript dapat digunakan, dapat ditunjukkan dengan lebih baik melalui contoh.
Dalam contoh ini, diasumsikan adanya formulir yang harus diisi dalam beberapa tahap. Informasi berikut diminta secara berurutan:
• Nama Depan
• Nama Belakang
• Alamat
• Kode Pos
• Kota
Sekarang kita bisa meminta beberapa nilai ini pada satu halaman. Tetapi bagaimana jika harus mengumpulkan informasi dari pengguna dalam jumlah yang sangat besar? Maka formulir yang rumit akan terlihat menakutkan. Lebih baik jika formulir dibagi menjadi beberapa halaman.
Misalnya, jika Anda membuka formulir tersebut.
Anda akan ditanyai tentang nama depan Anda di sini. Baris status di bawah bidang tersebut diimplementasikan dengan elemen progress.
<fieldset id="schritt1" style="display: none;"> <p>Nama Depan: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Langkah 1 / 5</progress></p> <p><input type="button" value="Selanjutnya" onclick="naechserSchritt(2)"></p> </fieldset>
Pentingnya sintaks ini terletak pada beberapa hal. Element-elemen fieldset masing-masing ditempatkan ke mode tidak terlihat terlebih dahulu. Meskipun pada pandangan pertama mungkin tidak terlihat demikian, formulir sebenarnya hanya terdiri dari satu halaman. Setiap bidang ditempatkan dalam elemen fieldset tersendiri. Dan elemen fieldset ini (termasuk isi mereka) tidak terlihat.
Supaya elemen-elemen yang sebenarnya tersembunyi ini menjadi terlihat setelah mengklik tombol Selanjutnya, digunakan fungsi JavaScript switch. Bagaimana cara kerjanya akan ditunjukkan dalam tutorial ini selanjutnya.
Tetapi pertama-tama kembali ke formulir. Dengan mengklik tombol Selanjutnya, Anda akan diarahkan melalui formulir. Pada saat itu, elemen-elemen progress menunjukkan sejauh mana Anda telah meraih kemajuan.
Tidak masalah jika suatu browser tidak menginterpretasi elemen progress. Karena browser-b
