レッスン内容
フォームのラジオボタンは、いくつかの選択肢からひとつの項目を選ぶ際に使われます。ラジオボタンはチェックボックスとは違い、複数の中からひとつしか選べません。
このレッスンでは、次のことを学習します。
- ラジオボタンの設置と設定方法
- ラジオボタンのチェックボックスとテキストの間隔を開ける方法
- チェック済みのボタンデザインの変更方法
- 作動しているか確認する方法
ラジオボタンの設置と設定方法
ラジオボタンは、Add Elements の Forms からフォームブロックに追加することができます。追加できたら、Element Settings から設定をしていきます。
Group Name - 同じグループネームに設定した項目が、ひとつの選択肢のまとまりになります
Choice Value - フォーム送信された後のデータ内で、どの項目か識別できるように値を入れます。例えば、サイト訪問者が好みの色の選択している場合、ラジオ ボタンの色の選択値として「赤」と記入します。そうすると、このフォームが送信された際、データでどの色にチェックを入れたか確認できます。
Style - チェックボックスの見た目をデフォルトから変更したい場合は、StyleをCustomにしておきます。デザインの変更は他と同様に、Styleパネルから好みのデザインに変更が可能です。
Required - ラジオボタンを必須項目として設定します。グループ内のラジオボタンのうち 1 つだけRequiredにチェックをしておけば大丈夫です。
ラジオボタンのチェックボックスとテキストの間隔を開ける方法
ラジオボタンにはデフォルトで、フィールドに20pxの左パディング、ボックスに-20pxの左マージンが当たっています。
この二つの値を大きくすることで、ボックスとテキストの間にスペースを作ることができます。
例えば、フィールドに40pxの左パディング、ボックスに-40pxの左マージンを当てると、倍の間隔を作ることができます。
チェックボックス
チェックフィールド
チェック済みのボタンデザインの変更方法
チェック済みの状態は、これらの要素が選択されたときにどのように見えるかをデザインできます。
チェックされている際のデザインの変え方は、クラス横の下三角からChecked を選択した状態でデザインをしていきます。
作動しているか確認する方法
チェックボタンがしっかり作動しているか確認するには、サイトをPublishして、実際のサイトで確認する必要があります。