ボタンを押しても何も起きないのはなぜ？

HTMLが作るのは「押せる形」までだからです。押したときに何が起きるかはJavaScriptで指定します。何も指定していないボタンは、押せるけれど何もしないのが正常な状態です。

ボタンとリンク（aタグ）はどう使い分ける？

別のページへ移動するならaタグ、その場で何かを実行する（送信・計算・表示の切りかえなど）ならbuttonです。見た目は似せられますが、役割で選ぶのが基本です。

不要です。inputはimgと同じく中身をはさまない単独タグなので、閉じタグは書きません。buttonは文字をはさむので、終了タグまで書きます。

ここまで作ってきたのは「読むためのページ」でした。今回は少し毛色が変わって、ユーザーが操作する部品——ボタンと入力欄を置いてみます。ページが「見るもの」から「使うもの」へ一歩近づきます。

<button> は、その名のとおりボタンを作るタグです。はさんだ文字が、ボタンの上のラベルになります。

<button>送信する</button>

これだけで、クリックできるボタンが表示されます。「押すと何かが起きる」——その“何か”は、後でJavaScriptを学ぶとつけられます。今は押せる部品を置けただけで大成功です。

実際に押してみてください。見た目は変わりますが、今はまだ何も起きません。

「押せるもの」なら、前に習ったリンク（<a>）もそうでした。どう使い分けるのでしょう？答えは押したあとに何が起きるかです。

部品	押すと起きること	例
`<a>`	別の場所へ移動する	メニュー、記事へのリンク
`<button>`	その場で何かを実行する	送信する、計算する、表示を切りかえる

CSSを使えば、リンクをボタンっぽい見た目にすることもできます。それでも「移動なら <a>、実行なら <button>」と役割で選ぶのが基本。役割どおりに使うと、キーボード操作や読み上げソフトでも正しくあつかわれます。

<input> は、ユーザーが文字を打ち込める入力欄を作ります。<img> と同じで、中身をはさまないタグです。

<input type="text" placeholder="お名前をどうぞ">

分解するとこうです。

type を変えると、入力欄の種類が変わります。たとえば type="password" なら文字が伏せ字に、type="checkbox" ならチェックボックスに。同じ <input> が、type しだいで姿を変えるのがおもしろいところです。

クリックして文字を打ってみましょう。うすいヒントの文字は、打ちはじめるとすっと消えます。

placeholder と似ているようで役割がちがうのが value。こちらは最初から入力欄に入っている“本物の文字”です。

<input type="text" value="しまちゃん">
<input type="text" placeholder="お名前をどうぞ">

ならべて見ると、ちがいがはっきりします。

書くもの	出る文字	打ち始めると
`value`	ふつうの濃い文字	消えない（自分で消して書き直す）
`placeholder`	うすい文字	すっと消える

value は「前に入力した内容をあらかじめ入れておく」「おすすめの値を最初からセットしておく」ような場面で使います。ヒントなら placeholder、中身なら value——と覚えましょう。

上の欄はvalueなので最初から濃い文字入り、自分で消さないかぎり残ります。下の欄はplaceholderなので、打ちはじめるとすっと消えます。

読むだけより、実物を触るのがいちばん。ボタンを押したり、入力欄に文字を打ったりしてみてください。

上の入力欄はvalue="しまちゃん"だから、最初から濃い文字入り。下はplaceholderなので、打ち始めるとすっと消えます。ボタンは押せても、まだ何も起きないのが正解です。