【HTML】buttonの基礎

公開日：2020-10-01 14:04:21
最終更新日：2020-11-17 17:28:33

Workteria(ワークテリア)では難易度の高いものから低いものまで、スキルや経験に合わせた案件を多数揃えています。会員登録は無料ですので、ぜひ会員登録してご希望の案件を探してみてください！

フリーランス／正社員のエンジニアとして活躍するには、ご自身のスキルや経験に合わせた仕事を選ぶことが大切です。ご希望の案件がみつからない場合はお気軽にお問い合わせください！ユーザ満足度の高いキャリアコンサルタントが在籍していますので、希望条件や悩み事などなんでもご相談ください。ご希望にピッタリの案件をご紹介させていただきます。

案件一覧を見る非公開案件を紹介してもらう

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

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

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

bottonタグとは

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

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

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

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

使用例

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

inputタグとは

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

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

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

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

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

デザイン変更について

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

使用例

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>

【著者】

岡野

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

編集した記事一覧

正社員／フリーランスの方でこのようなお悩みありませんか？

自分に合う案件を定期的に紹介してもらいたい
週2、リモートワークなど自由な働き方をしてみたい
面倒な案件探し・契約周りは任せて仕事に集中したい

そのような方はぜひ、Workteriaサイトをご利用ください！

定期的にご本人に合う高額案件を紹介
リモートワークなど自由な働き方ができる案件多数
専属エージェントが契約や請求をトータルサポート

案件一覧を見る非公開案件を紹介してもらう

よく読まれている記事

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

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

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

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

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

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

目次