• このエントリーをはてなブックマークに追加
  • LINEで送る

グリッドシステムを使ったより現実的なフォーム

USのフォームなんか見てると、項目とフォームが改行されているケースをよく見かけますが、日本だと左右に配置されているケースが多いと思います。

フォームの項で書いたサンプルは改行されているものとインラインでしたが、ここではよく見かけるお問合せフォームをグリッドシステムで書いてみます。

お名前
フリガナ
都道府県
ご住所
Email
ご意見をどうぞ

項目をcol-sm-2、フォームパーツをcol-sm-10としています。

お名前のようにテキストフォームのサイズを変更したい場合はform-inlineをclassに加え、sizeで調整します。

好みですが、デフォルトだとフォームパーツが大きく感じるので、input-smで小さくしています。

あと、col-sm~には余白が無いのでフォーム同士が上下でくっついてしまいます。 サンプルではstyle~で指定していますが、col-sm-10に対して余白が出来るようCSSを上書きすると良いかもです。

お名前
フリガナ
都道府県
ご住所
Email
ご意見をどうぞ