◆当サイトで人気のプログラミング教室のおすすめランキングはこちら！
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。
Web Camp←【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
TechAcademy
Tech Camp
WebCampPro
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
htmlページの中に送信ボタンを設置できる機能を持つsubmit。フォームの持つデータを送信するなど、クリックアクションが必要なページには必須の機能のひとつです。今回はsubmit機能についての概要と、その使い方などについてお伝えしていきます。
▼目次
submitはフォームデータを送信するためのボタン
submitはフォームと呼ばれるブロックの値を送信する役割を果たします。フォームとはformタグで囲まれた部分のことを指し、このブロックの中にあるテキストボックスやラジオボタンなどに入力された値を、submitボタンはサーバー側や別ページに送信することができます。
submitはinputタグの属性のひとつです。inputのtype属性の値をsubmitに設定することによってボタンの形をブラウザに表示することが可能です。ボタンに表示される文字列や、ボタンのアクション、送信データのget、postの選択などさまざまな属性を設定することができます。
またhtml5から追加された機能も多く、formタグでしか指定できなかったようなこともsubmitの属性で指定できるようになりました。
submitボタンの使い方
submitはinputタグの属性のひとつで、inputタグのtype属性にsubmitと設定することにより、ページ上にボタンを表示させることができます。
submitをクリックすることでformに入力された値を、指定したページやサーバサイドのプログラムに送ることが可能です。htmlのコードは以下のようになります。
<form>
<input type=”submit” name=”test” value=”送信！”>
</form>
cssを使ってsubmitボタンのデザインを変更する
cssを使うことでsubmitボタンのデザインを変えることができます。submitボタンのclass属性にcssのクラス名を設定することで、外観を変化させます。
.csstest1{
background-color:#ffffff;
}
<form>
<input type=”submit” name=”test” value=”送信！” class=”csstest1”>
</form>
・HTMLのコーディングの概要をまとめてみたので、
HTMLのコーディングの仕方を解説を参考にしてみてください。
Enterキーを押すと送信されてしまうので気をつけよう
submitボタンはEnterキーを押すことでも動いてしまいます。Enterボタンが押されたときに動作するのは、一番最初に書かれているsubmitボタンです。
思わぬ挙動をしてしまうことがあるので気をつけましょう。Enterキーで動作をしないようにする方法もあるので、必要な場合はEnterキーで送信できないような対策も取っておく必要があります。
・プログラミングは8割はerrorとの戦いです。そんな時に役立つよくある間違いをまとめてみました。こちらのよくある間違いを紹介！【HTML初心者入門】を参考にしてみてください。
submitボタンの属性をご紹介
name属性
inputボタンを識別するための名称です。どのsubmitボタンが押されたのかを判定することができるので、javaScriptなどでプログラムを組むときにもよく利用します。
value属性
submitボタンをクリックすることで、サーバー側などに送信される値です。この値によってプログラムが条件を判定することもあります。
現行のブラウザでエラーになることはないようですが、古いタイプのブラウザだと日本語の文字コードが正しく変換できずにエラーになってしまうこともあるようなので、プログラムを組む際は注意が必要です。
disabled属性
submitボタンを何らかの理由でクリックして欲しくない場合に、ボタンを使用できないようにすることができます。例えば入力して欲しい項目がまだ入力されていない、入力された値が正しくないなどといった場合に便利です。
disabledには値を設定する必要がないので、使用できないようにするときはdisabledとだけタグの中に書き込みます。
<input type=”submit” name=”test” value=”送信！” disabled>
html5から追加された属性をご紹介
submitボタンにはhtml5から新たに使えるようになった属性がいくつかありますので、簡単にご紹介していきます。
form
submitボタンが押されたときに関連付けるformを指定できます。
autofocus
あらかじめsubmitボタンにフォーカスが合うように設定できます。
formaction、formtarget
submitボタンによるデータの送信先を値にURIを設定することで指定することが可能です。formタグにaction属性が設定されていても、こちらの設定が優先されます。
formmethod、formenctype
getかpostかといった送信データのタイプを選ぶことができます。値にgetかpostを指定します。formタグで設定されている値よりも、こちらで設定した値が優先です。
formnovalidate
フォームに入力されたデータが妥当かどうかの判定を行わない場合に設定します。こちらは属性をタグ内に書くだけでよく、値を必要としません。
まとめ
いかがでしたか？submitボタンについてご理解いただくことはできましたか？
submitボタンはinputタグの属性のひとつで、typeの値をsubmitにすることによってページ内にボタンを表示させることができます。
submitボタンはformタグ内で入力されたデータを、サーバサイドや送信先に贈ることができ、サーバサイドプログラムを使うサイトや動的なサイトを構築するには欠かせない要素のひとつ。サーバサイドで動作するシステムとも密接に関連があるので、使い方も多種多様です。
１ヶ月でHTML・CSSができる！「WebCamp」とは？
WebCampは１ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。
参加する方の90%は未経験者です！
短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです！
わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。
学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください！
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
7月受入枠は満員となっております。8月枠に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
▼未経験から1ヶ月でWebデザイン・プログラミングを学びたい方はこちら！
▼ついに開講！オンラインでWebデザインを学びたい方はこちら！
