HTML5には、電話番号に関連する入力用のtelフィールドタイプが提供されています。
電話番号: <input type="tel" name="telefon">
スマートフォンやタブレットでは、フィールドをクリックすると電話番号を入力するためのテンキーが表示されます。
urlを使用したインターネットアドレス用のフィールド
urlタイプのフィールドはインターネットアドレスの入力に使用されます。
<input type="url" />
URLフィールドは自動的に検証されます。ブラウザは、このようなフィールドで構文的に正しいURLが入力されたかどうかを検証する必要があります。
outputを使用した出力フィールド
outputフィールドを使用すると、コンテンツを出力できます。JavaScriptと組み合わせることができるため、変数の出力に使用できます。また、計算された値の出力にも使用できます。このフィールドはデータの出力のみを目的としています。ユーザーからの入力は受け付けられません。
例:
<script>
/* <![CDATA[ */
function ausgabe(){
wort1="こんにちは、"
wort2="世界!"
document.forms[0][0].value=wort1+wort2
}
/* ]]> */
</script>この例では、2つの変数が宣言されています。これらの変数の内容がoutputフィールドに表示されることになります。
<body onload="ausgabe()">
<form action="auswertung.php" method="get" name="form">
<output name="feld" />
</form>
</body>
Operaなどのブラウザは、必要な値を表示します。outputを理解できないブラウザでは、表示されない場合があります。outputには3つの属性があります。
• form – output要素が含まれるフォームです。
• for – outputフィールドが参照するフィールドや値への関連付けを示します。値とフィールドはスペースで区切られます。
• name – 名前を指定すると、フォームの送信時にフィールドの内容が送信されます。
• value – フィールドの値を指定します。outputは数学の計算にも適しています。たとえば、プロンプトフィールドから値を入力し、それらをかけ合わせることができます。
<!DOCTYPE html>
<html >
<head>
<title>output</title>
<script>
/* <![CDATA[ */
function multi(){
a=parseInt(prompt("Digit 1",0));
b=parseInt(prompt("Digit 2",0));
document.forms["form"]["result"].value=a*b;
}
/* ]]> */
</script>
</head>
<body onload="multi()">
<form action="#" method="get" name="form">
<label>Multiplication result:</label>
<output name="result" />
</output>
</form>
</body>
</html>ページを開くと、最初の値を尋ねるプロンプトウィンドウが表示されます。
OKをクリックして入力を確認すると、2番目のウィンドウが開きます。 (いずれかのウィンドウでキャンセルをクリックすると、結果はNaN、つまり数字ではありません)。
2番目のウィンドウでもOKをクリックすると、スクリプトは乗算の結果をoutputフィールドに値として渡します。
progressを使用した進行状況表示
progress要素を使用すると進捗状況を表示できます。たとえば、ファイルのダウンロードとの関連で使用することができます。.gif "HTML＆CSS初心者向け（パート16）：フォーム（4）")
Googleはこの要素をすでに解釈しています。この要素を認識していない他のブラウザは、その内容を表示します。
例:
ダウンロード中...
<progress value="250" max="1000">
<span id="downloadProgress">25</span>%
</progress>progress要素には2つの属性があります。
• max – 総ステップ数を指定します。
• value – 完了したステップ数を指定します。progress要素はJavaScriptが絡むと特に興味深くなります progressとJavaScriptの組み合わせをどのように利用するかは、具体例を通じて最良に示すことができます。
この例では、複数のステップで入力を収集するフォームから出発すると仮定します。順番に次の情報が入力されます:
•名
•苗字
•通り
•郵便番号
•場所
これらのわずかな値を1ページで照会することも可能です。しかし、ユーザーから多くの情報を取得する場合、複雑なフォームはむしろ抑止的に映るかもしれません。ですから、フォームを複数のページに分割するのがより良い方法です。
このフォームを呼び出したと仮定します。
ここで、名前を尋ねられます。フィールド下のステータスバーはprogress要素によって実装されました。
<fieldset id="schritt1" style="display: none;"> <p>名前： <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">ステップ 1 / 5</progress></p> <p><input type="button" value="次へ" onclick="naechserSchritt(2)"></p> </fieldset>
この構文にはいくつかの重要な要素があります。最初に、各fieldset要素が非表示に設定されています。フォームは最初の見た目では1ページしか存在しないように見えますが、実際にはそうではありません。個々のフィールドはそれぞれ独自のfieldset要素に配置されています。そして、これらのfieldset要素（およびその内容）は非表示です。
各々の「次へ」ボタンをクリックすると、本来非表示である要素が表示されるようにするために、JavaScriptのswitch関数が使用されます。該当関数の具体的な見た目は、このチュートリアルの後半で示されます。
しかし、ますはフォームについて考えましょう。各「次へ」ボタンをクリックしてフォームを進めていくと、progress要素がどのくらい進んでいるかを示します。
ちなみに、ブラウザがprogress要素を解釈しない場合でも、その要素の内容が表示されるだけです。
<progress max="5" value="1">ステップ 1 / 5</progress>
進行状況表示の代わりに、ステップ 2 / 5という形式のテキストが表示されます。
このフォームの構造は以下のようになります:
<form method="post" action="#"> <fieldset id="schritt1" style="display: none;"> <p>名前： <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">ステップ 1 / 5</progress></p> <p><input type="button" value="次へ" onclick="naechsterSchritt(2)"></p> </fieldset> <fieldset id="schritt2" style="display: none;"> <p>苗字： <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">ステップ 2 / 5</progress></p> <p><input type="button" value="次へ" onclick="naechsterSchritt(3)"></p> </fieldset> <fieldset id="schritt3" style="display: none;"> <p>住所： <input type="text" name="strasse" size="30"></p> <p><progress max="5" value="3">ステップ 3 / 5</progress></p> <p><input type="button" value="次へ" onclick="naechsterSchritt(4)"></p> </fieldset> <fieldset id="schritt4" style="display: none;"> <p>郵便番号： <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">ステップ 4 / 5</progress></p> <p><input type="button" value="次へ" onclick="naechsterSchritt(5)"></p> </fieldset> <fieldset id="schritt5" style="display: none;"> <p>都市： <input type="text" name="ort" size="30"></p> <p><progress max="5" value="5">ステップ 5 / 5</progress></p> <input type="submit" value="終了"> </fieldset> </form>
ここで重要なのは以下の3つの要素です:
• 各fieldset要素にIDが割り当てられています。
• すべてのfieldset要素がdisplay: noneに設定されています。
• ボタンにはnaechsterSchritt(n)関数が割り当てられています。naechsterSchritt(n)関数は次のようになります:
<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>
この関数は現在のfieldset要素を表示し、他のfieldset要素を非表示にします。注意: この関数はフィールドの定義の後ろに配置する必要があります。つまり、</form> の直後に配置するのがベストです。
