CSSでフォームの実装に悩んだら! さまざまなフレームワークで実装されたフォームのライブラリ -HeroTofu

Tailwind CSSやBootstrapやBulmaなど、CSSのさまざまなフレームワークで実装されたフォームのライブラリを紹介します。

それぞれのフレームワークを利用している時はもちろん、フレームワークの比較検討にも役立ちます。

CSSのさまざまなフレームワークで実装されたフォームのライブラリ -HeroTofu

HTML Forms Library

HTML Forms Libraryとは

HTML Forms LibraryはTailwind CSSやBootstrapやBulmaなど、さまざまなCSSのフレームワークで実装されたフォームのライブラリです。テンプレートを使用して、さまざまなフォームを簡単に実装できます。

ライセンスは、下記の通りです。

  • 商用プロジェクトで無料で使用できます。
  • 帰属は素晴らしいですが、必須ではありません。
サポートしている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で実装したシンプルなコンタクトフォーム

サイトのキャプチャ

Bulmaで実装したシンプルなコンタクトフォーム

サイトのキャプチャ

Foundationで実装したシンプルなコンタクトフォーム

各フレームワークで比較してみるのも面白いですね。

サイトのキャプチャ

Materializeで実装したシンプルなコンタクトフォーム

HTML Forms Libraryには、さまざまなフォームが用意されています。

サイトのキャプチャ

フォームの一覧

サイトのキャプチャ

フォームの一覧

サイトのキャプチャ

フォームの一覧

sponsors

top of page

©2021 coliss