<input type="text"> で文字を打つ欄を作りました。type を変えると姿が変わるのでしたね。今回はその続き。用途に合った入力欄を、いくつか覚えましょう。
typeを変えてみる
よく使う type を並べてみます。
<input type="text">
<input type="password">
<input type="email">
<input type="number">
| type | どんな欄になるか |
|---|---|
text | ふつうの1行入力 |
password | 打った文字が ●●● で隠れる |
email | メール向け(スマホだと @ が出やすい) |
number | 数字だけの入力(上下ボタンつき) |
同じ <input> でも、type ひとつでこんなに変わります。まずは「そういう仲間がいる」と知っておけば十分です。
placeholder でお手本を薄く表示
入力欄に、薄い文字で入力例を出せます。それが placeholder です。
<input type="text" placeholder="お名前をどうぞ">「ここに何を書けばいいの?」を、そっと案内してくれます。文字を打ち始めると、すっと消えます。
長い文章は <textarea>
<input> は1行だけ。感想やメッセージのように何行も書きたいときは、<textarea> を使います。
<textarea placeholder="ご感想をどうぞ"></textarea>このレッスンのまとめ
<input>はtypeを変えると入力欄の種類が変わる(password・email・number…)placeholderで、薄い文字のお手本を出せる- 長い文章は
<textarea>〜</textarea>(終了タグまで書く)
(type="password" や email はしまちゃんのページには使いませんが、会員登録などで大活躍。知っておくと便利です。)
:::
