HTML5-Webフォーム2.0

Web Forms 2.0は、HTML4にあるフォーム機能の拡張機能です。 HTML5のフォーム要素と属性は、HTML4よりも高度なセマンティックマークアップを提供し、HTML4で必要だった面倒なスクリプトやスタイル設定から解放されます。

HTML4の<input>要素

HTML4入力要素は、 type 属性を使用してデータタイプを指定します。HTML4は次のタイプを提供します-

Sr.No.	Type & Description
1	text 名目上改行のない自由形式のテキストフィールド。
2	password 機密情報用の自由形式のテキストフィールド。名目上は改行はありません。
3	checkbox 事前定義リストからのゼロ以上の値のセット。
4	radio 列挙値。
5	submit ボタンのフリーフォームはフォームの送信を開始します。
6	file MIMEタイプとオプションでファイル名を持つ任意のファイル。
7	image 特定の画像のサイズに関連する座標で、最後に選択された値でなければならず、フォームの送信を開始するという追加のセマンティクスを持ちます。
8	hidden 通常はユーザーに表示されない任意の文字列。
9	select ラジオタイプによく似た列挙値。
10	textarea 名目上改行の制限のない自由形式のテキストフィールド。
11	button ボタンに関連するイベントを開始できるボタンの自由形式。

以下は、ラベル、ラジオボタン、および送信ボタンを使用する簡単な例です-

...
<form action = "http://example.com/cgiscript.pl" method = "post">
   <p>
      <label for = "firstname">first name: </label>
      <input type = "text" id = "firstname"><br/>

      <label for = "lastname">last name: </label>
      <input type = "text" id = "lastname"><br/>

      <label for = "email">email: </label>
      <input type = "text" id = "email"><br>

      <input type = "radio" name = "sex" value = "male"> Male<br>
      <input type = "radio" name = "sex" value = "female"> Female<br>
      <input type = "submit" value = "send"> <input type = "reset">
   </p>
</form>
 ...

HTML5の<input>要素

上記の属性とは別に、HTML5 input要素は type 属性にいくつかの新しい値を導入しました。これらは以下にリストされています。

注- Opera ブラウザの最新バージョンを使用して、次のすべての例を試してください。

Sr.No.	Type & Description
1	datetime タイムゾーンをUTCに設定してISO 8601に従ってエンコードされた日付と時刻（年、月、日、時間、分、秒、秒の小数部）。
2	datetime-local タイムゾーン情報なしでISO 8601に従ってエンコードされた日付と時刻（年、月、日、時間、分、秒、秒の小数部）。
3	date ISO 8601に従ってエンコードされた日付（年、月、日）。
4	month ISO 8601に従ってエンコードされた年と月で構成される日付。
5	week ISO 8601に従ってエンコードされた年と週の番号で構成される日付。
6	time ISO 8601に従ってエンコードされた時間（時、分、秒、小数秒）。
7	number 数値のみを受け入れます。 step属性は精度を指定し、デフォルトは1です。
8	range 範囲タイプは、数値の範囲の値を含む必要がある入力フィールドに使用されます。
9	email 電子メールの値のみを受け入れます。このタイプは、電子メールアドレスを含む必要がある入力フィールドに使用されます。単純なテキストを送信しようとすると、email @ example.com形式のメールアドレスのみが入力されます。
10	url URL値のみを受け入れます。このタイプは、URLアドレスを含む必要がある入力フィールドに使用されます。単純なテキストを送信しようとすると、http：//www.example.com形式またはhttp://example.com形式のURLアドレスのみを入力するように強制されます。

<output>要素

HTML5では、スクリプトによって記述された出力など、さまざまなタイプの出力の結果を表すために使用される新しい要素<output>が導入されました。

*for* 属性を使用して、出力要素と、計算に影響を与えたドキュメント内の他の要素との関係を指定できます（たとえば、入力またはパラメーターとして）。 for属性の値は、スペースで区切られた他の要素のIDのリストです。

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">

         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>

   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput"/>
         <input type = "button" value = "Result"  onclick = "showResult();"/>
         <output name = "result"></output>
      </form>

   </body>
</html>

それは次の結果を生成します-

プレースホルダー属性

HTML5では、 placeholder という新しい属性が導入されました。 <input>および<textarea>要素のこの属性は、フィールドに入力できる内容のヒントをユーザーに提供します。プレースホルダーテキストには、キャリッジリターンまたはラインフィードを含めることはできません。

ここにプレースホルダー属性の簡単な構文があります-

<input type = "text" name = "search" placeholder = "search the web"/>

この属性は、Mozilla、Safari、およびCromeブラウザーの最新バージョンでのみサポートされています。

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput"
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit"/>
      </form>

   </body>
</html>

これは、次の結果を生成します-

オートフォーカス属性

これは、ドキュメントの読み込み時にJavaScriptで簡単にプログラムできる単純な1ステップのパターンであり、特定のフォームフィールドに自動的にフォーカスします。

HTML5は、次のように使用される autofocus と呼ばれる新しい属性を導入しました-

<input type = "text" name = "search" autofocus/>

この属性は、Mozilla、Safari、Chromeブラウザの最新バージョンでのみサポートされています。

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit"/>
      </form>

   </body>
</html>

必須属性

これで、HTML5が required と呼ばれる新しい属性を導入したため、空のテキストボックスが送信されないなど、クライアント側の検証にJavaScriptを使用する必要がなくなります。

<input type = "text" name = "search" required/>