DAY15 HTML メソッド

TOKHEE·2024년 4월 8일

ウェブフォームは、ユーザーから情報を収集するために不可欠な部分です。

1. xxxxx_field(特定タイプの<input>要素を生成)

  • xxxxx_fieldは、様々なタイプの<input>要素を生成するメソッドです。ここでのxxxxxは、inputタグのtype属性値に置き換えられます。例えば、text_fieldtype="text"email_fieldtype="email"を生成します。
  • これらのメソッドは主に、単一行の入力が必要な場合に使用されます。
  • ユーザー名、メールアドレス、パスワードなどの入力を受け取るのに適しています。

text_field :user, :name, class: "user-class", id: "user_name"
email_field :user, :email, placeholder: "you@example.com"
password_field :user, :password, autocomplete: "current-password"
  • 上の例では:userはモデル名、:name:email:passwordは該当モデルの属性名です。
  • 追加的にHTML属性(例:classidplaceholderautocomplete)をメソッドに渡すことができます。

2. text_area(マルチラインテキスト入力<textarea>要素を生成)

  • text_areaメソッドは、マルチラインテキスト入力用の<textarea>要素を生成します。
  • ユーザーが複数行のテキストを入力できます。例えば、ユーザーの住所、自己紹介、コメントを入力するフィールドに使用されます。

text_area :user, :bio, cols: 40, rows: 10, class: "bio-class"
  • :bioは、ユーザーの自己紹介や略歴を入力するフィールドです。
  • colsrows属性でテキストエリアのサイズを調整できます。

3. radio_button(ラジオボタンを生成)

  • radio_buttonメソッドは、ユーザーが複数の選択肢の中から一つだけを選べるラジオボタンを生成します。
  • 同じ名前を共有するラジオボタンの中から一つだけが選択可能です。

radio_button :user, :gender, "male"
radio_button :user, :gender, "female"
  • ユーザーが'male'または'female'のいずれか一つを選択できます。
  • すべてのラジオボタンには同じname属性値を使用し、これによってグループ化されます。

4. check_box(チェックボックスを生成)

  • check_boxメソッドは、複数の項目の中から一つまたは複数を選べるチェックボックスを生成します。
  • 各チェックボックスは独立して選択可能です。

check_box :user, :terms_of_service
check_box :user, :newsletter_subscription
  • 最初のチェックボックスはサービス規約への同意を、二つ目のチェックボックスはニュースレター購読への同意をユーザーに求めます。

5. select(選択ボックスを生成)

  • selectメソッドは、ドロップダウン形式の選択ボックスを生成します。
  • ユーザーは提供されたオ

プションの中から一つを選択できます。

  • multiple: trueオプションを使用すると、複数選択可能なリストボックスに変換されます。

select :user, :country, options_for_select([["United States", "US"], ["Canada", "CA"]])
  • options_for_selectは、ドロップダウンオプションを生成するために使用されます。
  • 各オプションは表示するテキストとそのオプションの値で構成されます。

0개의 댓글