HTML・入力を受け取る

ボタンと入力欄

押せるボタン、文字を打ち込める入力欄。ページに“操作”のきっかけを置いてみよう。動きは後で、まずは形から。

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

押せるボタン

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

<button>送信する</button>

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

文字を打ち込む入力欄

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

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

分解するとこうです。

書くもの意味
<input>入力欄の部品。1つで完結するタグ
type="text"どんな入力欄か（text なら文字を打つ欄）
placeholder="..."打つ前にうすく表示されるヒントの文字

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

JavaScriptボタンを押したら動かす押しても何も起きない…を解決するのがJavaScript。ボタンに“動き”をつけに行こう

このレッスンのまとめ

  1. 押せるボタンは <button>ラベル</button>
  2. 文字を打つ欄は <input type="text">（中身ははさまない）
  3. <input> は type を変えると姿が変わる

type="text" を type="password" に変えると、打った文字が伏せ字に——同じ <input> が type で姿を変えます。 :::

やってみよう：れんらくの部品を置く

しまちゃんのページのいちばん下に「れんらく」を作りはじめます。まず部品——名前を打つ <input> と、「おくる」<button> を置きましょう。

<h2>れんらく</h2>
<input type="text" placeholder="あなたのなまえ">
<button>おくる</button>

<h2> で見出しを立て、今回足すのは <input>（文字を打つ欄）と <button>（押す部品）。placeholder はうすい文字のヒントでしたね。

ブラウザ表示。「れんらく」の見出しの下に、名前を打つ入力欄と「おくる」ボタンが置かれている
まだバラバラの状態です。