フォームを適切に設計すると、ユーザーをサポートし、コンバージョン率を高めることができます。1 つの小さな修正が大きな違いを生むことがあります。
以下は、すべてのおすすめの方法を取り入れたシンプルなお支払い方法の例です。
以下は、すべてのベスト プラクティスを示すシンプルな住所フォームの例です。
たとえば、次の HTML は 1900 年から 2020 年までの誕生年の入力を指定しています。type="number" を使用すると、入力値が min と max で指定された範囲内の数値のみに制限されます。範囲外の数値を入力しようとすると、入力は無効な状態に設定されます。
次の例では、pattern="[\d ]{10,30}" を使用して、スペースを確保しながら有効な支払いカード番号を確保しています。
最新のブラウザでは、email または url タイプの入力に対しても基本的な検証が行われます。
CSS グリッド レイアウト
CSS グリッド レイアウトを使用すると、柔軟なグリッドを簡単に作成できます。
前述のフローティングの例では、パーセンテージで列を作成するのではなく、グリッド レイアウトと、コンテナ内で使用可能なスペースの一部を表す fr 単位を使用できます。
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
グリッドを使用して、適切な数のアイテムを持つ通常のグリッド レイアウトを作成することもできます。画面サイズが小さくなると、使用可能なトラック数は少なくなります。
以下のデモでは、各行に収まる数のカードを使用しています。最小サイズは 200px です。
複数列レイアウト
レイアウトの種類によっては、複数列レイアウト（マルチコル）を使用できます。column-width プロパティを使用すると、レスポンシブな列数を作成できます。以下のデモでは、別の 200px 列のためのスペースがある場合に、列が追加されています。