このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

input”要素~“formenctype”属性HTML5で追加

記事Sep.16th, 2020
フォームが送信するデータの形式を指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

formenctype”属性について

formenctype”属性はtype="submit"もしくはtype="image"を指定したinput”要素フォームを“POST”方式で送信したときのデータの形式を指定します。

button”要素input”要素の“formenctype”属性が優先されます。

多くの場合、フォームが送信するデータの形式はform”要素enctype”属性で指定されますが、input”要素に“formenctype”属性を指定した場合はボタンごとに送信するデータの形式を指定することができます。

form”要素enctype”属性が指定されている場合は“formenctype”属性の値が優先されます。

指定できる値

属性値 説明
application/x-www-form-urlencoded 入力されたデータをURLエンコードして送信
multipart/form-data 入力されたデータをマルチパートデータとして送信
text/plain 入力されたデータをプレーンテキストとして送信

サンプルコード

<form method="post" action="sampleform.php" target="_blank">
<fieldset>
<label>好きな果物:
<select name="fruit">
<option value="甘蕉">甘蕉</option>>
<option value="林檎">林檎</option>
<option value="甜瓜">甜瓜</option>
<option value="苺">苺</option>
<option value="桃">桃</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>一番好きな果物</legend>
<p><label>果物の画像:<input type="file" name="photo" accept=".png,.jpg,.jpeg,image/png,image/jpeg"></label></p>
</fieldset>
<fieldset>
<legend>あなたの情報</legend>
<p><label>居住地域:<input type="text" name="area"></label></p>
<p><label>年齢:<input type="number" name="age"></label></p>
</fieldset>
<p><input type="submit" formenctype="multipart/form-data" value="登録"></p>
</form>
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク