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