入力フォームの作り方

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="送信">