【HTML初心者入門】送信ボタンが作れるsubmitとは?使い方も解説!

2021.09.09

htmlページの中に送信ボタンを配置できる機能を持つsubmit。フォームの持つデータを送信するなど、クリックアクションが必要なページには必須の機能のひとつです。今回はsubmit機能についての概要と、その使い方などについてお伝えしていきます。

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

submitはフォームデータを送信するためのボタン

submitはフォームと呼ばれるブロックの値を送信する役割を果たします。フォームとはformタグで囲まれた部分のことを指し、このブロックの中にあるテキストボックスやラジオボタンなどに入力された値を、submitボタンはサーバー側や別ページに送信することができます。

submitはinputタグの属性のひとつです。inputのtype属性の値をsubmitに設定することによってボタンの形をブラウザに表示することが可能です。ボタンに表示される文字列や、ボタンのアクション、送信データのget、postの選択などさまざまな属性を設定することができます。

またhtml5から追加された機能も多く、formタグでしか指定できなかったようなこともsubmitの属性で指定できるようになりました。

・多くのテンプレートを知りたい方は、「【初心者向け】おすすのhtmlのテンプレート7選!」の記事を参考にしてください。


「HTML・CSS」をマスターして、自分でホームページやWEBアプリを作成できるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】なら
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる
✔分からないことは、講師にチャットやビデオ通話で好きなだけ質問可能

経済産業省認定の圧倒的カリキュラム

submitボタンの使い方

submitはinputタグの属性のひとつで、inputタグのtype属性にsubmitと設定することにより、ページ上にボタンを表示させることができます。

submitをクリックすることでformに入力された値を、指定したページやサーバサイドのプログラムに送ることが可能です。htmlのコードは以下のようになります。

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>sample.html</title>
</head>
<body>
    <form action="" method="">
        <input type="submit">
        <input type="submit" value="送信する">
    </form>
</body>
</html>

ブラウザ上での表示

*ボタンのサイズを拡大して表示しています

cssを使ってsubmitボタンのデザインを変更する

cssを使うことでsubmitボタンのデザインを変えることができます。submitボタンのclass属性にcssのクラス名を設定することで、見た目を変化させます。(HTMLの送信ボタンについて詳しく知りたい方は【初心者向け】おすすのhtmlのテンプレート7選!)

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="input2.css">
    <title>sample.html</title>
</head>
<body>
    <form>
        <input type="submit" class="b">
    </form>
</body>
</html>
CSS
.b{
  background-color: #cab64a;
}

ブラウザ上での表示

*ボタンのサイズを拡大して表示しています

・HTMLのコーディングの概要をまとめてみたので、
HTMLのコーディング方法の解説を参考にしてみてください。
html href【初心者向け】HTMLの正しい書き方まとめ|各要素・タグの使い方を解説


HTML・CSS」をもっと詳しく学習したい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔受講生の97%が未経験
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能
通学不要!スキマ時間でプログラミング学習ができる!

経済産業省認定の圧倒的カリキュラム

Enterキーを押すと送信されてしまうので気をつけよう

submitボタンはEnterキーを押すことでも動いてしまいます。Enterキーが押されたときに動作するのは、一番最初に書かれているsubmitボタンです。

思わぬ挙動をしてしまうことがあるので気をつけましょう。Enterキーで動作しないようにする方法があるので、必要な場合はEnterキーで送信されないような対策をとるようにしましょう。

submitボタンの属性をご紹介

name属性

inputボタンを識別するための名称です。どのsubmitボタンが押されたのかを判定することができるので、JavaScriptなどでプログラムを組むときにもよく利用します。

value属性

submitボタンをクリックすることで、サーバー側などに送信される値です。この値によってプログラムで条件を判定することもあります。

現行のブラウザでエラーになることはないようですが、古いタイプのブラウザだと日本語の文字コードが正しく変換できずにエラーになってしまうこともあるようなので、プログラムを組む際は注意が必要です。

disabled属性

submitボタンを何らかの理由でクリックして欲しくない場合に、ボタンを使用できないようにすることができます。例えば入力して欲しい項目がまだ入力されていない、入力された値が正しくないといった場合などに便利です。

disabledには値を設定する必要がないので、submitボタンを使用できないようにしたいときは、inputタグの中にdisabledとだけ書き込みます。

HTML
<input type=”submit” name=”test” value=”送信!” disabled>
・学習サイトでの練習を考えている方は、「【初心者向け】htmlの練習ができる学習サイト8選!」の記事を参考にしてください。

html5から追加された属性をご紹介

submitボタンにはhtml5から新たに使えるようになった属性がいくつかありますので、簡単にご紹介していきます。

form

submitボタンが押されたときに関連付けるformを指定できます。

autofocus

あらかじめsubmitボタンにフォーカスが合うように設定できます。

formaction、formtarget

これらの属性にURLを設定することで、submitボタンによるデータの送信先を指定することが可能です。formタグにaction属性が設定されていても、こちらの設定が優先されます。

formmethod、formenctype

getやpostといった送信データのタイプを指定することができます。値にgetやpostを指定すると、formタグで設定されている値よりも、こちらで設定した値が優先されます。

formnovalidate

フォームに入力されたデータが妥当かどうかの判定を行わない場合に設定します。こちらは属性をタグ内に書くだけでよく、値を必要としません。

まとめ

いかがでしたか?submitボタンについてご理解いただくことはできましたか?

submitボタンはinputタグの属性のひとつで、type属性の値をsubmitに設定することによってページ内にボタンを表示させることができます。

submitボタンはformタグ内で入力されたデータを、サーバサイドや送信先に送ることができ、サーバサイドプログラムを使うサイトや動的なサイトを構築するには欠かせない要素のひとつです。また、サーバサイドで動作するシステムとも密接に関連があるので、使い方も多種多様です。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5