icon
icon

HTMLでフォームに送信ボタンを作る方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLでフォームに送信ボタンを作る方法について解説しています。送信ボタンを生成するときは、inputタグのtype属性でsubmitの値を指定します。フォーム作成の基本となる要素なので必ず覚えておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

ここでは、HTMLの入力フォームに必要な送信ボタンの設置方法について解説していきます。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

フォームに送信ボタンを作る方法について詳しく説明していくね!

大石ゆかり

詳しく知りたいです。よろしくお願いします!

 

送信ボタンの役割

お問い合わせやアンケートフォームには、入力エリアや選択ボタンなどがあります。送信ボタンには、ユーザーによって入力または選択された値を送信する役割があります。

メールを書いて送信ボタンをクリックするのと同様に、HTMLのフォームでは入力後に「送信ボタン」をクリックすることで情報を送信することが可能です。

例:TECHACADEMYの無料体験申し込みフォーム

送信ボタンは、「送信」という表記があるとは限りません。上記のように「勉強を始める」や「〇〇へ申し込む」など、よりユーザーに伝わりやすい表現で表記することもあります。

 

submit属性値について

submit属性値はhtmlページに対して送信ボタンの役割をもったボタンを作成するたの属性値です。具体的には、<input>タグのtype属性をsubmitにすることで、送信の役割を持ったボタンを作成することができます。

以下、実際に送信ボタンを作るためのコードとなります。

HTML:

<input type="submit">

この場合は下記のように、「送信」ボタンが表示されます。

 

先ほどの無料体験申し込みフォームのようにボタンのテキストを「送信」以外のものに変えたい場合は、value属性を使用します。

HTML:

<input type="submit" value="勉強を始める">

 

[PR] Webデザインで副業する方法とは

入力フォームに送信ボタンを作ってみよう

無料体験申し込みフォームを例にHTMLを書いてみます。

HTML:

<html>
  <head>
    <meta charset="utf-8">
    <title>ラジオボタン</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <form>
      氏 名:<input type="text" name="苗字"> <input type="text" name="名前"><br>
      氏 名(カナ):<input type="text" name="ミョウジ"> <input type="text" name="ナマエ"><br>
      メールアドレス:<input type="email" name="メール"><br>
      <input type="submit" value="勉強を始める">
    </form>
  </body>
</html>

 

送信ボタンがクリックされると、<input>タグのname属性の値と、入力した値がセットになって、送信されます。

作成したフォームに上記のように入力して、送信ボタンをクリックした場合、下記のような情報を送信することができます。

送信される情報の例:
[name属性の値=入力された値]
苗字=煌木
名前=太郎
ミョウジ=キラメキ
ナマエ=タロウ
メール=kirameki@techacademy.jp

こうして、フォームを設置することで、申し込んできたユーザーの名前やメールアドレスなどの情報を取得することができます。また、デフォルトの送信ボタンでは、クリックできるエリアが小さく操作性がよくありません。CSSでわかりやすく、クリックしやすいデザインに設定すると良いでしょう。

submitをCSSでおしゃれに設定する方法を現役エンジニアが解説を参考に送信ボタンをカスタマイズしてみてください。

 

監修してくれたメンター

メンター 橋本真理

フリーのweb/グラフィックデザイナー

会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動、TechAcademyではWebデザインコース・WordPressコースを担当しています。

ラジオとバナナが好き。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。