HTMLのformタグ【現役エンジニアが解説】

PROGRAM

今回は、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)しています。