フォームの練習その4

練習用

テーブルで組むフォーム

HTML

<!DOCTYPE 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{
  width:100%;
  border-collapse:collapse;
}
#myform{
  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>

フォーカス

#user:hover, #mail:hover, #com:hover {
	background-color: #FFFEE8;
}
#user:focus, #mail:focus, #com:focus {
	background-color: #EBFEFB;
}

検索フォーム
HTML

<!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>