何をする書き方？
inputは短い入力、textareaは長い入力、buttonは操作に使います。labelと入力欄を結び付けると、何を入力する欄かが伝わります。HTMLだけでは入力内容をサーバーに保存できません。
基本の形
<label for="name">名前</label>
<input id="name" name="name">for / id同じ値でラベルと入力欄を結び付けます。name送信するときの項目名。type入力形式やボタンの種類を指定します。短い例で確かめる
index.html
<label for="name">名前</label>
<input id="name">
<button>決定</button>結果
名前の入力欄と決定ボタン
準備・実行方法を確認する
テキストエディターで index.html を作り、UTF-8で保存します。ファイルをブラウザーで開くと表示を確認できます。変更したら保存して再読み込みしてください。
もう少し詳しいコードを見る
index.html
<form>
<label for="email">メールアドレス</label>
<input id="email" name="email"
type="email" required>
<button type="submit">送信</button>
</form>結果
メールアドレスの入力欄と送信ボタン。requiredがあるため、空欄では送信できません。実際の送信先は未設定です。
ここで、書き換えてみよう
文字や数字を変えたら「実行する」を押します。変更したコードは、ページを移動すると元に戻ります。
一問だけ、復習しよう
「入力欄とボタン」の書き方はどれ？
少し変えてみよう
type="email" を type="text" に変え、メール形式の検証がなくなることを確認しましょう。
つまずいたら、ここを確認
placeholderは入力例です。ラベルの代わりにせず、labelを用意しましょう。
自分の言葉でメモ
記録はこのブラウザーに保存されます。