カテゴリー: HTML5

（例）formタグの使用方法

See the Pen
form by linlin (@linlin098765)
on CodePen.

<form action="◯◯.php" method="post">
<p><label>氏名：<input type="text" name="name" size="20"></label></p>
<p><label>血液型：
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
</label></p>
<fieldset>
<legend>性別</legend>
<p><label><input type="radio" name="sex" value="male">男性</label></p>
<p><label><input type="radio" name="sex" value="female">女性</label></p>
</fieldset>
<fieldset>
<legend>習慣</legend>
<p><label><input type="checkbox" name="hobby" value="tre">筋トレ</label></p>
<p><label><input type="checkbox" name="hobby" value="reading">読書</label></p>
<p><label><input type="checkbox" name="hobby" value="music">音楽</label></p>
<p><label><input type="checkbox" name="hobby" value="travel">旅行</label></p>
</fieldset>
<p><label>その他：<br><textarea name="comments" rows="2" cols="40"></textarea></label></p>
<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
</form>

formタグとは？-HTML

　formタグとは、データの入力・送信フォームを作成するためのタグになります。
　formタグの子要素として、inputタグやselectタグ、texetareaタグを配置し、送信ボタンを押下することで入力・選択されたデータをサーバー側へ送信することが可能です。

formタグの属性

• action属性
  送信先のURLを指定
• method属性（データ送信方法の指定）
  get …… 送信内容をURLのクエリ(?以降)として送信（初期値）
  post …… 送信内容をデータとして送信
• enctype属性（送信データの形式を指定）
  application/x-www-form-urlencoded …… 複数の「フィールド名=入力内容」を&でつないだ形式のデータ（初期値）
  multipart/form-data …… ファイルを含むデータ
  text/plain …… テキストのみ
• accept-charset属性
  文字コードを指定（UTF-8、Shift_JIS等）
• name属性
  フォームの名前を指定、他フォームと重複不可
• autocomplete属性
  入力欄の自動補完の有無。初期値は”on”
• novalidate属性
  入力されたデータの妥当性があるか判断しない指定