
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
ITコラム
2017.02.17
今回は、input要素で作る部品の中で、データを送信するためのボタン(submit)とリセットボタン(reset)についてまとめます。
HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)( 本ページ )
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト
HTML 【フォーム】9 ~ 入力候補(datalist)
HTML 【フォーム】10 ~ テキストエリア(textarea)
HTML 【フォーム】11 ~ ラベル(label)
HTML 【フォーム】12 ~ 出力欄(output)
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える
1.ボタンの部品
2.submitでボタンを作成
3.resetでボタンを作成
4.buttonでボタンを作成
<input type=”submit”>を使うと、データを送信するためのボタンを作ることができます。
また、<input type=”reset”>は、入力データをリセットするためのボタンを作る際に使用します。
他に、<input type=”button”>で、次のページに遷移するボタンなど用途に応じたボタンを作ることができます。
type属性の値 | 部品の種類 | |
---|---|---|
input要素で作る ボタンの部品 |
type = ”submit” | 送信ボタン |
type = ”reset” | リセットボタン | |
type = ”button” | 用途に応じたボタン |
ボタン部品も、type属性以外の属性を使って機能を追加することができます。
autofocus属性 HTML文書のロード後すぐにフォーカス(選択された状態に)する form属性 form要素の外に出してレイアウトする disabled属性 使用不可の状態にする formaction属性
(type=”submit”の場合のみ)form要素のaction属性を上書きする formmethod属性
(type=”submit”の場合のみ)form要素のmethod属性を上書きする formenctype属性
(type=”submit”の場合のみ)form要素のenctype属性を上書きする formtarget属性
(type=”submit”の場合のみ)form要素のtarget属性を上書きする formnovalidate属性
(type=”submit”の場合のみ)form要素でnovalidate属性を指定していない場合(バリデート有)に、送信ボタンでバリデート無しの状態にする
●<input type=”submit”>で送信ボタンを作成すると、ブラウザで次のように表示されます。
上の表示に対するhtmlコードは、以下の通りです。
<input type="submit">
submitは、単独で使う場合はname属性の指定は不要ですが、複数の送信ボタンを設定する場合は、必ずname属性で部品名を指定します。
value属性で、表示用のテキスト(上の例の「送信」の部分)を指定できます。
上の表示に対するhtmlコードは、以下の通りです。
<input type="submit" value="ここを押すとデータが送信されます!">
●formnovalidate属性を指定しない場合は、必須入力項目に対してバリデート(入力チェック)が働き、アラートが表示されます。
上の表示に対するhtmlコードは、以下の通りです。
<form> ID:<input type="text" name="id" required> <input type="submit"> </form>
input type=”text”で作成した入力欄は、required属性の指定があるので必須入力項目です。
form要素でもtype=”submit”を指定したinput要素でもnovalidate属性の指定をしていないので、デフォルトで設定されるバリデート(入力チェック)が働いて、必須入力項目の入力を促すアラートが表示されます。
type=”reset”で作成されるリセットボタンは、フォームの入力内容を全てリセットする機能を持っています。
ユーザが入力してくれた情報が一瞬にして消去されてしまうということを念頭に置いて、慎重に作成する必要があります。
<input type=”reset”>でリセットボタンを作成すると、ブラウザで次のように表示されます。
上の表示に対するhtmlコードは、以下の通りです。
<input type="reset">
submitと同様に、value属性で表示用のテキストを指定できます。
下の記入欄に文字を入力して、リセットボタンを押してみて下さい。
上の表示に対するhtmlコードは、以下の通りです。
<form> <input type="text" name="test" placeholder="こちらに文字を入力してリセットボタンを押してみて下さい!"> <input type="reset"> </form>
データを送信する場合と、入力内容をリセットする場合以外にも、次のページへ遷移したり、ポップアップで簡単なメッセージを表示させたりするなど、特定の機能を持つボタンを作る際に、type=”button”を使用します。
type=”button”でボタンを作成する場合には、submit(送信)やreset(リセット)のようにデフォルトでボタンにテキストが表示されないので、value属性で表示用のテキストを指定します。
上の表示に対するhtmlコードは、以下の通りです。
<input type="button" value="トップページを表示する">
上のソースだけでは、ボタンを押しても何も起こりません。アクションを起こすには(トップページを表示するには)、例えばJavaScriptというスクリプト言語等を使って、アクションを起こす命令を記述する必要があります。
下のボタンを押してみて下さい。
上のボタンに対するhtmlコードは、以下の通りです。
<input type="button" value="トップページを表示する" onClick="location.href='https://programmercollege.jp/'">
「onClick=”location.href=’https://programmercollege.jp/'”」という記述が、JavaScriptです。
この記述の説明のみになりますが、「onClick=””」でボタンを押した時の処理を設定しており、「location.href=’URL’」はURLを読み込むための命令です。””(ダブルコーテーション)の中ですので、URLは”(シングルコーテーション)で囲みます。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.