formタグ

Tag:

フォームの設定方法、利用できる部品、属性の使い方について紹介します。

フォームエリアの設定

ソース
<form action="#" method="post" enctype="multipart/form-data">
    <!-- フォーム部品を設定します。 -->
</form>

action:データ送信先を指定します。
method:get,postを指定します。
enctype:ファイル送信する際に指定します。ファイル送信しない場合、必要ありません。

フォーム部品

フォームタグ内で利用できる部品を下記に示します。

テキスト

ソース
<input type="text" name="name1">
表示

パスワード

ソース
<input type="password" name="name2">
表示

択一の選択肢

ソース
              <label><input type="radio" name="name3" value="1">value1</label>
              <label><input type="radio" name="name3" value="2" checked>value2</label>
              <label><input type="radio" name="name3" value="3">value3</label>
              <label><input type="radio" name="name3" value="4">value4</label>
表示



複数選択可能な選択肢

ソース
              <label><input type="checkbox" name="name4[]" value="1">value1</label>
              <label><input type="checkbox" name="name4[]" value="2" checked>value2</label>
              <label><input type="checkbox" name="name4[]" value="3" checked>value3</label>
              <label><input type="checkbox" name="name4[]" value="4">value4</label>
表示



プルダウン形式

ソース
              <select name="name5">
                <option value=""></option>
                <option value="1">value1</option>
                <option value="2" selected>value2</option>
                <option value="3">value3</option>
                <option value="4">value4</option>
                <option value="5">value5</option>
                <option value="6">value6</option>
              </select>
表示

リスト形式

ソース
              <select name="name6" size="3">
                <option value=""></option>
                <option value="1">value1</option>
                <option value="2">value2</option>
                <option value="3">value3</option>
                <option value="4">value4</option>
                <option value="5">value5</option>
                <option value="6">value6</option>
              </select>
表示

複数行入力可能なテキスト

ソース
<textarea name="name7" rows="4"></textarea>
表示

ファイルアップロード

ファイルアップロードする場合、親のform要素の属性にenctype=”multipart/form-data”を設定する必要があります。

ソース
<input type="file" name="name8">
表示

隠し項目

ソース
<input type="hidden" name="name9" value="隠しデータ" />
表示

送信ボタン

ソース
<input type="submit" name="name10" value="送信">
表示

フォーム部品[HTML5]

HTML5で利用できるようになった部品を下記に示します。

email

ソース
<input type="email" name="name11">
表示

ブラウザ対応状況
http://caniuse.com/#feat=input-email-tel-url

URL

ソース
<input type="url" name="name12">
表示

ブラウザ対応状況
http://caniuse.com/#feat=input-email-tel-url

数値

ソース
<input type="number" name="name13">
表示

ブラウザ対応状況
http://caniuse.com/#feat=input-number

ソース
<input type="color" name="name14">
表示

ブラウザ対応状況
http://caniuse.com/#feat=input-color

日付

ソース
<input type="date" name="name15">
表示

ブラウザ対応状況
http://caniuse.com/#feat=input-datetime

時刻

ソース
<input type="time" name="name16">
表示

ブラウザ対応状況
http://caniuse.com/#feat=input-datetime

disabled属性とreadonly属性

disabled属性

ソース
<input type="text" disabled="disabled" name="name16" value="disabled属性です">
表示

※注意
disabled属性をしたフォームは、Form送信時に値を送信しません。

readonly属性

ソース
<input type="text" readonly="readonly" name="name17" value="readonly属性です">
表示

属性[HTML5]

placeholder属性

入力例などを表示して、ユーザーの入力を手助けします。

ソース
<input type="text" name="name18" placeholder="XXX">
表示

required属性

入力必須にします。

ソース
<form action="#" method="get">
  <input type="text" name="name19" required>
  <input type="submit" value="送信">
</form>
表示


スポンサーリンク