HTML5 は、ページ構造やマルチメディア処理などの多くの点で、以前の HTML とは大きく異なります。このチュートリアルでは、HTML5、CSS3、および PHP を使用して、HTML5 標準に準拠した単純なフォーム送信 Web ページを実際にデザインする方法を紹介します。読者は、新しい HTML5 フォーム ページの基本要素を学ぶことができます。この記事の読者は、HTML、CSS、PHP についてある程度の知識がある人です。
フォームのデザインスケッチ
この記事は Photoshop の作り方を教えるものではないので、フォームのスケッチをデザインし、それを HTML5、CSS3、および PHP を使用して実装します。デザインしたいフォームのスケッチは次のとおりです。
▲
ご覧のとおり、このデザイン スケッチで達成されると期待される効果は次のとおりです。ユーザーが名前を入力すると、NAME フィールドのテキスト ボックスがフォーカスの形で表示され、よく見ると、電子メール入力ボックスは円であり、隅の境界線入力ボックスとメッセージ テキスト領域入力ボックスには背景のベースマップが表示されます。送信ボタンはカスタム ボタンです。
デザインを開始
次に、フォームのデザインを開始します。この記事では PHP を使用するため、任意の PHP プログラミング ツールを使用して最初にindex.php ファイルを作成し、次に HTML5 標準に準拠するフォームの作成を開始できます。
1) DOCTYPEについて
HTML5 では、DOCTYPE の宣言は非常にシンプルになります。コードは次のとおりです。