HTML/CSS
form
html
送信ボタン

HTMLでinputタグを使って送信ボタンを作る方法を解説

2021/06/27

( 更新日：2022/04/19 )

商品やサービスのプロモーションページには問い合わせフォームがついています。特に、企業のホームページにはカタログの取り寄せや見積もり依頼のためには個別ページとしてフォームだけのページがあります。

ユーザーに入力項目を入れてもらい、最終的に送信ボタンを押すことで入力項目のデータが送られてきます。ユーザーに情報を送ってもらうためには送信ボタンは欠かせません。

本記事ではHTMLで送信ボタンを作る方法を解説します。ボタンを作るためのタグはbuttonとinputがありますが、今回はinputタグを使う方法を解説します。

送信ボタンの役割

送信ボタンの役割は入力されたデータを送信するための役割です。入力ボタンが押されることでユーザーが入力した情報がサーバーに保存されたり、メールとして送信されます。イベントの起点となるため、設置しておかなければ情報を取得することができません。

他にも属性をつけるで、入力情報をHTML内に追加したり、送信データのタイプを指定することも可能です。

Webページに問い合わせページをつけているサイトがほとんどの中、送信ボタンを使えるようになるのは必須のスキルと言えます。

HTMLで送信ボタンの設置方法

inputタグで使う

送信ボタンはinputタグの属性の1つとして設定されています。基本構文は以下の通りです。

<input type="submit" />

type属性をsubmitにすることで「送信」と書かれたボタンがWebページ上に表示されます。また、value属性を加えると、テキストの中身を自由に変えることができます。例えば、「提出」に文字を変えたい場合は、type=”submit”の後に、value=”提出”とします。

inputタグはtypeを変えることで役割を変えることができます。textであれば、テキストボックス、radioならラジオボタンを作ることもできます。送信ボタンとともに覚えておくことをおすすめします。

formタグの中に作る

送信ボタンはformタグの中に作ります。送信フォームを作るために利用します。ユーザーに入力してほしいデータを入力するための、inputタグやtextareaタグを設置し、データ処理、送信をするためのフォームを作ります。

formで設定した送信先やデータ形式は送信ボタンを押すことで反映されて、送信されます。情報をしっかりと送信するためにもformタグの中に送信ボタンを作ることが必要です。

リセットボタンも作れる

typeをresetに変えればリセットボタンを作ることができます。リセットボタンはボタンを押せば入力された文字やラジオボタンやプルダウンを元に戻すことができます。

ユーザーの気が変わって、情報を書き換えたり、一旦やめる場合にはリセットボタンがあることで手間が減ります。リセットされるのは望ましいことではありませんが、修正だけであれば、バックスペースで削除するよりも手軽なため、便利な機能です。

リセットボタンの基本コードは以下の通りです。

<input type="reset" />

valueを属性として設定すれば、ボタンの中の文字を変えることができます。もし、別の用語に置き換えたい場合にはvalueを設定することをおすすめします。

送信ボタンの属性

送信ボタンに属性を指定することでデータ形式やボタンにかかれるテキストを変えることができます。リストを下に挙げるので参考にしてみてください。

Value:ボタンのテキストを設定する
disabled:ボタンを使用できなくする
form:ボタンを押したときにformを指定する
autofocus:送信ボタンにフォーカスを押す
formaction:送信先を指定する。formタグで設定したactionより優先される
formmethod:GETやPOSTを指定する。formタグで設定したmethodより優先される

送信先の指定

送信先の指定はformタグの属性に設定するactionや送信タグのinputタグの属性にformactionを設定することで指定できます。送信先を指定する場合、サーバーを介す必要があるので、PHPなどのサーバーを動かすためのプログラミング言語を使う必要があります。

本当の意味で送信フォームを使いこなすためにはHTMLだけでは不十分です。PHPなどのサーバーサイド言語も必要になることは覚えておくことをおすすめします。

サンプルコード

<body>
  <form action="index.php" method="POST">
    <input type="text" name="name" />
    <input type="radio" name="sex" />男 <input type="radio" name="sex" />女
    <input type="submit" value="送信" />
    <input type="reset" value="リセット" />
  </form>
</body>