01 / 05
フォームは入力部品の集まり
お問い合わせ、申し込み、アンケート——書いて送るページは全部フォームでできている。
部品はぜんぶ <form> という箱の中に入れる。ここでは送信は起きないので、安心していろいろ試してみよう。
<form> <p>おなまえ</p></form>ページを組み立てる
INPUT · スライド
フォームの部品を並べる
01 / 05
フォームは入力部品の集まり
02 / 05
1行の入力欄は input
名前やメールアドレスのような1行の入力欄は <input> で作る。
type="text"… ふつうの文字name="..."… その欄につける名前
img と同じで、input に閉じタグは無いよ。
<input type="text" name="namae">03 / 05
何を書く欄かを label で示す
入力欄だけ置かれても、何を書けばいいか分からない。<label> で見出しの文字を添えよう。
入力欄の前に置くのがふつうの並びだよ。
<label>おなまえ</label><input type="text" name="namae">04 / 05
長い文章と選択肢
<textarea>… 何行も書ける入力欄。閉じタグがある<select>と<option>… 用意した中から1つ選ぶ欄
select は入れ物、option が選択肢。ul と li の関係と同じ形だね。
<textarea name="honbun"></textarea><select name="youken"> <option>ちゅうもん</option> <option>しつもん</option></select>05 / 05
最後は送信ボタン
<button> で送信ボタンを作る。囲んだ文字がボタンの上に出るよ。
これで部品はひととおりそろった。form の中に、label と input を上から順に並べる——それがフォームの作り方。ここから書いてみよう。
<button>そうしんする</button>