よりスマートな Web フォームの探求をマスターする: 究極の 2023 ガイド

オンラインフォームは、正しく機能するためにWebサイト開発で最もトリッキーな領域のXNUMXつです。人々がオンラインコンテンツにアクセスする方法の変化する性質は、人々が通常のコンピュータでしかできないことを電話でできると期待する何年も前に開発された技術にも影響を与えました。それはほとんど進化を遂げていない技術です。

Webフォームの設計は、スタンドアロンの専門職である必要があります。サイト設計者は、フルタイムのプロのWebフォーム設計者のサービスに従事して、作業を支援する必要があります。しかし、これは十分に経済的であるとは考えられていないため、ほとんどの場合、サイト設計者はサイトで使用されるフォームの設計も担当しています。

しかし、フォームのデザインは非常に専門的なスキルです。人々がどのように相互作用するかを理解する必要がありますformat情報を収集して提示するための最良の方法を理解するformatイオン。一般的なウェブデザインは、主にプレゼンテーションを中心にしています。format魅力的でありながら実用的な方法でイオンとイメージを形成するために、フォームデザインは、私たちが内の性質に注意を向けることを要求しますformat次に、意図したとおりに機能するようにページ上で構造化する最適な方法を決定します。この場合、美学はそれほど重要な考慮事項ではありませんが、それでも考慮すべきではありませんgotten.

この記事では、Webフォームデザインの手法を検討し、Webフォームの外観と機能の両方の点でWebフォームをよりスマートにする方法を見つけることができるかどうかを確認します。

Webフォーム構築のツール

ブラウザー開発者とW3CがWebフォームをまとめるために提供した標準ツールは、必ずしも理想的ではなく、CSSをそれらに適用する前は、実際にはかなり目立ちません。これは彼らがどのように見えるかです：

と呼ばれる別の標準入力コントロールもあります selectただし、スペースの節約が深刻な問題でない限り、これは使用しないでください。後で説明するように、選択コントロールによって実行されるタスクを処理するより良い方法があります。 Textareaコントロールも問題が多く、古物商なので、可能な限り回避する必要があります。

これらの標準入力項目に加えて、HTML5用に作成された特別な新しい項目もあります。ドキュメントが内部で使用するために厳密に準備されており、ブラウザー環境がわかっている場合を除き、FirefoxとChromeの両方で機能するコンポーネントのみを使用する必要があります。コンポーネントが他のブラウザでも機能するのは良いことですが、の他のブラウザで動作します。 Firefoxに表示されるHTML5コンポーネントは次のとおりです。

そして、Chromeでの外観は少し異なります。

HTML5入力の外観と機能はChromeとFirefoxで異なることに注意してください。ただし、これらは引き続き機能します。また、標準入力コントロールは、FirefoxよりもChromeで少し見栄えがします。 Chromeは北米の日付基準を課していることに注意してください。また、Chromeバージョンの日付コントロールは表示に適さないため、入力にのみ使用してください。日付ピッカーの追加がChromeの主な改善点ですが、Firefoxの将来のバージョンでこれが見られると期待できます。

Firefoxはオープンソースであるため、ChromeのベースとなっているオープンソースのChromiumブラウザーソースコードをダウンロードし、コードの関連セクションをFirefoxソースに移植することで、Firefoxの独自のバージョンで入力をレンダリングすることができます。コード（ただし、Firefoxを新しいバージョンにアップグレードするたびにそれを行う必要があります）。

ただし、重要な点は、Chromeの拡張機能を使用しても、入力コントロールのデフォルトの外観は小さく、魅力がないということです。他にもいくつか利用可能なコントロールがありますが、それらはChromeとFirefoxの両方で機能しないため、一般向けのサイトでは使用しないでください。

ブートストラップの（ほぼ適切な）回答

ブートストラップは、外観をある程度向上させる標準コントロールにスタイルを適用します。ただし、Bootstrapのモバイル中心の設計思想により、単一の列として表示されることを意図していないフォームに望ましくない影響を及ぼし、デフォルトで列全体にまたがる短い入力フィールドはおかしく見えます。世界はモバイルに移行したかもしれませんが、フォームはモバイルユーザーを念頭に置いて発明されたものではありません。

ブートストラップは、コンテナの水平方向の幅を満たすようにコントロールを拡張します。つまり、この動作を手動でオーバーライドしない限り、すべてのコントロールの幅は好みに関係なく同じであり、いくつかのコントロールタイプを追加のブリンブリンでドレスアップできます。 Bootstrapのソリューションは洗練されており、異なるブラウザーで異なる外観のコントロールの問題のいくつかを克服しますが、それは標準のコントロールでのみ機能します。 HTML5コントロールは現在のバージョンのBootstrapには実装されていないため、独自にスタイルを設定する必要があります。

