フォームの基本
form要素とは
入力されたデータを運ぶ器の役割を果たす。
ユーザーが入力したデータは
- サーバーサイドプログラム（PHP、CGIなど）へ送られ（その際の通信方式がメソッド）、
- サーバーサイドプログラムがデータベースにデータを送る。
- method属性 入力データを送る方式
- action属性 データを受け取るサーバーサイドプログラムのURIを指定する
get 送信データをURLの一部としてサーバに送る
post HTTPボディに送信データを格納してサーバーに送る（カプセル化）
<form method="post" action="phpなどのURI"> ・・・・・ </from>
>
フォーム部品
＜form＞～＜/form＞がフォーム。それを構成する部品に下記の要素群があり、またそれぞれの要素に属性がつく事で性質が変わる。
input要素
- textタイプ 1行のデータのみ入力できる。
name属性 サーバーサイドプログラムがが項目を区別するため
value属性 初期値を指定する
size属性 フィールドの長さ - subｍitタイプ データ送信のボタン
- radioタイプ 共通のname属性、異なるvalue属性、複数選択不可
- checkboxタイプ 共通のname属性、異なるvalue属性、複数選択可能、checked属性で初期値を選択した状態にできる。
- select要素 メニューというタイプの選択肢を提供する、メニューの選択肢はoption要素を列挙。selected属性で初期値として選択した状態にできる。
textarea要素
長い文章の入力ができる。rows属性とcols属性で行数、列数を指定する。
label要素
ラベル要素を使えばラベル部分をクリックする事でラジオボタンやチェックボックスが選択できるようになる。
>>ラベル要素を使うと文字の部分をクリックしてもチェックが入る。通常はラベル要素を使わないとradio部分しか反応しない。
- form属性
<label>～</label>の中にフォーム要素を配置
→form要素とラベルを関連付け
- for属性
<label>タグのfor属性の値とフォーム部品のid属性の値を一致させる
→フォーム部品とラベルと関連付け
整列はtable要素などをつかう。下記はtable要素で整列しスタイルをつけた例
ｈｔｍｌ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="uｔf-8">
<title>フォームの練習</title>
<link href="cｓs/style-master.cｓs" rel="stylesheet">
</head>
<body>
<form method="post" action="#" id="myform">
<table>
<tr>
<th>名前</th>
<td>
<input type="text" name="name" size="30" maxlength="10">
</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>
<input type="text" name="email" size="30">
</td>
</tr>
<tr>
<th>性別</th>
<td>
<label>
<input type="radio" name="sex" value="male" checked>男性
</label>
<label>
<input type="radio" name="sex" value="female">女性
</label>
</td>
</tr>
<tr>
<th>好きな色</th>
<td>
<label>
<input type="radio" name="color" value="red">赤
</label>
<label>
<input type="radio" name="color" value="blue">青
</label>
<label>
<input type="radio" name="color" value="green">緑
</label>
</td>
</tr>
<tr>
<th>趣味</th>
<td>
<label>
<input type="checkbox" name="hobby" value="1">音楽
</label>
<label>
<input type="checkbox" name="hobby" value="2">スポーツ
</label>
<label>
<input type="checkbox" name="hobby" value="3">旅行
</label>
<label>
<input type="checkbox" name="hobby" value="4">料理
</label>
<label>
<input type="checkbox" name="hobby" value="5">読書
</label>
</td>
</tr>
<tr>
<th>お住まいの地域</th>
<td>
<select name="district">
<option value="">以下の地域から選択してください</option>
<option value="hokkaido">北海道</option>
<option value="tohoku">東北</option>
<option value="kanto">関東</option>
<option value="tokai">東海</option>
<option value="kinki">近畿</option>
<option value="chugoku">中国</option>
<option value="sikoku">四国</option>
<option value="kyusyu">九州</option>
<option value="okinawa">沖縄</option>
</select>
</td>
</tr>
<tr>
<th>メモ</th>
<td>
<textarea name="memo" rows="5" cols="20"></textarea>
</td>
</tr>
<tr>
<th></th>
<td>
<input type="submit" value="送信">
</td>
</tr>
</table>
</form>
</body>
</html>
ｃｓｓ
@charset "uｔf-8";
#myform table {
width: 600px;
border: 1px solid #333;
border-collapse: collapse; /* 隣接するセルのボーダーを重ねて表示 */
}
th, td {
border: 1px solid #CCC;
padding: 10px;
}
th {
background: #F4FFDD;
text-align: right;
}
