HTML5フォームのHTML5チュートリアルログインページ
HTML5は多くの機能と改良をもたらします。 Webフォーム, 導入された新しい属性と入力タイプがあります 主にWeb開発者の生活を楽にし、Webユーザーにより良い経験を提供するため.
そのため、この記事では、次のようにしてログインページを作成します。 HTML5フォーム 新しく追加された機能がどのように機能するかを確認する.
- デモ
- ソースをダウンロード
HTML5の入力
次のマークアップを見てみましょう.
HTMLフォームを以前に使用したことがあれば、これはおなじみのことでしょう。しかし、違いもあります。入力は プレースホルダー そして 必須 attributes、HTML 5の新しい属性.
プレースホルダー
の プレースホルダー 属性を使用すると、入力に最初のテキストを入力できます。 フォーカス 以前は、JavaScriptを使用していましたが、この新しい属性を使用するとはるかに簡単になります。.
必須属性
の 必須 attributeはフィールドを必須に設定するため、フォームが送信される前に空白のままにしないでください。したがって、ユーザーがフィールドに入力していない場合は、次のエラーが表示されます。.
新しいセレクタはCSS3でも導入されました, ：必須 でフィールドをターゲティングする 必須 属性。これが例です。
入力：必須境界線：1ピクセル赤の点灯;
メール入力タイプ
最初の入力タイプは Eメール これは実際には 新しいフィールド型 HTML5でも追加されました。の Eメール typeはフィールドに基本的な電子メールアドレスの検証を行います。ユーザーがこのフィールドに電子メールアドレスを入力しないと、ブラウザに次の通知が表示されます。
電子メール入力タイプを使用すると、iPhoneやAndroidユーザーのようにモバイルユーザーにとっても使い勝手がよくなります。 Eメールに最適化されたオンスクリーンキーボード 専用の “@” 電子メールアドレスを早く入力するためのボタン.
欠点
HTML5で提供されている新しいフォーム機能は、強力で実装も簡単ですが、まだいくつかの分野で欠けています。例えば;
の プレースホルダー 属性, 最近のブラウザでのみサポートされています - Firefox 3.7以降、Safari 4以降、Chrome 4以降、およびOpera 11+. それで、あなたがそれがサポートされていないブラウザで動作することを必要とするならば、あなたはModernizrと共にこのpolyfillsを使うことができます.
同じことが、 必須 属性. エラー通知はパーソナライズできません、エラーは残ります “このフィールドを記入してください” のではなく “あなたの名を記入してください”, この属性のサポートも最新のブラウザに制限されています.
そのため、JavaScriptを使用して必須フィールドを検証することが（これまでのところ）より良い選択肢です。.
function validateForm（）var x = document.forms ["login"] ["username"]。value; if（x == null || x == ""）alert（ "ユーザー名を入力してください"）; falseを返します。
フォームのスタイル
それでは、ログインフォームをCSSで飾りましょう。まず、背景に木の模様を付けます。 html タグ.
html background：url（ 'wood_pattern.png'）;フォントサイズ：10pt。
それから、デフォルトのパディングとマージンを削除する必要があります。 ul 全体をラップするタグ 入力 そして浮かぶ 李 左に移動すると、入力は横に並べて表示されます。.
.loginform ul パディング：0;マージン：0。 .loginform li display：inline;;フロート：左。
浮いているので 李, 両親は倒れるので、clearfixハックを使って親の周りのものをクリアする必要があります。.
ラベル表示：ブロック;カラー：＃999。 content： ""; .cf：before、.cf：after表示：テーブル。 clear：both;の後。 * zoom：1; ：focus outline：0;
CSS3では、否定セレクタがあります。それで、我々はそれをターゲットにするつもりです 入力 以外 提出する この場合はtype 電子メールとパスワードの入力をターゲットにします;
.loginform入力：not（[type = submit]）パディング：5px;右マージン：10px。ボーダー：1px solid rgba（0、0、0、0.3）。 border-radius：3ピクセル。ボックスシャドウ：インセット0px 1px 3px 0px rgba（0、0、0、0.1）、0px 1px 0px 0px rgba（250、250、250、0.5）。
最後に、私達はのために少しスタイルの装飾をします 提出する 次のようにボタン.
.loginform input [type = submit] 国境：1px solid rgba（0、0、0、0.3）;背景：＃64c8ef。 / *古いブラウザ* / background：-moz-linear-gradient（top、＃64c8ef 0％、＃00a2e2 100％）; / * FF3.6 + * / background：-webkit-gradient（線形、左上、左下、カラーストップ（0％、＃64c8ef）、カラーストップ（100％、＃00a2e2））。 / * Chrome、Safari4 + * / background：-webkit-linear-gradient（トップ、＃64c8ef 0％、＃00a2e2 100％）; / * Chrome10 +、Safari5.1 + * / background：-o-linear-gradient（トップ、＃64c8ef 0％、＃00a2e2 100％）; / * Opera 11.10以降* / background：-ms-linear-gradient（トップ、＃64c8ef 0％、＃00a2e2 100％）; / * IE10 + * /背景：線形勾配（一番下まで、＃64c8ef 0％、＃00a2e2 100％）。 / * W3C * / filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = "＃64c8ef"、endColorstr = "＃00a2e2"、GradientType = 0）; / * IE6-9 * / color：#fff;パディング：5px 15px。右マージン：0。マージントップ：15px。 border-radius：3ピクセル。 text-shadow：1ピクセル1ピクセル0ピクセルrgba（0、0、0、0.3）。
それで、今、あなたは以下のリンクからログインフォームを試すことができます.
- デモ
- ソースをダウンロード
最後の言葉
このチュートリアルでは、HTML5フォームのいくつかの新機能について調べました。プレースホルダー, 必須 そして Eメール 単純なログインページを作成するための入力タイプ。私達はまた属性の欠点を経験したので、私達は適用されるべきより良いアプローチを決めることができます.
次回の記事では、別の新しいHTML5フォーム機能について説明しますので、ご注目ください。.
