フォームの基本構造

フォームとは

  • ブラウザの操作画面で、利用者からの入力を受け付ける要素(の集合)のこと
  • 目的は、利用者からの情報収集のため


action

action="#"は、CGIまたはPHPが入りますが、現時点では「NULLリンク」にしておきます。


お問い合せフォーム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form action="#" method="post">
<p>名前：<input type="text" name="name" size="20" maxlength="10" value="お名前"></p>
<p>内容：<textarea name="subject" rows="5" cols="40">お問い合せ内容</textarea></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>
チェックボックス
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>チェックボックス</title>
</head>
<body>
<h1>チェックボックス</h1>
<form action="#" method="post">
<p>スマートフォン：
  <label><input type="checkbox" name="mobile" value="1" checked>iPhone</label>
  <label><input type="checkbox" name="mobile" value="2">Android</label>
  <label><input type="checkbox" name="mobile" value="3">その他</label>
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>
ラジオボタン
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラジオボタン</title>
</head>
<body>
<h1>ラジオボタン</h1>
<form action="#" method="post">
<p>性別：
  <label><input type="radio" name="sex" value="male" checked>男性</label>
  <label><input type="radio" name="sex" value="female">女性</label>
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>
リスト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リスト</title>
</head>
<body>
<h1>リスト</h1>
<form action="#" method="post">
<p>言語：
<select name="language">
  <option value="" selected>以下の言語を選択してください</option>
  <option value="1">日本語</option>
  <option value="2">英語</option>
  <option value="3">フランス語</option>
  <option value="4">スペイン語</option>
  <option value="5">韓国語</option>
</select>
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>
ラベルを付ける
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラベルを付ける</title>
</head>
<body>
<h1>ラベルを付ける</h1>
<form action="#" method="post">
<p>スマートフォン：
  <label><input type="checkbox" name="mobile" value="1" checked>iPhone</label>
  <label><input type="checkbox" name="mobile" value="1">Android</label>
  <label><input type="checkbox" name="mobile" value="1">その他</label>
</p>
<p>性別：
  <input type="radio" name="sex" value="male" id="male" checked><label for="male">男性</label>
  <input type="radio" name="sex" value="female" id="female"><label for="female">女性</label>
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>
パスワード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>パスワード</title>
</head>
<body>
<h1>パスワード入力</h1>
<form action="#" method="post">
<p>パスワード：<input type="password" name="password" size="10" maxlength="5"></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>
ファイルをアップロード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ファイルをアップロード</title>
</head>
<body>
<h1>写真をアップロード</h1>
<form action="#" method="post" enctype="multipart/form-data">
<p>写真：
  <input type="file" name="picture">
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>
隠しデータの送信
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>隠しデータの送信</title>
</head>
<body>
<h1>隠しデータの送信</h1>
<form action="#" method="post">
<p><input type="hidden" name="user_id" value="012345"></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

基本形（1）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームの練習（1）</title>
<style>
#myform label	{
	font-size: 0.875em;
	margin-bottom: 3px;
	display: block;
}
</style>
</head>
<body>
<form action="#" method="post" id="myform">
<p>
<label for="user" >名前</label>
<input type="text" id="user" name="username">
</p>
<p>
<label for="mail" >メールアドレス</label>
<input type="text" id="mail" name="mailaddress">
</p>
<p>
<label for="com" >コメント</label>
<textarea id="com" name="comment" cols="40" rows="8"></textarea>
</p>
<p><input type="submit" value="送信" id="submit"></p>
</form> 
</body>
</html>


基本形（2）

<!DOCRTPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームの練習（2）</title>
<style>
#myform label	{
	font-size: 0.875em;
	width: 100px;
	display: block;
	float: left;	
}
</style>
</head>
<body>
<form action="#" method="post" id="myform">
<p>
<label for="user" >名前</label>
<input type="text" id="user" name="username">
</p>
<p>
<label for="mail" >メールアドレス</label>
<input type="text" id="mail" name="mailaddress">
</p>
<p>
<label for="com" >コメント</label>
<textarea id="com" name="comment" cols="40" rows="8"></textarea>
</p>
<p><input type="submit" value="送信" id="submit"></p>
</form> 
</body>
</html>
table
  • 表示の崩れがなくなる
  • 色が付けやすくなる


<!DOCRTPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テーブルで組むフォーム</title>
<style>
#myform	{
	font-size: 0.875em;
	width: 500px;
}
#myform label	{
	font-size: 0.875em;
}
#myform table	{
	width: 100%;
	border-collapse: collapse;
}
#myform th {
	text-align: left;
	width: 100px;
	padding: 8px;
	background-color: #DFF5B8;
	border: solid 1px #AAA;
}
#myform td {
	padding: 8px;
	border: solid 1px #AAA;
}
#myform p	{
	text-align:center;
}
</style>
</head>
<body>
<form action="#" method="post" id="myform">
<table>
<tr>
<th><label for="user" >名前</label></th>
<td><input type="text" id="user" name="username"></td>
</tr>
<tr>
<th><label for="mail" >メールアドレス</label></th>
<td><input type="text" id="mail" name="mailaddress"></td>
</tr>
<tr>
<th><label for="com" >コメント</label></th>
<td><textarea id="com" name="comment" cols="38" rows="8"></textarea></td>
</tr>
</table>
<p><input type="submit" value="送信" id="submit"></p>
</form> 
</body>
</html>
focus
  • 「:focus」を使った擬似クラスの設定


#user:hover, #mail:hover, #com:hover {
	background-color: #FFFEE8;
}
#user:focus, #mail:focus, #com:focus {
	background-color: #EBFEFB;
}
  • 実際には、ブラウザの初期値が使用しやすいので設定しません


検索フォーム

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SAMPLE</title>
<style>
#search p	{
	margin: 0;
}
#search #text	{
	font-size: 14px;
	line-height: 1;
	width: 150px;
	padding: 4px 10px;
	background: none;
	background-image: url(textbox.png);
	background-repeat: no-repeat;
	border: none;
	outline: none;
}
#search #submit	{
	font-size: 14px;
	line-height: 1;
	width: 50px;
	margin-left: 4px;
	padding: 4px 0;
	background: none;
	background-image: url(button.png);
	background-repeat: no-repeat;
	vertical-align:top;
	border: none;
	outline: none;
	cursor: pointer;
}
#search #submit:hover	{
	background-position: 0 -32px;
}
</style>
</head>
<body>
<form action="#" method="get" id="search">
<p>
<input type="text" id="text" name="keyword"><input type="submit" id="submit" value="検索">
</p>
</form>
</body>
</html>