HTMLのbuttonタグは画面遷移をする際やフォームを送信する際によく使用します。
今回はbuttonタグを使用した画面遷移の仕方や、フォームの送信ボタンの作成、配置の仕方についてご紹介していきます。
buttonタグの基本
buttonタグは開始タグと終了タグを記述するとCSSを指定しなくても自動でボタンとして表示することが出来ます。
buttonタグの開始タグに記述を加えることで、画面遷移等を行うことが出来るようになります。
<button>ボタン</button>よく使用するボタンタグ
リンクを設定し画面遷移しよう！
buttonタグでの画面遷移の方法は、
「onclick属性」に「”location.href=’遷移したいページのURL'”」を指定します。
このように記述することで、ボタンをクリックした際に指定したURLに画面遷移させることが出来ます。
<button onclick="location.href='遷移したいページ等のURL'">ボタン</button>【例】
<button class="btn" onclick="location.href='https://coachtech.site/interview/'" >aタグを用いたリンク設定</button>簡単なフォームと送信ボタンを作成してみよう！
buttonタグはフォームの送信を行う際によく使用します。
そのため、formタグの記述の仕方も含めて具体例をご紹介します。
まず、formタグに「action属性」と「遷移先」を指定します。
buttonタグはformタグの開始タグと終了タグの中に記述します。
送信ボタンをクリックするとformタグの「action属性」で指定した遷移先に遷移することが出来ます。
今回は例として「submit.html」というファイルを作成し、「submit.html」へ遷移するよう記述してあります。
<form action="./submit.html">
<label for="test">入力欄：</label>
<input type="text" name="test" id="test">
<button class="btn">送信</button>
</form>
フォームに制約をかけてみよう！
フォームが空欄だと送信出来ないように制約をかけてみましょう！
form内のinputタグ内に「required」を指定することで入力欄が空欄の場合は、ボタンをクリックしても送信出来ないようにすることが出来ます。
実際に送信ボタンをクリックしてみましょう！
<form action="./submit.html">
<label for="test">入力欄：</label>
<input type="text" name="test" id="test" required> //inputタグ内にrequired
<button class="btn">送信</button>
</form>buttonタグを「右・中央・左」に配置する方法
＜前提＞
HTMLの要素にはインライン要素とブロックレベル要素があり、それぞれ異なる性質を持っています。
中でもbuttonタグはインライン要素の性質を持ちます。
この時どちらの性質を持つかで配置を考える際のCSSが異なるので確認していきましょう。
buttonタグ自体にCSSを指定し配置を変更する場合
インライン要素であるbuttonタグ自体にCSSを指定し配置を変更する場合は「marginプロパティ」を指定します。
- 右側配置 margin-left: auto;
- 中央配置 margin: auto;
- 左側配置 margin-right: auto;
先に述べたように、buttonタグはインライン要素のため、「display:block;」を指定しブロックレベル要素に変更します。
インライン要素であるbuttonタグをブロックレベル要素にすることで、「marin: auto;」などが適用出来るようになります。
【例】中央配置
buttonタグに対して「display: block;」を指定し、インライン要素からブロックレベル要素に変更。
「margin: 10px auto;」を指定することで「上下に10px」・「左右へ中央配置（auto）」余白を指定します。
このように記述することで、buttonタグを中央配置することが出来ます。
HTML
<div class="all">
<p>送信フォーム</p>
<div class="form">
<form action="./submit.html">
<label for="test">入力欄：</label>
<input type="text" name="test" id="test" required>
<button class="btn">送信</button>
</form>
</div>
</div>CSS
.all{
border: solid 7px lightskyblue;
width: 300px;
height: 150px;
margin: 50px auto 0;
padding: 20px;
}
.text {
margin: 10px;
border: solid 1px #333;
padding-bottom: 10px;
}
.btn {
display: block; //ブロックレベル要素に変更
margin: 10px auto; //上下に10px、左右に中央配置を指定
}送信フォーム
buttonタグの親要素にCSSを指定し配置を変更する場合（子要素がインライン要素の場合）
buttonタグの親要素にCSSを指定し配置を変更する場合は、「text-alignプロパティ」を指定します。注意点として「text-alignプロパティ」は子要素がインライン要素の場合のみ適用できます。
前提にもあるようにbuttonタグはインライン要素のため「text-alignプロパティ」が適用されます。
- 右側配置 text-align: right;
- 中央配置 text-align center;
- 左側配置 text-align: left;
まず、親要素を作成し、子要素としてbuttonタグを記述する必要があります。
今回は親要素「btn-all」を作成しました。（クラス名は任意のもの）
【例】右側配置
親要素の「btn-all」に対して「text-align: right;」を指定することで、子要素のbuttonタグを右側配置することができます。
HTML
<div class="all">
<p>送信フォーム</p>
<div class="form">
<form action="./submit.html">
<label for="test">入力欄：</label>
<input type="text" name="test" id="test" required>
<div class="btn-all"> //親要素「btn-all」
<button class="btn" >送信</button>
</div>
</form>
</div>
</div>CSS
.all{
border: solid 7px lightskyblue;
width: 300px;
height: 150px;
margin: 50px auto 0;
padding: 20px;
}
.text {
margin: 10px;
border: solid 1px #333;
}
.btn-all{
margin: 10px 10px;
text-align: right; //子要素を右側配置
}送信フォーム
buttonタグの親要素にCSSを指定し配置を変更する場合（子要素がインライン要素とブロックレベル要素どちらも可）
親要素に「justify-contentプロパティ」を指定をすることで、子要素がインライン要素、ブロックレベル要素のどちらの場合でも配置を変更することができます。
「justify-contentプロパティ」はフレックスアイテムの位置を指定するプロパティです。
そのため親要素に「display-flex」というスタイルを指定し、子要素をフレックスアイテムにする必要があります。
- 右側配置 justify-content: right;
- 中央配置 justify-content: center;
- 左側配置 justify-content: left;
【例】左側配置
親要素の「btn-all」に対して「display: flex;」と「justify-content:left;」を指定することで、子要素のbuttonタグを左側配置することができます。
HTML
<div class="box">
<p>送信フォーム</p>
<div class="form">
<form action="./submit.html">
<label for="test">入力欄：</label>
<input type="text" name="test" id="test" required>
<div class="btn-all"> //親要素
<button class="btn">送信</button>
</div>
</form>
</div>
</div>CSS
.all{
border: solid 7px lightskyblue;
width: 300px;
height: 150px;
margin: 100px auto 0;
padding: 20px;
}
.text {
margin: 10px;
border: solid 1px #333;
padding-bottom: 10px;
}
.btn-all{
margin-top: 10px;
display: flex; //子要素をフレックスアイテム化
justify-content: left; //フレックスアイテムを左側配置
}送信フォーム
まとめ
buttonタグでの画面遷移の方法や、フォーム送信時によく使用される記述を紹介しました。
また、インライン要素であるbuttonタグの「右・中央・左」配置の仕方についてまとめました。
buttonタグ以外の配置を指定する際にも、その要素がインライン要素かブロックレベル要素か注意しながらコーディングしましょう！