
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
ITコラム
2017.02.21
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)で、input要素で作るボタンを紹介しましたが、ボタンを作るbutton要素というものもあります。
今回は、フォームの部品の中で、button要素で作るボタンについてまとめます。
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.button要素とは
2.button要素でテキストボタンを作成
3.button要素で画像ボタンを作成
button要素は、フォームのボタン専用の要素です。
input要素は空要素で終了タグがありませんでしたが、button要素は終了タグ</button>があります。
ですので、<button>~</button>の間に、テキストやimg要素等のHTML要素も自由に入れられます。そして、それぞれにCSSを指定できるので、デザインの幅も広がります。
button要素もinput要素と同様に、type属性でボタンの機能を指定します。
type属性値もinput要素と同様に、type=submit(送信)、reset(リセット)、button(汎用ボタン)の3つです。
使用する要素 : <button> ~ </button>
button要素の属性 type属性 ボタンの機能を指定する
デフォルト値はsubmitname属性 button要素に固有の名前を付ける value属性 name属性の値と一緒に送信されるデータの初期値 disabled属性 使用不可の状態にする form属性 親のform要素のID名を呼び出して関連付ける autofocus属性 HTML文書のロード後すぐにフォーカス(選択された状態に)する formaction属性 form要素のaction属性を上書きする formmethod属性 form要素のmethod属性を上書きする formenctype属性 form要素のenctype属性を上書きする formtarget属性 form要素のtarget属性を上書きする formnovalidate属性 form要素でnovalidate属性を指定していない場合(バリデート有)に、送信ボタンでバリデート無しの状態にする
●<button>~</button>の中にテキストを入れてボタンを作成すると、ブラウザで次のように表示されます。
ボタンの内容がテキストなので、見た目はinput要素で作ったボタンと同じような感じです。
上のボタンに対するhtmlコードは、以下の通りです。
<button>送信ボタン</button>
button要素の開始タグと終了タグの間に書いたテキスト(送信ボタン)が、ボタンの表示になっている点が、input要素で作るボタンとの大きな違いです。(input要素で作るボタンは、value属性の値がボタンの表示になります。)
button要素のtype属性のデフォルト値はsubmitなので、上のようにtype属性を指定しない場合は、送信ボタンとなります。
●送信ボタンを複数置く場合は、name属性とvalue属性を指定します。
上の表示に対するhtmlコードは、以下の通りです。
<form> <p>ニックネーム:<input type="text" name="n_name"></p> <button name="btn_1" value="A">Aグループに登録</button> <button name="btn_2" value="B">Bグループに登録</button> </form>
type属性を指定していないので、submit(送信ボタン)となります。
データ送信先のプログラムで、2つのボタンのどちらがクリックされたのかを識別するために、name属性とvalue属性の指定が必要です。
クリックされたボタンのname値(btn_1又はbtn_2)とvalue値(A又はB)がセットで送信されます。
●ボタンの表示について、CSSで指定することもできます。
テキストの一部をspan要素で囲み、span要素にCSSを指定します。
上の表示に対するhtmlコードは、以下の通りです。
(HTMLファイル) <form> <p>ニックネーム:<input type="text" name="n_name"></p> <button>この内容で<span class="btn1">登録</span>します</button> </form> (CSSファイル) span.btn1 { font-size:140%; color:#B20000; font-weight:bold; padding-left:0.5em; letter-spacing:0.5em; }
●<button>~</button>の中にimg要素を入れてボタンを作成します。
上の表示に対するhtmlコードは、以下の通りです。
<form> <p>ニックネーム:<input type="text" name="n_name"></p> <button><img src="image/button_2.jpg" alt="送信する" width="200" height="30"></button> </form>
button要素のデフォルトスタイルの枠などが残って、そこに画像が表示されます。
●<button>~</button>の中にimg要素とテキストを一緒に入れてボタンを作成します。
上の表示に対するhtmlコードは、以下の通りです。
<form> <p>ニックネーム:<input type="text" name="n_name"></p> <button> <img src="image/button_2.jpg" alt="送信する" width="200" height="30"><br> <b>内容をご確認の上、送信してください</b> </button> </form>
button要素のデフォルトの枠の中に、画像とテキストがそれぞれが表示されます。
●button要素のデフォルトの枠を消して、画像だけのボタンを作ります。
button要素のデフォルトの枠を消すために、デフォルトのスタイルを上書きして、枠が表示されないようにします。
上の表示に対するhtmlコードは、以下の通りです。
(HTMLファイル) <form> <p>ニックネーム:<input type="text" name="n_name"></p> <button><img src="image/button_2.jpg" alt="送信する" width="200" height="30"></button> </form> (CSSファイル) button { background:none; border:0; width: auto; overflow:visible; padding:0; font-size:0; line-height:0; }
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.