HTML5-Webフォーム2.0

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

HTML4の<input>要素

HTML4入力要素は type データ型を指定する属性。HTML4は次の型を提供します-

シニア番号	タイプと説明
1	text 名目上改行のない自由形式のテキストフィールド。
2	password 機密情報用の自由形式のテキストフィールドで、名目上改行がありません。
3	checkbox 事前定義されたリストからの0個以上の値のセット。
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入力要素はいくつかの新しい値を導入しました type属性。これらは以下のとおりです。

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

シニア番号	タイプと説明
1	日付時刻タイムゾーンをUTCに設定してISO8601に従ってエンコードされた日付と時刻（年、月、日、時、分、秒、小数部）。
2	日時-ローカル ISO 8601に従ってエンコードされた日付と時刻（年、月、日、時、分、秒、小数部）。タイムゾーン情報はありません。
3	日付 ISO 8601に従ってエンコードされた日付（年、月、日）。
4	月 ISO8601に従ってエンコードされた年と月で構成される日付。
5	週間 ISO8601に従ってエンコードされた年と週の番号で構成される日付。
6	時間 ISO 8601に従ってエンコードされた時間（時、分、秒、小数秒）。
7	数数値のみ受け付けます。step属性は精度を指定し、デフォルトは1です。
8	範囲範囲タイプは、数値の範囲からの値を含む必要がある入力フィールドに使用されます。
9	Eメール電子メールの値のみを受け入れます。このタイプは、電子メールアドレスを含める必要がある入力フィールドに使用されます。簡単なテキストを送信しようとすると、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がという新しい属性を導入したため、空のテキストボックスが送信されないなど、クライアント側の検証にJavaScriptを使用する必要がなくなりました。 required これは次のように使用され、値を持つことを主張します-

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

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

<!DOCTYPE HTML>

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

次の結果が得られます-