onreset属性 onsubmit属性

Updated / Published

onreset属性と onsubmit属性は form要素 に記述し、それぞれリセットボタンと送信ボタンを押したときに起動するスクリプトを指定するイベント属性(イベントハンドラ)です。どちらも起動するスクリプトは、属性値に "return 関数名()" と書かなければいけません。フォームの入力内容の確認、またはその内容をリセットする場合の確認に有用です。

onsubmit属性はフォームのコントロール部品の送信ボタンとなる "submit" が押されたときに起動するスクリプトを指定します。"true" が返されるとフォームのアクションを実行し、"false" が返されると実行を中止します。onreset属性はフォームのコントロール部品のリセットボタンとなる "reset" が押されたときに起動するスクリプトを指定します。"true" が返されるとフォームのコントロール部品に書き込んだ内容や選択したリストなどをリセットし、"false" が返されると内容のリセットを中止します。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
必須
-
非推奨
-
属性値
スクリプト

onreset属性 onsubmit属性を指定できる要素型

F

onreset属性 onsubmit属性のサンプル

次のスクリプトではユーザが入力した内容を送信時に確認し、リセット時にはリセットして良いのかを確認するダイアログ(confirm)を表示します。ユーザにダイアログで実行して良いかどうかの確認を問うてから、送信やリセットされるようにしたい場合はreturn構文を用いる必要があることに注意してください。onreset属性, onsubmit属性にreturn構文が併用されていなければ、リセットや送信が即座に実行されてしまうことになります

<script type="text/javascript">
function check() {
item1="スポーツ:";
for(i=0;i<3;i++) {
if(document.sample.sport[i].checked){
item1=item1+document.sample.sport[i].value;} }
item2="音楽:";
for(i=0;i<3;i++){
if(document.sample.music[i].checked){
item2=item2+document.sample.music[i].value;} }
item3="映画:";
slct=document.sample.movie.selectedIndex;
item3=item3+document.sample.movie.options[slct].value;
item4="最後に一言:"+document.sample.comment.value;
return confirm(item1+"\n"+item2+"\n"+item3+"\n"+item4);}
</script>
...
<form name="sample" action="xxx.cgi"
onsubmit="return check2()"
onreset="return confirm('内容をリセットしても良いですか?');">
<p>好きなスポーツ:
<input type="radio" name="sport" value="サッカー">サッカー
<input type="radio" name="sport" value="野球">野球
<input type="radio" name="sport" value="テニス">テニス</p>
<p>好きな音楽:
<input type="radio" name="music" value="クラッシック">クラッシック
<input type="radio" name="music" value="ポップス">ポップス
<input type="radio" name="music" value="ロック">ロック</p>
<p>好きな映画: <select name="movie">
<option value="洋画">洋画</option>
<option value="邦画">邦画</option>
</select></p>
<p>最後に一言: <input type="text" name="comment"></p>
<p><input type="submit" value="送信">
<input type="reset" value="リセット"></p>
</form>