HTMLのformタグ【現役エンジニアが解説】
今回は、HTMLのformタグについて、その役割と書き方に分け、簡単に解説していきます。
formタグの役割
formタグはinput要素等に入力された情報をサーバに送信するためのタグです。
formタグのaction属性には情報の送信先のURLを、method属性には送信メソッドを指定します。
<form name="hogeform" action="send.php" method="POST"></form>
上記のコードでは、POSTの送信メソッドでsend.phpという相対パスのURLに送信するためのformを表示しています。
formタグの書き方
formタグ内には通常、入力可能なinputタグやtextareaタグ、selectタグ等を書き入れます。
また、これらだけでは送信することができないため、type属性がsubmitのinputタグのボタン等も配置します。
<form name="hogeform" action="send.php" method="POST">
<div>ご要望：</div>
<textarea name="detail" rows="3" cols="40"></textarea>
<div><input type="submit" value="送信"></div>
</form>
上記のコードでは、formタグの中にtextareaタグとtype属性がsubmitのinputタグを置き、ご要望フォームを表示しています。
JavaScriptからformを送信させる方法
formタグ内の入力情報は通常、type属性がsubmitのinputタグのボタン等を使って送信します。
しかし、JavaScriptによる送信も可能で、”document.フォームのname属性の値.submit();”で送信ができます。
document.hogeform.submit();
上記のコードでは、先程のname属性にhogeformという値を持つformタグ内の入力情報を、JavaScriptから送信(submit)しています。