お問い合わせ、支払い、サインアップなど、フォームを実装するためのHTMLとCSSのテンプレート -Boilerform
Post on:2018年2月1日
sponsors
フォームを実装するのが苦手、という人は少なくないと思います。
お問い合わせフォーム、支払いフォーム、サインアップフォームなど、さまざまなプロジェクトで利用されるフォームを実装するのに役立つHTMLとCSSで制作されたテンプレート集を紹介します。
Boilerformのデモ
デモではフォームに利用するさまざまな要素のパターン、それらを組み合わせて実装されたお問い合わせや支払いフォームを確認できます。
まずは、フォームのパターン ライブラリから。
「Input Field」では、サイズ、プレースホルダー、バリデーションのステータスのさまざまなバリエーションを持つ一般的な入力フィールドが揃っています。ユーザーがデータをできるだけ効率的に入力するのに役立つ属性が追加されています。
プロジェクトで利用されるさまざまなフォームのデモも公開されています。
Boilerformではいくつかの視覚的調整を加えてネイティブなHTMLの検証機能も備えています。表示メッセージは、データ属性を使用してカスタマイズすることができます。
Boilerformの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" media="all" href="https://rawgit.com/hankchizljaw/boilerform/master/dist/css/boilerform.min.css" /> </head> |
Step 2: HTML
フォームを実装するためのラッパーを用意します。
|
1 2 3 |
<div class="boilerform"> <!-- フォームの要素はココに実装 --> </div> |
あとは、パターン ライブラリやデモから必要な要素をコピペします。
|
1 2 3 4 5 6 |
<div class="boilerform"> <label for="" class="c-label">A label for a field</label> <input class="c-input-field" value="fdsfds" /> <button class="c-button">A button</button> </div> |
sponsors
