2014-12-07

2014-12-07

フォームの各部品Add Star

 

 

お問い合せフォーム

  • 各部品の確認

テキスト入力
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>お問い合わせ</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<formaction="#"method="post">
<p>名前:<inputtype="text"name="name"size="20"maxlength="10"value="お名前"></p>
<p>内容:<textareaname="subject"rows="5"cols="40">お問い合せ内容</textarea></p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

チェックボックス
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>チェックボックス</title>
</head>
<body>
<h1>チェックボックス</h1>
<formaction="#"method="post">
<p>スマートフォン<label><inputtype="checkbox"name="mobile"value="1"checked>iPhone</label>
<label><inputtype="checkbox"name="mobile"value="2">Android</label>
<label><inputtype="checkbox"name="mobile"value="3">その他</label>
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

ラジオボタン
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ラジオボタン</title>
</head>
<body>
<h1>ラジオボタン</h1>
<formaction="#"method="post">
<p>性別:
<label><inputtype="radio"name="sex"value="male"checked>男性</label>
<label><inputtype="radio"name="sex"value="female">女性</label>
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

リスト
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>リスト</title>
</head>
<body>
<h1>リスト</h1>
<formaction="#"method="post">
<p>言語:
<selectname="language">
<optionvalue=""selected>以下の言語を選択してください</option>
<optionvalue="1">日本語</option>
<optionvalue="2">英語</option>
<optionvalue="3">フランス語</option>
<optionvalue="4">スペイン語</option>
<optionvalue="5">韓国語</option>
</select>
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

ラベルを付ける
  • ラジオボタンでは、選択する文字のみにラベルを付けても機能します
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ラベルを付ける</title>
</head>
<body>
<h1>ラベルを付ける</h1>
<formaction="#"method="post">
<p>スマートフォン<label><inputtype="checkbox"name="mobile"value="1"checked>iPhone</label>
<label><inputtype="checkbox"name="mobile"value="1">Android</label>
<label><inputtype="checkbox"name="mobile"value="1">その他</label>
</p>
<p>性別:
<inputtype="radio"name="sex"value="male"id="male"checked><labelfor="male">男性</label>
<inputtype="radio"name="sex"value="female"id="female"><labelfor="female">女性</label>
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

パスワード
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>パスワード</title>
</head>
<body>
<h1>パスワード入力</h1>
<formaction="#"method="post">
<p>パスワード:<inputtype="password"name="password"size="10"maxlength="5"></p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

ファイルをアップロード
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ファイルをアップロード</title>
</head>
<body>
<h1>写真をアップロード</h1>
<formaction="#"method="post"enctype="multipart/form-data">
<p>写真:
  <inputtype="file"name="picture">
</p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

隠しデータの送信
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>隠しデータの送信</title>
</head>
<body>
<h1>隠しデータの送信</h1>
<formaction="#"method="post">
<p><inputtype="hidden"name="user_id"value="012345"></p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

 

基本形(1)

 

f:id:web-css-design:20120517081915j:image

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

 

基本形(2)

 

f:id:css_design:20100830083949j:image

<!DOCRTPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>フォームの練習(2)</title>
<style>
#myform label	{
	font-size: 0.875em;
	width: 100px;
	display: block;
	float: left;	
}
</style>
</head>
<body>
<formaction="#"method="post"id="myform">
<p>
<labelfor="user" >名前</label>
<inputtype="text"id="user"name="username">
</p>
<p>
<labelfor="mail" >メールアドレス</label>
<inputtype="text"id="mail"name="mailaddress">
</p>
<p>
<labelfor="com" >コメント</label>
<textareaid="com"name="comment"cols="40"rows="8"></textarea>
</p>
<p><inputtype="submit"value="送信"id="submit"></p>
</form> 
</body>
</html>

table
  • 表示の崩れがなくなる
  • 色が付けやすくなる

f:id:web-css-design:20120517083634j:image

<!DOCRTPE html>
<htmllang="ja">
<head>
<metacharset="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>
<formaction="#"method="post"id="myform">
<table>
<tr>
<th><labelfor="user" >名前</label></th>
<td><inputtype="text"id="user"name="username"></td>
</tr>
<tr>
<th><labelfor="mail" >メールアドレス</label></th>
<td><inputtype="text"id="mail"name="mailaddress"></td>
</tr>
<tr>
<th><labelfor="com" >コメント</label></th>
<td><textareaid="com"name="comment"cols="38"rows="8"></textarea></td>
</tr>
</table>
<p><inputtype="submit"value="送信"id="submit"></p>
</form> 
</body>
</html>

focus
  • 「:focus」を使った擬似クラスの設定

f:id:css_design:20100830084122j:image

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

  • 実際には、ブラウザの初期値が使用しやすいので設定しません

f:id:web-css-design:20120517090333j:image


検索フォーム

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>検索フィールド</title>
<style>
#search #text  {
  width: 150px;
  padding: 4px 10px;
  border-radius: 6px;
}
#search #submit  {
  font-size: 18px;
  width: 50px;
  margin-left: 2px;
  vertical-align: middle;
  cursor: pointer;
}
</style>
</head>
<body>
<formaction="#"method="get"id="search">
<p>
<inputtype="text"id="text"name="keyword">
<inputtype="submit"id="submit"value="検索">
</p>
</form>
</body>
</html>