CSSでフォームの実装に悩んだら！ さまざまなフレームワークで実装されたフォームのライブラリ -HeroTofu
Post on:2021年11月24日
sponsors
Tailwind CSSやBootstrapやBulmaなど、CSSのさまざまなフレームワークで実装されたフォームのライブラリを紹介します。
それぞれのフレームワークを利用している時はもちろん、フレームワークの比較検討にも役立ちます。
HTML Forms Libraryとは
HTML Forms LibraryはTailwind CSSやBootstrapやBulmaなど、さまざまなCSSのフレームワークで実装されたフォームのライブラリです。テンプレートを使用して、さまざまなフォームを簡単に実装できます。
ライセンスは、下記の通りです。
- 商用プロジェクトで無料で使用できます。
- 帰属は素晴らしいですが、必須ではありません。
サポートしているCSSのフレームワーク
例えば、Tailwind CSSで実装するシンプルなフォームは下記のようになります。CSSはフレームワークのCSSを使用しているので、コピペで簡単に実装できます。
Tailwind CSSで実装したシンプルなコンタクトフォーム: ライトモード
デモはすべてCodePenで公開されているので、HTMLとCSSもオンラインで簡単に変更できます。
HTML Forms Libraryの使い方
HTML Forms Libraryの使い方は、簡単です。
サイトにアクセスし、フォームの一覧からフォームを選びます。フォームはシンプルなコンタクトフォームをはじめ、ログインやニュースレーター、入力項目も名前・メール・パスワード・メッセージ・電話番号・年齢・誕生日・郵便番号などが用意されています。
フォームの各テンプレートは、以下のCSSフレームワークで実装されています。
- Tailwind CSS
- Bootstrap 5
- Bootstrap 4
- Bulma
- Foundation
- Materialize
Tailwind CSSで実装したシンプルなコンタクトフォーム: ライトモード
フォームは、ダークモードにも対応しています。
Tailwind CSSで実装したシンプルなコンタクトフォーム: ダークモード
Bootstrap 5とBootstrap 4の両方が使用できます。
Bootstrap 5で実装したシンプルなコンタクトフォーム
Bootstrap 5とBootstrap 4の見た目は同じですが、class名が異なっています。
Bootstrap 4で実装したシンプルなコンタクトフォーム
各フレームワークで比較してみるのも面白いですね。
Materializeで実装したシンプルなコンタクトフォーム
HTML Forms Libraryには、さまざまなフォームが用意されています。
sponsors
