入力フォームの作り方
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」タグ
⇧上記3つのタグには「name」「value」属性が使われる
【name属性】
・フォーム(グループ)に名前をつける
・「フォーム名」は「どのフォームからの情報なのか」を確認するために必要
【value属性】
・「値」をつける
・値は「どのフォームからの情報なのか」を確認するために必要
==============
<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属性を合わせることで、1つの機能を持ったグループを作ることができる
(例)
・text>テキストボックス
・checkbox>チェックボックスボタン
・submit>送信ボタン
・radio>取捨選択
---------------------
<br>
---------------------textareaタグ---------------------
<textarea name="comment" cols="50" rows="3"></textarea>
・cols⇨横幅指定
・rows⇨縦幅指定
---------------------
</form>⇨フォーム作成終了
---------------------
よく使うフォームパーツ
・ユーザー名
⇨<input type="text" name="username"><br>
・パスワード
⇨<input type="password" name="password"></br>
・好きな果物
⇨<input type="checkbox" name="fruits">みかん
<input type="checkbox" name="fruits">レモン<br>
・性別
⇨<input type="radio" name="gender">男
<input type="radio" name="gender">女<br>
・コメント
⇨<textarea name="comments"></textarea><br>
・見えない入力欄
⇨<input type="hidden" name="token">
・<input type="submit" value="送信">