ブートストラップでは、コントロールを組み合わせることもできます。これは良いこともあれば、それほど良くないこともあります。テキスト入力とボタンおよびチェックボックスを組み合わせると見栄えがよくなるかもしれませんが、このようななじみのないコントロールとの対話方法についてユーザーを混乱させる可能性があります。

Bootstrapが提供するのは、私のお気に入りのフォーム構築デバイスのXNUMXつである パネル とよく。これらは、フォームデータをグループ化して、どのデータが他のどのデータに関連付けられているかを視覚的に示したり、データを分離したりするのに非常に役立ちます。

スマートフォームビル101

これで、よりスマートな方法でフォームを構築する方法について考える準備が整いました。これを行うには、デフォルトを超えてよく考える必要があります。私たちは、 desktopフォームコントロールのバインドされたルート、およびモバイル互換性の必要性。また、使いやすさや検証 (フォームがデータ収集に使用される場合) などにも注意する必要があります。

フォームコントロールは入力の収集に使用される一方で、格納されたデータの表示にも使用されるため、最後の点は適切です。平均的な Web ユーザーは、アクセスすることにもっと関心を持っています (またそうあるべきです)。format屈するよりもあなたからのイオンformatあなたにイオン。

データ収集は簡単です。たとえそれが混乱していても、人々はあなたが彼らの前に固執するものは何でも記入します。しかし、データ表示に関しては、もっと面倒です。したがって、ここでは、データを収集するよりもフォームを使用してデータを表示することに重点を置きます。これは、表示にはより多くの注意と「スマートさ」が必要だからです。

1.フォームが必要ですか？

フォームを作成する前に、実際にフォームが必要かどうかを確認する必要があります。データを適切かつ混乱なく表として表現できる場合、通常は表の方が効率的で実用的です。

次の場合はフォームが必要です。

ユーザーからの入力を収集しています
表示するデータがたくさんあります
データを明確にセグメント化する必要がある
ユーザーがモバイルデバイスからデータにアクセスしている可能性があります

上記の項目のいずれかが当てはまらない場合は、フォームを使用する必要はなく、表で十分です。私たちがモバイル互換性に直面する課題は、テーブルもフォームもモバイルディスプレイに本当に適していないことです。スマートフォンのデザイナーがユーザーにブラウザーを縦向きで使用するオプションを与えたこと、そしてほとんどのユーザーが携帯電話をそのように持つことを好むという事実は、サイトのデザイナーが対処しなければならないモバイル互換性問題のほとんどを引き起こします。

とにかく、フォームはテーブルよりもモバイルディスプレイに適応しやすいです。したがって、すべてのデータをモバイルディスプレイで簡単に表示できるようにする必要がある場合は、テーブルよりもフォームの方が適している場合があります。

2. 設計 desktop レイアウト

一般的に、最初にモバイルレイアウトを設計することになっているのは事実ですが、フォームに関しては、データがどのようにグループ化されるかを知る必要があるため、これは最善の方法ではありません。すべてのフィールドを一度に表示できます。これは、フォームのデザインに煩わされる必要のない非常に少ないデータを表示しない限り、モバイルでは実行できないものです。

フォームデザインをモックアップする最速の方法は、InkScape を使用することです。この例では、人事記録を管理するためのシステムを構築します。のモックアップはこちら desktop プロトタイプ：

外側の長方形は、1024 x 768 ピクセルのディスプレイの全スペースを表します。任意の desktop ユーザーが全画面表示モードでない限り、それほど多くのピクセルにアクセスすることはできません (これはめったにありません)。だから私たちの

デザインは 900 x 600 ピクセルで、ほとんどの利用可能な領域に収まるはずです。 desktop 画面。

使用可能な領域の幅が900px未満の場合、2 x 450px列は分割され、450つの連続したXNUMXpx列として表示されます。これにより、少なくともGoogleがすべてのサイトを腕時計の画面に合わせることができるようにすることを要求するまで、モバイル互換性の問題が解決されます。

ディスプレイのほとんどは通常の入力ボックスで構成されているので、退屈に思えるかもしれませんが、実際にはほとんどの場合、これが最良の方法です。固定幅フォントの使用にも注意してください。これにより、フォームデザインの均一性を保つことができます。

広告ⓘ

私たちの列は実際には450pxよりわずかに多く、それぞれ600pxに近いですが、列の幅を強制的に約450pxにしたい場合は、列のサイズを6から5に減らします。しかし、600pxの列はモバイル画面に収まるはずです。とにかく、ラッピングなしのポートレートモードで。

次のコードでレイアウトをテストします。

そして、すべてが順調に見えていることがわかります（一時的に境界線を追加して表示したため）。

Linuxスクリーンルーラーウィジェットは明らかにWebページの一部ではありませんが、小さいディスプレイで列が大きく壊れないことを示すためにあります。さまざまな一般的な画面幅で何が起こるかを見てみましょう。

3.カスタム入力サイズとラベル位置の作成

