お問い合わせフォームを作ろう

1. お問い合わせフォームを作ろう

2. <form>〜</form>
<form action=“送信先” method=“post”>
</form>
お問い合わせフォームを作ろう

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

4. <input type=“text” name=“name”>
<input type=“submit” value="送信する”>
<input type=“email” name=“email”>

5. ラジオボタン
Nameを
同じにする＊１つだけ選択
<input type=“radio” name=“known”>口コミ
<input type=“radio” name=“known”>SNS
<input type=“radio” name=“known”>検索エンジン
<input type=“radio” name=“known”>その他

6. <input type=“checkbox” name=“known”>口コミ
<input type=“checkbox” name=“known”>SNS
<input type=“checkbox” name=“known”>検索エンジン
<input type=“checkbox” name=“known”>その他
チェックボックス
Nameを
同じにする＊複数選択できる

7. 長い文章を入力する時は
テキストエリア
<textarea name=“comment”>〜</textarea>

8. 選択肢が多い時はプルダウン型の
セレクトボックス
<select>
<option value=“typeA”>A型</option>
<option value=“typeB”>B型</option>
<option value=“typeO”>O型</option>
<option value=“typeAB”>AB型</option>
</select>

9. <label>〜</label>
ラベルテキストとコントロール（入力欄）を
関連づける
<label>タグを使用すると、
ラベルテキストをクリックして
コントロール選択できるようになる

10. <label>〜</label>
<input type=“radio” name=“kn” id=“aa”><label for=“aa”>口コミ</label>
<input type=“radio” name=“kn” id=“bb”><label for=“bb”>SNS</label>
<input type=“radio” name=“kn” id=“cc”><label for=“cc”>検索エンジン</label>
<input type=“radio” name=“kn” id=“dd”><label for=“dd”>その他</label>
＊「SNS」をクリックしてもラジオボタンに
チェックが付くようになる

11. <label>〜</label>
<label><input type=“radio” name=“kn” >口コミ</label>
<label><input type=“radio” name=“kn” >SNS</label>
<label><input type=“radio” name=“kn” >検索エンジン</label>
<label><input type=“radio” name=“kn” >その他</label>
＊「SNS」をクリックしてもラジオボタンに
チェックが付くようになる

12. <label>〜</label> の記述方法２つ
<form action="#”>
<p>
<label for=“name">お名前</label>
<input type=“text” name="name” id=“name”>
</p>
</form>
<form action="#">
<p>
<label>
お名前
<input type=“text” name="name”>
</label>
</p>
</form>

13. required ・・・ 必須項目
<form>
<p>
<label>
お名前（必須）<input type="text" name="name" required>
</label>
</p>
</form>

14. input[required]{
width: 250px;
}
input[type="text”]{
width: 250px;
}
<form>
<p>
<label>
お名前（必須）<br><input type="text" name="name" required>
</label>
</p>
</form>
CSS
HTML

15. <p><input type="submit" value="確認画面へ"></p>
<p><label>お問い合わせ内容<br>
<textarea name="message"></textarea></label></p>
<p><label>お名前<br>
<input type="text" name="name" class="input_box"></label></p>
テキストフィールド
テキストエリア
<form action="#”>
</form> 送信ボタン