HTML-formの書き方

1. お問い合わせフォーム

2. お問い合わせフォーム
<form>∼</form>

3. お問い合わせフォーム
input要素
1行

4. お問い合わせフォーム
input要素
<input type= text name= name >
1行

5. お問い合わせフォーム
input要素
<input type= text name= name >
type= text ・・テキスト入力欄 (テキストフィールド)
主なtype属性
type= email ・・メールアドレス入力欄
type= radio ・・ラジオボタン
type= submit ・・送信ボタン
1行

6. お問い合わせフォーム
input要素
<input type= text name= name >
type= text ・・テキスト入力欄 (テキストフィールド)
主なtype属性
type= email ・・メールアドレス入力欄
type= radio ・・ラジオボタン
type= submit ・・送信ボタン
何のデータかわかる
ように名前をつける
1行

7. お問い合わせフォーム
input要素
<input type= text name= name >
type= text ・・テキスト入力欄 (テキストフィールド)
主なtype属性
type= email ・・メールアドレス入力欄
type= radio ・・ラジオボタン
type= submit ・・送信ボタン
何のデータかわかる
ように名前をつける
1行

8. お問い合わせフォーム
<form>∼</form>
<form>
<p>メールアドレス
<input type= email name= email ></p>
</form>
1行
1行
<form>
<p>お名前
<input type= text name= name ></p>
</form>

9. <form>
<p><input type= submit value= 送信する ></p>
</form>
お問い合わせフォーム
<form>∼</form>
1行
1行
<form>
<p>お名前
<input type= text name= name ></p>
</form>

10. <form>
<p>お名前
<input type= text name= name ></p>
</form>
<form>
<p>お問い合わせ内容<br>
<textarea name= comment ></textarea></p>
</form>
長い文章
1行
お問い合わせフォーム

11. <form>
<p>お名前（必須）
<input type= text name= name required></p>
</form>
お問い合わせフォーム
required・・・ 必須項目

12. お問い合わせフォーム
<label>∼</label>
ラベルテキストと入力欄を関連づける
<label>タグを使用すると、
ラベルテキストをクリックして
入力欄を選択できるようになる

13. お問い合わせフォーム
<label>∼</label>
＊「SNS」をクリックしてもラジオボタンに
チェックが付くようになる
<label>タグを使用すると、ラベルテキストを
クリックして入力欄を選択できるようになる

14. お問い合わせフォーム
<label>の記述方法
<label>
お名前
<input type= text name="name >
</label>

15. お問い合わせフォーム
<label>の記述方法
<label for= name">お名前</label>
<input type= text name= name id= name >