placeholderの文字だけで名前欄の説明になる？

なりません。placeholderは入力しはじめると消えてしまうので、正式な説明にはlabel（ラベル）を別に用意するのが本来のやり方です。placeholderはあくまで「そえるお手本」です。

type="number"とtype="text"、数字を入れたいときはどちらを使えばいい？

純粋な数字（個数や年齢など）ならtype="number"が便利です。ただし電話番号や郵便番号のように「数字だけど計算はしない」ものは、先頭の0が消えたりするためtype="tel"やtype="text"のほうが向いています。

ブラウザが自動で「この項目を入力してください」と吹き出しを出し、送信を止めてくれます。JavaScriptを書かなくても、最低限のチェックはHTMLだけで動きます。

<input type="text"> で文字を打つ欄を作りました。type を変えると姿が変わるのでしたね。今回はその続き。用途に合った入力欄を、いくつか覚えましょう。

よく使う type を並べてみます。

<input type="text">
<input type="password">
<input type="email">
<input type="number">

同じ <input> でも、type ひとつでこんなに変わります。まずは「そういう仲間がいる」と知っておけば十分です。

実際にクリックして打ち込んでみると、種類ごとの違いがよく分かります——passwordは文字が●で隠れ、numberには上下ボタンがつきます。

入力欄に、薄い文字で入力例を出せます。それが placeholder です。

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

「ここに何を書けばいいの？」を、そっと案内してくれます。文字を打ち始めると、すっと消えます。

クリックして何か打ち込んでみてください。うすい文字（プレースホルダー）が消えて、入力できます——実際にさわってみてください。

<input> は1行だけ。感想やメッセージのように何行も書きたいときは、<textarea> を使います。

<textarea placeholder="ご感想をどうぞ"></textarea>

クリックして何行か打ち込んでみてください。<input>と違って、改行しながら書けます——実際にさわってみてください。

typeを変えると、入力欄がどれだけ姿を変えるか——実物で確かめてみましょう。スライダーや色えらびは、実際に動かすと楽しいです。

どれも同じ<input>なのに、typeひとつでこんなに変わります。rangeのスライダーやcolorの色えらびまで動かせるのが、typeのおもしろさです。