5.3 フォーム
フォームを生成する
フォームを出力するにはform_tagヘルパーを使います。
<%= form_tag do %>
フォームの中身
<% end %>
生成されるHTMLタグは以下になります。
<form action="/" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token" value="SDliHDadd+f0j/DF1R2b6Ho/bAfV68RBSd1WMxbydRIlPP2THCHRZpqKj6g7JHYi4yE/qqgP1RsYIxNLznipkw==">
フォームの中身
</form>
チェックボックスを生成する
チェックボックスを生成するにはcheck_box_tagを使います。
check_box_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<p>経験のある言語は?</p>
<%= check_box_tag(:ruby) %>
<%= label_tag(:ruby, "Ruby") %>
<%= check_box_tag(:python) %>
<%= label_tag(:python, "Python") %>
生成されるHTMLタグは以下になります。
<p>経験のある言語は?</p>
<input type="checkbox" name="ruby" id="ruby" value="1">
<label for="ruby">Ruby</label>
<input type="checkbox" name="python" id="python" value="1">
<label for="python">Python</label>
ラジオボタンを生成する
ラジオボタンを生成するにはradio_button_tagを使います。
radio_button_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<p>一番好きな言語は?</p>
<%= radio_button_tag(:lang, "ruby") %>
<%= label_tag(:lang_ruby, "Ruby") %>
<%= radio_button_tag(:lang, "python") %>
<%= label_tag(:lang_python, "Python") %>
<%= radio_button_tag(:lang, "php") %>
<%= label_tag(:lang_php, "PHP") %>
生成されるHTMLタグは以下になります。
<p>一番好きな言語は?</p>
<input type="radio" name="lang" id="lang_ruby" value="ruby"><label for="ruby">Ruby</label>
<label for="lang_ruby">Ruby</label>
<input type="radio" name="lang" id="lang_python" value="python"><label for="python">Python</label>
<label for="lang_python">Python</label>
<input type="radio" name="lang" id="lang_php" value="php"><label for="php">PHP</label>
<label for="lang_php">PHP</label>
テキストフィールドを生成する
テキストフィールドを生成するにはtext_field_tagを使います。
text_field_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= label_tag(:first_name, "名") %>
<%= text_field_tag(:first_name) %>
<%= label_tag(:last_name, "姓") %>
<%= text_field_tag(:last_name) %>
生成されるHTMLタグは以下になります。
<label for="first_name">名</label>
<input type="text" name="first_name" id="first_name">
<label for="last_name">姓</label>
<input type="text" name="last_name" id="last_name">
テキストエリアを生成する
テキストエリアを生成するにはtext_area_tagを使います。
text_area_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= label_tag(:bio, "自己紹介") %>
<%= text_area_tag(:bio) %>
生成されるHTMLタグは以下になります。
<label for="bio">自己紹介</label>
<textarea name="bio" id="bio"></textarea>
メールアドレスフィールドを生成する
メールアドレスフィールドを生成するにはemail_field_tagを使います。
email_field_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= email_field_tag(:email) %>
生成されるHTMLタグは以下になります。
<<input type="email" name="email" id="email">
パスワード入力ボックスを生成する
パスワード入力ボックスを生成するにはpassword_field_tagを使います。
password_field_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= label_tag(:password, "パスワード") %>
<%= password_field_tag(:password) %>
生成されるHTMLタグは以下になります。
<label for="password">パスワード</label>
<input type="password" name="password" id="password">
隠しフィールドを生成する
隠しフィールドを生成するにはhidden_field_tagを使います。
hidden_field_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= hidden_field_tag(:token, "dj20fu4280ofj083u8") %>
生成されるHTMLタグは以下になります。
<input type="hidden" name="token" id="token" value="dj20fu4280ofj083u8">
ラベルを生成する
ラベルを生成するにはlabel_tagを使います。
label_tag(name属性 [, ラベルコンテンツ] [, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= label_tag(:rails, 'Rails') %>
生成されるHTMLタグは以下になります。
<label for="rails">Rails</label>
ファイルフィールドを生成する
隠しフィールドを生成するにはfile_field_tagを使います。
file_field_tag(name属性 [, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= file_field_tag(:image) %>
生成されるHTMLタグは以下になります。
<input name="image" type="file" />
サブミットタグを生成する
サブミットタグを生成するにはsubmit_tagを使います。
submit_tag([ボタンのテキスト , オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= submit_tag "送信" %>
生成されるHTMLタグは以下になります。
<input type="submit" name="commit" value="送信" data-disable-with="送信">
ボタンタグを生成する
ボタンタグを生成するにはbutton_tagを使います。
button_tag([オプション, HTMLオプション]と記述することができます。HTMLオプションの他に以下のヘルパーのオプションが存在します。
| オプション | |
|---|---|
| :data | data属性 |
| :disabled | ボタンを無効にする |
| :confirm | 確認アラートを表示 |
<%= button_tag "クリック" %>
生成されるHTMLタグは以下になります。
<button name="button" type="submit">クリック</button>
日時選択フィールドを生成する
日時選択フィールドを生成するにはdatetime_field_tagを使います。
datetime_field_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= datetime_field_tag :published %>
生成されるHTMLタグは以下になります。
<input type="datetime-local" name="published" id="published">
月選択フィールドを生成する
月選択フィールドを生成するにはmonth_field_tagを使います。
month_field_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= month_field_tag :published_month %>
生成されるHTMLタグは以下になります。
<input type="month" name="published_month" id="published_month">
日付選択フィールドを生成する
日付選択フィールドを生成するにはdate_field_tagを使います。
date_field_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= date_field_tag :published %>
生成されるHTMLタグは以下になります。
<input type="date" name="published" id="published">
時間選択フィールドを生成する
時間選択フィールドを生成するにはtime_field_tagを使います。
time_field_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= time_field_tag :published_time %>
生成されるHTMLタグは以下になります。
<input type="time" name="published_time" id="published_time">
数値フィールドを生成する
時間選択フィールドを生成するにはnumber_field_tagを使います。
number_field_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= number_field_tag :age %>
生成されるHTMLタグは以下になります。
<input type="number" name="age" id="age">
電話番号フィールドを生成する
電話番号フィールドを生成するにはtelephone_field_tagを使います。
telephone_field_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= telephone_field_tag :phone_numebr %>
生成されるHTMLタグは以下になります。
<input type="tel" name="phone_numebr" id="phone_numebr">
URLフィールドを生成する
URLフィールドを生成するにはurl_field_tagを使います。
url_field_tag(name属性 [, value属性, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= url_field_tag :homepage %>
生成されるHTMLタグは以下になります。
<input type="url" name="homepage" id="homepage">
セレクトボックスを生成する
セレクトボックスを生成するにはselect_tagを使います。
select_tag(name属性, セレクトコンテンツ [, オプション])と記述することができます。オプションにはHTMLのオプションを指定することができます。
<%= select_tag :lang %>
生成されるHTMLタグは以下になります。
<select name="lang" id="lang"></select>
配列・ハッシュからセレクトボックスを生成する
セレクトボックスではoptions_for_selectヘルパーを使ってコンテンツを生成します。
配列で指定する
<%= select_tag :lang, options_for_select([['Ruby', "ruby"], ["Python", "python"]]) %>
ハッシュで指定する
<%= select_tag :lang, options_for_select({ "Ruby": "ruby", "Python": "python" }) %>
いずれも生成されるHTMLタグは以下になります。
<select name="lang" id="lang">
<option value="ruby">Ruby</option>
<option value="python">Python</option>
</select>