カスタムCSSを追加せずに、すべてをデフォルトのままにしておくと、入力コントロールの最初の行を追加すると次のようになります。

これは、各入力のラベルがデフォルトで入力の左側にあるため、および入力コントロールにカスタムの幅を設定していないために発生します。 CSSで両方の問題を修正できます。

ここで、label要素のdisplayプロパティを「block」に設定し、FirstとLastのフィールドをクラス「in40w」に設定し、フィールドMIをクラス「in10w」に設定すると、すべてがはるかに見栄えが良くなります。

ご覧のとおり、見た目は良くなっていますが、レイアウトは正しくありません。これで箱が積み重ねられました。したがって、これを修正する方法は、label要素をまったく使用することをやめることです。なぜなら、実際にはそれを必要としないからです。適用するだけです 40wで & 10wで クラスに加えて、新しいクラスを左の.

これを適用すると、以前に見た問題が次のように修正されます。

しかし、これはSSNフィールドのための十分な余地を残していません。これは、左の列が予想よりも大きいため、実際には40％がこれらのフィールドに必要なスペースよりも大きいため、実際にそれらを切り捨てることができます 30wで、そしてミドルフィールドは必要以上に大きいので、 5wで。ここで何が起こるかです：

これで、SSNフィールドを追加するための十分な余地ができました。これにより、入力フォームの最初の行が完成します。これらすべての詳細を平滑化した後、左側の列の残りの部分を構築することは非常に簡単です。これで一時的な境界線を取り除くことができ、列に正しい背景を適用することもできます。フォームの特別な領域に到達する前のパネルの上半分は次のとおりです。

この段階でいくつかのことが起こりました。 235,235,246つ目は、列の背景色を設定する簡単な部分（rgb（427））です。ここには表示されていませんが、すべての入力のテキスト色は＃4DBXNUMXに設定されており、フォントの太さは目の疲れを減らすために太字に設定されました。データ入力を高速化し、エラーを減らすために、CSSのtext-transformプロパティを使用してテキストが自動的に大文字に変換されるように設定されました。

コントロールの配置をより複雑にし、コントロールがどの表示タイプでも適切な配置を維持できるようにするためには、より多くの検討が必要です。入力の最初の行とそのラベルに使用されている手法はすでに見ました。このテクニックは、入力の間に追加のスペースが必要ない場合に機能しますが、スペースを追加する必要がある場合は、別のテクニックを使用することをお勧めします。

この他の手法では、メイン列内にネストされた列の行を作成します。これにより、コントロールの間隔を適切に保つことができます。列の数とそのサイズは、各コントロールセットの要件に応じて変わります。すべてが responsiveしたがって、列のサイズが変更されると、列内のすべてが変更に合わせてサイズ変更を試みます。これは視覚障害のあるユーザーにとって朗報です。ディスプレイの倍率を拡大でき、他のユーザーと同じようにすべてが正しく整列されるからです。

左の列のより複雑な部分に移ると、モックアップで概説されている元のコンセプトは、実装するのが難しい構造を要求していました。幸い、標準のチェックボックスを使用すると、資格パネルのデータがXNUMX倍になる可能性があることに気付きました。これにより、レイアウトの複雑さの問題がうまく解決されました。

特別なセクションの周りの明るいパネルは、通常の Bootstrap ウェルです。宗教データを入力するには、事前に定義された正式な宗教 (「その他」を含む) のセットリストから選択する必要があります。右側の列の開発はさらに簡単で、左側の列の最初のコントロールセットと同じテクニックを使用して、コントロールを表にまとめました。 format、ただしテーブルは使用しません。

このプロジェクトが成功するためには、完璧なものを提供する必要がありました responsiveすべての公式ディスプレイサイズに対応します。結果がどうなるか見てみましょう。最初にフル解像度バージョンで：

それは私たちが満足できるプロトタイプに十分近いです。実際、それはさらに改善です。では、 responsive ページのさまざまなセクションのそれぞれでのレイアウト：

ブートストラップとHTML5により、フォーム開発はこれまでになく迅速かつ簡単になりましたが、多くの開発者は、フォームを複雑にしすぎることでこの進歩を弱体化させています（プロジェクトに必要なためではなく、使用するために特別なHTML5フォーム要素を使用する）、そして利用しようとさえしない完全に一次元のフォームを作成することによって responsive デザイン。少しの注意と余分な作業で、任意のデータを任意のサイズの画面でより見やすくすることができます。

最小画面サイズの縦レイアウトで最小画面サイズにいくつかのマイナーな不具合が発生する可能性があります（このプロジェクトの場合、最初の行のMiddle Initialフィールドは理想的な値よりも少し小さいです）が、モバイルユーザーは一般にこれは、スマートフォンを適切に保持しない場合のトレードオフであることを受け入れます。

正しく行うと、データフォームは次のようになります。