最初のブロック領域はセクションタグで囲まれているので、レイアウトを並べて浮かべることができます。左側の列には、テキスト、電子メール、URL、電話番号のすべての入力が含まれています。携帯電話をタブで移動すると、モバイルキーボードの表示は入力タイプに応じて変わります。最近誰もが外出先で仕事をしているので、モバイル向けにこれらの機能をサポートするには十分な理由があります。.
textarea要素はpageloadで定義されたプレースホルダーテキストを持つこともできます。これは、ユーザーがフィールドにテキストを入力すると消えるラベルと似ています。持ち越されていない属性は オートコンプリート テキストエリアは通常関連コンテンツを埋めないため.
サイドバーコントロール
ウィンドウ表示のサイズ変更に適切に対応できるようにこのフォームを作成したいと思いました。ウィンドウが一杯になると、両方の入力列が隣同士に移動します。しかし、幅を少し小さくすると、右側のサイドバーはメインコンテンツの下に落ちます。.
これが私のサイドバー領域のHTMLです。
受取人：
このコードは実際には混乱を招くものではありません。メニューといくつかのラジオボタンを選択するだけの簡単なオプションです。さらに、これらのオブジェクトの後に、セクションの終わりに向かってリセットボタンと送信ボタンを配置しました。.
これはすべて見栄えがよく見栄えがよいので、ここでCSSプロパティに移りましょう。フォーム要素を操作するときに適用できるカスタマイズは非常にたくさんあります。考えすぎて気を悪くしないで楽しんでください。!
アニメーションボックス影
あなたが私がカラフルな外側の影を活気づけたことをあなたがあなたが主な入力要素の各々を通してタブとして動かすのに気付くでしょう。 Google Chromeには、似たような機能を持つアウトラインプロパティがありますが、それほど豪華ではありません。このインターフェースのごく一部は、初めての訪問者にとって魅力的です。.
/ **フォーム要素** /＃hongkiat-form box-sizing：border-box; ＃hongkiat-form .txtinput display：block;; font-family： "Helvetica Neue"、Arial、Sans-Serif。ボーダースタイル：ソリッド。ボーダー幅：1px。 border-color：#dedede;マージンボトム：20px。フォントサイズ：1.55em。パディング：11px 25px。左パディング：55px。幅：90％。カラー：＃777。 box-shadow：0 1ピクセル3ピクセルrgba（0、0、0、0.1）のインセット。 -moz-box-shadow：0 1ピクセル3ピクセルrgba（0、0、0、0.1）のインセット。 -webkit-box-shadow：0 1ピクセル3ピクセルrgba（0、0、0、0.1）のインセット。遷移：ボーダー0.15秒のリニア0、ボックスシャドウ0.15秒のリニア0、カラー0.15秒のリニア0。 -webkit-transition：ボーダー0.15秒のリニア0、ボックスシャドウ0.15秒のリニア0、色0.15秒のリニア0。 -moz-transition：境界線0.15秒の線形0、ボックス影0.15秒の線形0、色0.15秒の線形0。 -o-transition：ボーダー0.15秒のリニア0、ボックスシャドウ0.15秒のリニア0、カラー0.15秒のリニア0。 ＃hongkiat-form .txtinput：focus color：＃333;ボーダーカラー：rgba（41、92、161、0.4）。ボックスシャドウ：0 1px 3px rgba（0、0、0、0.1）挿入図、0 0 8px rgba（41、92、161、0.6）。 -moz-box-shadow：0 1px 3px rgba（0、0、0、0.1）インセット、0 0 8px rgba（41、92、161、0.6）。 -webkit-box-shadow：0 1px 3px rgba（0、0、0、0.1）インセット、0 0 8px rgba（41、92、161、0.6）。アウトライン：0なし。
各テキスト要素をターゲットにするために、このクラスを使用しました .txtinput. 各トランジションプロパティは、境界線、ボックスシャドウ、および色に作用します。私は使っています ボックスサイズ：ボーダーボックス。 フォームコンテナでは、パディングによってレスポンシブデザインが乱れることはありません。.
私はこれらの同じスタイルをコピーして、テキストエリアのためにそれらをわずかに編集しなければなりませんでした。いくつかの余白と余白を変更し、独自の背景アイコンを追加しました.
＃hongkiat-form textarea display：block; font-family： "Helvetica Neue"、Arial、Sans-Serif。ボーダースタイル：ソリッド。ボーダー幅：1px。 border-color：#dedede;マージンボトム：15px。フォントサイズ：1.5em。パディング：11px 25px。左パディング：55px。幅：90％。高さ：180ピクセル。カラー：＃777。 box-shadow：0 1ピクセル3ピクセルrgba（0、0、0、0.1）のインセット。 -moz-box-shadow：0 1ピクセル3ピクセルrgba（0、0、0、0.1）のインセット。 -webkit-box-shadow：0 1ピクセル3ピクセルrgba（0、0、0、0.1）のインセット。遷移：ボーダー0.15秒のリニア0、ボックスシャドウ0.15秒のリニア0、カラー0.15秒のリニア0。 -webkit-transition：ボーダー0.15秒のリニア0、ボックスシャドウ0.15秒のリニア0、色0.15秒のリニア0。 -moz-transition：境界線0.15秒の線形0、ボックス影0.15秒の線形0、色0.15秒の線形0。 -o-transition：ボーダー0.15秒のリニア0、ボックスシャドウ0.15秒のリニア0、カラー0.15秒のリニア0。 ＃hongkiat-form textarea：focus color：＃333;ボーダーカラー：rgba（41、92、161、0.4）。ボックスシャドウ：0 1px 3px rgba（0、0、0、0.1）挿入図、0 0 8px rgba（40、90、160、0.6）。 -moz-box-shadow：0 1px 3px rgba（0、0、0、0.1）インセット、0 0 8px rgba（40、90、160、0.6）。 -webkit-box-shadow：0 1px 3px rgba（0、0、0、0.1）インセット、0 0 8px rgba（40、90、160、0.6）。アウトライン：0なし。 ＃hongkiat-form textarea.txtblock background：#fff url（ 'https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png'）5px 4px no-repeat;
サイドバー入力
ラジオボタンと選択メニュー項目は、ずっとシンプルになっています。これらの要素に外側のグロー効果や同様のドロップシャドウを適用することはできますが、見栄えがよくありません。代わりに、デザイナーはカスタムユーザーインターフェースを作成し、それらを背景画像として添付します。しかし、これはオプションを正しく表示し続けるためにjQueryの回避策を必要とするかもしれません.
span.radiobadge display：block;マージンボトム：8px。 span.radiobadge label フォントサイズ：1.2em;パディングボトム：4px。 select.selmenu フォントサイズ：17ピクセル;カラー：＃676767。パディング：9px！重要。ボーダー：1px実線#aaa。幅：200ピクセル。
私はこれらを主要な入力要素から遠ざけるために、あまり多くのことをしていません。ユーザーがフォームと快適にやり取りできるようにするには、余分な余白を十分に確保することが重要です。テキストが非常に小さい場合は、各部分に記入するだけで闘争になる可能性があります。あなたのフォントを大きくしてください、しかしそれはページを圧倒するほど大きくはありません.
カスタマイズボタン
リセットボタンと送信ボタンは独自のクラスで設計されています。フォームフィールドの青いハイライトによく合うように、一連のライトグラデーションを作成しました。.
以下は標準状態とホバー状態の送信ボタンのための私のCSSコードです。.
#buttons #submitbtn display：block;フロート：左。身長：3em。パディング：0 1em。ボーダー：1pxソリッド。アウトライン：0;フォントの太さ：太字。フォントサイズ：1.3em。色：#fff; text-shadow：0ピクセル1ピクセル0ピクセル＃222。空白：ナラップ。ワードラップ：通常。垂直方向に整列：中央。カーソル：ポインタ。 -moz-border-radius：2ピクセル。 -webkit-border-radius：2ピクセル。 border-radius：2ピクセル。ボーダーカラー：＃5e890a＃5e890a＃000。 -moz-box-shadow：インセット0 1px 0 rgba（256、256、256、.35）。 -ms-box-shadow：インセット0 1px 0 rgba（256、256、256、.35）。 -webkit-box-shadow：インセット0 1px 0 rgba（256、256、256、.35）;ボックスシャドウ：インセット0 1px 0 rgba（256、256、256、.35）。背景色：rgb（226、238、175）。背景画像：−ｍｏｚ線形勾配（上、ｒｇｂ（２２６、２３８、１７５）３％、ｒｇｂ（１８８、２１６、７７）３％、ｒｇｂ（１４４、１７６、３８）１００％）。 background-image：-webkit-gradient（線形、左上、左下、カラーストップ（3％、rgb（226,238,175））、カラーストップ（3％、rgb（188,216,77））、カラーストップ（100） ％、ｒｇｂ（１４４、１７６、３８）））。背景画像： - ウェブキット - 線形 - 勾配（上、ｒｇｂ（２２６，２３８，１７５）３％、ｒｇｂ（１８８，２１６，７７）３％、ｒｇｂ（１４４，１７６，３８）１００％）。背景画像： - 線形 - 勾配（上、ｒｇｂ（２２６、２３８、１７５）３％、ｒｇｂ（１８８、２１６、７７）３％、ｒｇｂ（１４４、１７６、３８）１００％）。背景画像：−ｍｓ−線形勾配（上、ｒｇｂ（２２６、２３８、１７５）３％、ｒｇｂ（１８８、２１６、７７）３％、ｒｇｂ（１４４、１７６、３８）１００％）。背景画像：線形勾配（上、ｒｇｂ（２２６、２３８、１７５）３％、ｒｇｂ（１８８、２１６、７７）３％、ｒｇｂ（１４４、１７６、３８）１００％）。 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = "＃e2eeaf"、endColorstr = "＃90b026"、GradientType = 0）; ＃ボタン#submitbtn：ホバー、＃ボタン#submitbtn：アクティブborder-color：＃7c9826＃7c9826＃000;色：#fff; -moz-box-shadow：インセット0 1px 0 rgba（256,256,256,0.4）、0 1px 3px rgba（0,0,0,0.5）。 -ms-box-shadow：インセット0 1px 0 rgba（256,256,256,0.4）、0 1px 3px rgba（0,0,0,0.5）。 -webkit-box-shadow：インセット0 1px 0 rgba（256,256,256,0.4）、0 1px 3px rgba（0,0,0,0.5）。ボックスシャドウ：インセット0 1px 0 rgba（256,256,256,0.4）、0 1px 3px rgba（0,0,0,0.5）。背景：rgb（228、237、189）。背景：−ｍｏｚ−線形 - 勾配（ｔｏｐ、ｒｇｂ（２２８，２３７，１８９）２％、ｒｇｂ（２０７，２１９，１２０）３％、ｒｇｂ（１４９，１７５，５４）１００％）。背景：-webkit-gradient（線形、左上、左下、カラーストップ（2％、rgb（228,237,189））、カラーストップ（3％、rgb（207,219,120））、カラーストップ（100％、rgb（ 149、175、54）））。背景： - ウェブキット - リニア - グラジエント（上、ｒｇｂ（２２８，２３７，１８９）２％、ｒｇｂ（２０７，２１９，１２０）３％、ｒｇｂ（１４９，１７５，５４）１００％）。バックグラウンド： - 線形 - 勾配（ｔｏｐ、ｒｇｂ（２２８，２３７，１８９）２％、ｒｇｂ（２０７，２１９，１２０）３％、ｒｇｂ（１４９，１７５，５４）１００％）。バックグラウンド：−ｍｓ−線形勾配（ｔｏｐ、ｒｇｂ（２２８，２３７，１８９）２％、ｒｇｂ（２０７，２１９，１２０）３％、ｒｇｂ（１４９，１７５，５４）１００％）。バックグラウンド：線形勾配（ｔｏｐ、ｒｇｂ（２２８，２３７，１８９）２％、ｒｇｂ（２０７，２１９，１２０）３％、ｒｇｂ（１４９，１７５，５４）１００％）。 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = "＃e4edbd"、endColorstr = "＃95af36"、GradientType = 0）;
この種のセレクタをきれいに保つことはほとんど不可能です。あなたがリストアップし、多くの古いレガシーブラウザをサポートするのに必要なプロパティが多すぎます。 Internet Explorerはこれらのグラデーションを適切なフィルタでレンダリングすることさえできます。背景のグラデーションとは別に、新しい枠線の色、丸みを帯びた角、およびホバーのボックスの影も含めました。.
リセットボタンは似ているように見えますが、配色はまったく別のルートになっています。ライトグレーは、明るい緑色に比べて背景に落ちる傾向があります。リセットボタンはあまり使用されない可能性が高いので、すべての注意を払う必要はありません。.
#buttons #resetbtn display：block;フロート：左。カラー：＃515151。 text-shadow：-1px 1px 0px #fff;右マージン：20px。身長：3em。パディング：0 1em。アウトライン：0;フォントの太さ：太字。フォントサイズ：1.3em。空白：ナラップ。ワードラップ：通常。垂直方向に整列：中央。カーソル：ポインタ。 -moz-border-radius：2ピクセル。 -webkit-border-radius：2ピクセル。 border-radius：2ピクセル。背景色：#fff;背景画像：−ｍｏｚ線形勾配（上、ｒｇｂ（２５５，２５５，２５５）２％、ｒｇｂ（２４０，２４０，２４０）２％、ｒｇｂ（２２２，２２２，２２２）１００％）。 background-image：-webkit-gradient（線形、左上、左下、カラーストップ（2％、rgb（255,255,255））、カラーストップ（2％、rgb（240,240,240））、カラーストップ（100％、 rgb（222、222、222））;背景画像： - ウェブキット - 線形 - 勾配（上、ｒｇｂ（２５５，２５５，２５５）２％、ｒｇｂ（２４０，２４０，２４０）２％、ｒｇｂ（２２２，２２２，２２２）１００％）。背景画像： - 線形 - 勾配（上、ｒｇｂ（２５５、２５５、２５５）２％、ｒｇｂ（２４０、２４０、２４０）２％、ｒｇｂ（２２２、２２２、２２２）１００％）。背景画像：−ｍｓ−線形勾配（上、ｒｇｂ（２５５，２５５，２５５）２％、ｒｇｂ（２４０，２４０，２４０）２％、ｒｇｂ（２２２，２２２，２２２）１００％）。背景画像：線形勾配（上、ｒｇｂ（２５５、２５５、２５５）２％、ｒｇｂ（２４０、２４０、２４０）２％、ｒｇｂ（２２２、２２２、２２２）１００％）。 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = "＃ffffff"、endColorstr = "＃dedede"、GradientType = 0）;ボーダー：1ピクセルソリッド＃969696。ボックスシャドー：0 1px 2px rgba（144、144、144、0.4）。 -moz-box-shadow：0 1px 2px rgba（144、144、144、0.4）。 -webkit-box-shadow：0 1px 2px rgba（144、144、144、0.4）。 text-shadow：0 1ピクセル1ピクセルrgba（255、255、255、0.75）。 #buttons #resetbtn：hover text-shadow：0 1px 1px rgba（255、255、255、0.75）;カラー：＃818181。背景色：#fff;背景画像：−ｍｏｚ線形勾配（上、ｒｇｂ（２５５、２５５、２５５）２％、ｒｇｂ（２４４、２４４、２４４）２％、ｒｇｂ（２２９、２２９、２２９）１００％）。 background-image：-webkit-gradient（線形、左上、左下、カラーストップ（2％、rgb（255、255、255））、カラーストップ（2％、rgb（244、244、244））、カラーストップ（100％、 rgb（229、229、229）））。 background-image：-webkit-linear-gradient（上、rgb（255,255,255）2％、rgb（244,244,244）2％、rgb（229,229,229）100％）; background-image：-o-linear-gradient（上、rgb（ ２５５、２５５、２５５）２％、ｒｇｂ（２４４、２４４、２４４）２％、ｒｇｂ（２２９、２２９、２２９）１００％）； ｍ ／ ｚ（２５８）。背景画像：−ｍｓ−線形勾配（上、ｒｇｂ（２５５、２５５、２５５）２％、ｒｇｂ（２４４、２４４、２４４）２％、ｒｇｂ（２２９、２２９、２２９）１００％）。背景画像：線形勾配（ｔｏｐ、ｒｇｂ（２５５，２５５，２５５）２％、ｒｇｂ（２４４，２４４，２４４）２％、ｒｇｂ（２２９，２２９，２２９）１００％）。 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = "＃ffffff"、endColorstr = "＃e5e5e5"、GradientType = 0）; border-color：#aeaeae;ボックスシャドウ：インセット0 1px 0 rgba（256,256,256,0.4）、0 1px 3px rgba（0,0,0,0.5）。
リセットタイプを削除して、この白/グレーの配色をメインの送信ボタンとして使用することもできます。私は、内側のラベルのテキストシャドウとともに、同じグラデーションスタイルとドロップシャドウ効果の多くを使用しました。それは間違いなくユーザーエクスペリエンスに別の感覚を提供します.
レスポンシブレイアウトの変更
私の他のCSSファイルに移って、私が設定した簡単なレスポンシブメディアクエリーを見てみましょう。 800pxを超えるブラウザウィンドウでは、完全なサイドバーインターフェイスが使用されます。このしきい値を下回ると、左側の列が100％幅に拡大され、サイドバー要素が下にドロップダウンします。.
@メディア画面と（最大幅：800ピクセル）ボディパディング：10ピクセルx 15ピクセル; #container 幅：100％; ＃hongkiat-form #aligned 幅：100％; float：なし。表示ブロック; ＃hongkiat-form＃横幅：100％;表示ブロック; float：なし。 ＃hongkiat-form .txtinput、＃hongkiat-form textarea 幅：85％; #prioritycase float：left;;表示ブロック; #recipientcase float：left;表示ブロック;右マージン：55px。
サイズが小さくなるにつれて、それぞれの入力フォームを調整してみます。 widthプロパティは、Webページ自体より長くなることがあります。その場合、入力フォームは端からはみ出してしまいます。これは、縦向きと横向きの両方のiPhone画面表示解像度とともに、次のクエリを中断する550px付近で発生します。.
/ *より小さなスクリーンドロップオフ******* / @media onlyスクリーンと（最大幅：550ピクセル）＃hongkiat-form .txtinput、＃hongkiat-form textarea 幅：80％; iPhoneの風景******** / @mediaのみの画面と（最大幅：480px）body パディング：10px 0px; select.selmenu width：190px; iPhoneのポートレート******* / @mediaのみの画面と（最大幅：320px）body パディング：10px 0px; ＃hongkiat-form .txtinput、＃hongkiat-form textarea 幅：70％; ＃hongkiat-form #aligned オーバーフロー：非表示。 select.selmenu width：160px; #recipientcase margin-right：30px;
水平景観モードは、まだすべてを非常にうまく組み合わせています。ラジオボタン用のスペースを確保するために、ドロップダウン選択メニューを少し薄くしただけです。縦ビューで、私はすべての要素をもっと小さい幅にリサイズしました。これで、サイズ変更されたブラウザウィンドウでもコードが壊れません。しかし、iOS / Androidスマートフォンにも対応しているのはうれしいことです.
結論
このチュートリアルが、あなたのWebフォームでできることを説明するのに有益であったと思います。新しいCSS3プロパティは、ほんの数行のコードで完全に機能するアニメーションを構築するのに十分強力です。 Web開発に従事し、これらの傾向に従うことは本当にワクワクする時です.
チュートリアルコードについてのアイデアや提案があれば、下のコメントボックスを使って私たちと共有してください。.
