入力フォームの作り方
htmlファイル
——————————————————————
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ホームページのタイトル</title>
</head>
<body>
<h1>ホームページの見出し</h1>
<p>最初のホームページが完成しました！！</p>
<form>
E-mail<br>
<input type="text" name="email"><br>
Password<br>
<input type="text" name="pass"><br>
<input type="submit"name="submit">
<br>
<input type="checkbox"name="pref"value="1">東京
<input type="checkbox"name="pref"value="2">神奈川
<br>
<input type="radio"name="gender"value="1">男
<input type="radio"name="gender"value="2">女
<input type="radio"name="aaa"value="2">?
<br>
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="C">C型</option>
</select>
<br>
<textarea name="comment"cols="50"rows="3"></textarea>
</form>
</body>
</html>
——————————————————————
解説
フォームを作るタグ
- inputタグ
- textareaタグ
- selectタグ
３つのタグには「name属性」「value属性」が使われる
name属性について
- フォーム（グループ）に名前をつける
- 「フォーム名」は、「どのフォームからの情報なのか」を確認するために重要
value属性について
- 「値」をつける
- 値は、「どのフォームからの情報なのか」を確認するために重要
——————————————————————
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ホームページのタイトル</title>
</head>
<body>
<h1>ホームページの見出し</h1>
<p>最初のホームページが完成しました！！</p>
<form> → フォーム作成開始
—————————inputタグ————————————
E-mail<br>
<input type="text" name="email"><br>
Password<br>
<input type="text" name="pass"><br>
<input type="submit"name="submit">
<input type="checkbox"name="pref"value="1">東京
<input type="checkbox"name="pref"value="2">神奈川
<br>
<input type="radio"name="gender"value="1">男
<input type="radio"name="gender"value="2">女
- <br> → 改行タグ
- inputタグは「type属性」を指定することで色々な種類のフォームが作れる
- type属性を合わせることで、１つの機能を持ったグループを作ることができる
例
- text：テキストボックス
- checkbox：チェックボックスボタン
- submit：送信ボタン
- radio：取捨選択
——————————————————————
<br>
———————selectタグ———————————
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="C">C型</option>
</select>
- 「スクロール選択」ができるボックス作成
- optionタグとセットで使う
——————————————————————
<br>
——————————textareaタグ———————
<textarea name="comment"cols="50"rows="3"></textarea>
・cols→横幅を指定
・rows→縦幅を指定
——————————————————————
</form>→フォーム作成終了
</body>
</html>
——————————————————————
よく使うフォームパーツ
- ユーザー名：<input type="text" name="username"><br>
- パスワード：<input type="password" name="password"><br>
- 好きな果物：<input type="checkbox" name="fruits">みかん<input type="checkbox" name="fruits" checked>レモン<br>
- 性別：<input type="radio" name="sex" checked>男性<input type="radio" name="sex">女性<br>
- コメント：<textarea name="comments"></textarea><br>
- 見えない入力欄：<input type="hidden" name="token">
- <input type="submit" value="送信">
