検索

キーワード


【HTML】buttonの基礎

  • 公開日:2020-10-01 14:04:21
  • 最終更新日:2020-11-17 17:28:33
【HTML】buttonの基礎

こんにちは。駆け出しエンジニアの岡野です。

ここでは、HTML-buttonについて説明します。

HTML-buttonについて勉強している方の参考になれば幸いです。


bottonタグとは

buttonタグの役割としてはボタンを押したときに別のページに遷移させたり、フォームを送信したり、何らかのアクションを起こすときにつかいます。

※ブラウザからサーバーに送るためのボタン

タグは以下のように記述します。

<button>属性="属性値">~</button>

使用例

<button name="button">クリックしてね</button>


inputタグとは

buttonタグの同じ機能を持つ<input type="button">タグもありますが、汎用ボタンという同じ位置づけになります。ただ、機能面以外で大きな違いがあります。

それは<button>タグに閉じタグあるものは、beforeやafterの疑似要素が使えます。inputタグは閉じタグがないので疑似要素が使えません!

それによってデザイン性の幅が大きく異なってくることが2つの違いがあります。

※ユーザーからデータを受け取るタグ←ここ重要

<input type="button" value="ボタン">


デザイン変更について

1つ例をあげて書いてみました。

使用例

HTML

<head>
 <title>ボタン作成について</title>
 <link REL="stylesheet" HREF="sample.css>←buttonタグでリンクを貼る書き方
</head>
<body>
   <button type="submit" class="button1"
value="b1">
       <font>送信</font>
 </button>
</body>
</html>


CSS

button{
 background-color:#173a5c;
 color :white;
}


ボタンの作成例


buttonの書き方

さらにHTMLのbuttonタグで利用できる属性をご紹介します

①type属性

type属性では、ボタン種類を設定するために使用されます。

・送信用ボタン

フォームに入力された内容を送信するためのボタンを作成します

type="submit" 
 ↑   ↑
属性 属性値


・リセットボタン

フォームに入力された内容をリセットします

type="reset"

・ボタン

何もしません。スクリプトを実行するボタンなどに利用できます

type="button"


value属性

ボタンに割り当てる値を指定します。

value="回答"


name属性

ボタン名前を指定します。

name="submit"

使用例

<!DOCTYPE html>
<HTML Lang = "JP" DIR="LTR">
  <head>
   <meta charset="UTF-8">
   <title>test<title>
   <link> REL="stylesheet" href"style.css
  </head>
  <body>
  <button type="button" name="name" value="value">button</button>
   </body>
  <html>



【著者】

岡野

こんにちは。駆け出しエンジニアの岡野と申します。私に自身の事を軽く紹介すると、プログラミング言語については未経験で大学でもプログラミング言語については勉強していませんでした。なので、理解するのが大変でした。 皆さんには、プログラミング言語はなかなか理解するのが大変だったり、覚えることも多いのでこういった記事を参考にして頂き、勉強にお役に立てれば幸いです。

よく読まれている記事
【HTML/CSS】divタグの使い方

【HTML/CSS】divタグの使い方

こんにちは。駆け出しプログラマーの松下です!HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS

【HTML】リンクタグについて

【HTML】リンクタグについて

こんにちは。駆け出しエンジニアの竹前です。ここでは、HTMLのリンクタグについて説明します。HTMLについて勉強している方の参考になれば幸いです。リンクタグとはリンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(~タグ)のことをいいます。このタグを使うことによって、文字列や画像にリンクを設定することができます。タグとタグの違いHTMLにはタグというものがあります。タ

【HTML/CSS】リストについて

【HTML/CSS】リストについて

こんにちは。駆け出しプログラマーの松下です!リストを作成するol、ulタグを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです!リストをつくるHTMLで箇条書きを行うには ol、ul、liタグを使用します。このタグによりただの言葉のあつまりでなく、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。ol、ulタグでリストを作成し、その項目にliタ