意外と知らないシリーズです。

HTMLの<input>や<button>に次の属性が指定出来るのをご存知ですか？

formaction

formenctype

formmethod

formnovalidate

formtarget

これらの属性を「フォームの送信ボタン」に設定をすると、フォーム送信時に<form>のactionやmethodなどをボタンによって切り替える事が出来ます。

実際の書き方としては、次の様な感じです。

<input type="submit" formaction="test.php" value="送信ボタン">
<!-- または -->
<button type="submit" formaction="test.php">送信ボタン</button>

それぞれの属性で何が出来るのかを見てみましょう。

formaction

フォーム送信先URLを指定します。

<input>や<button>のformaction属性は、<form>のaction属性よりも優先されます。

指定出来る<input>のtype属性は、submitとimageになります。<button>のtype属性は、submitとなります。

サンプルコード

<input type="submit" value="送信" formaction="フォーム送信先URL">

<input type="image" src="submit.jpg" alt="送信" formaction="フォーム送信先URL">

<button type="submit" formaction="フォーム送信先URL">送信</button>

formenctype

フォーム送信のエンコード・タイプを指定します。

<form>のmethod属性が「post」の場合に使用します。

<input>や<button>のformenctype属性は、<form>のenctype属性よりも優先されます。

指定出来る<input>のtype属性は、submitとimageになります。<button>のtype属性は、submitとなります。

主に指定するエンコード・タイプ

application/x-www-form-urlencoded

multipart/form-data

text/plain

サンプルコード

<input type="submit" value="送信" formenctype="エンコード・タイプ">

<input type="image" src="submit.jpg" alt="送信" formenctype="エンコード・タイプ">

<button type="submit" formenctype="エンコード・タイプ">送信</button>

formmethod

フォーム送信のHTTPメソッドを指定します。

<input>や<button>のformmethod属性は、<form>のmethod属性よりも優先されます。

指定出来る<input>のtype属性は、submitとimageになります。<button>のtype属性は、submitとなります。

サンプルコード

<input type="submit" value="送信" formmethod="HTTPメソッド">

<input type="image" src="submit.jpg" alt="送信" formmethod="HTTPメソッド">

<button type="submit" formmethod="HTTPメソッド">送信</button>

formnovalidate

フォームの入力内容の検証（バリデーション）を無効にするかどうかを指定します。

<input>にrequired属性を付けていた場合、入力がない状態だとバリデーションエラーが表示されます。そのバリデーションを無効にする事が出来ます。

<input>や<button>のformnovalidate属性は、<form>のnovalidate属性よりも優先されます。

指定出来る<input>のtype属性は、submitとimageになります。<button>のtype属性は、submitとなります。

サンプルコード

<input type="submit" value="送信" formnovalidate>

<input type="image" src="submit.jpg" alt="送信" formnovalidate>

<button type="submit" formnovalidate>送信</button>

formtarget

フォーム送信先の開き方を指定します。

<input>や<button>のformtarget属性は、<form>のtarget属性よりも優先されます。

指定出来る<input>のtype属性は、submitとimageになります。<button>のtype属性は、submitとなります。

主に指定する開き方

_blank　＝　新規ウィンドウに開く

_self　＝　現在のウィンドウ、現在のフレームに開く

_parent　＝　親ウィンドウ、親フレームに開く

_top　＝　ウィンドウ全体に開く。フレームは解除する

ウィンドウ名　＝　指定したウィンドウ名のウィンドウに開く

フレーム名　＝　指定したフレーム名のフレームに開く

サンプルコード

<input type="submit" value="送信" formtarget="開き方">

<input type="image" src="submit.jpg" alt="送信" formtarget="開き方">

<button type="submit" formtarget="開き方">送信</button>

何が出来るのかはここまで。

では、これらを使用して、どんな事が出来るか見てみましょう。

例として….こんな機能を実装するします。

一つのフォームでユーザの削除またはユーザ名の変更が出来る。

この機能を実装するのに

formactionやformmethodを使用しないパターンだと、<input>のname属性で判断し、保存なのか削除なのかを判定するパターンが多いと思います。

HTMLで言うと、次の様な感じです。

<form action="" method="">
     <label>ユーザ名</label>
     <input type="text" name="username" value="">

     <input type="submit" name="delete" value="入力されたユーザ名を削除">
     <input type="submit" name="save" value="ユーザ名を変更して保存">
</form>

name属性がdeleteかsaveで判断するといった感じです。

formaction属性を使用すれば、それぞれ保存や削除のページにフォーム送信する事が出来ます。

HTMLで言うと、次の様な感じです。

<form action="" method="">
     <label>ユーザ名</label>
     <input type="text" name="username" value="">

     <input type="submit" value="入力されたユーザ名を削除" formaction="delete.php">
     <input type="submit" value="ユーザ名を変更して保存" formaction="save.php">
</form>

今まではこれをJavaScriptで行っていた人も多いはずです。

今後はJavaScriptを書かずにシンプルになりそうですね。

以上になります。