フォーム
フォーム
http://foundation.zurb.com/docs/components/forms.html
Foundationではフォーム用のクラスセットがいくつか用意されています。
- カラムをうまく使うことで、インラインラベル（ラベルと入力フォームが1行に）も可能
- span.postfixで指定すると入力フィールドに繋げて接頭語、接尾語を指定できます
- 同様に入力フィールドに繋げてボタンを割り当てることも可能
- 各部に.errorを割り当てるとエラー時の表示が可能です。
- 全体をfieldset legendで囲むことでフィールドセットを定義することができます。
↓結果
カスタムフォーム
http://foundation.zurb.com/docs/components/custom-forms.html
カスタムフォームは、ラジオボタンやチェックボックスなど、ブラウザデフォルトの表示をFoundationオリジナルの表示に変えるものです。
カスタムラジオボタン
inputタグは用意しつつもstyleでdisplay:noneを指定し、spanでラジオボタン部分を構築します。
form.customで全体を囲みます。
↓結果
チェックボックスも基本的に同じです。
↓結果
カスタムセレクトボックス
select#customDropdownを指定します。
表示のみで、選択できない部分はoptionにdisabled属性を指定します。
↓結果
セレクトボックスにサイズのクラスを付けることで、セレクトボックスのサイズを指定できます。
接頭／接尾付加カスタムフォーム
前項のフォームでも入力フォームにラベルやボタンを付与する方法がでてきましたが、同じようにセレクトボックスを付けることができます。
↓結果