−フォーム−

入力フォーム　 input要素　 textarea　 button　 select,option　 隠しコマンド　

初期設定

●フォームダウンロード

必須項目を付ける
required が入っている箇所だけ入力されていないとエラーになる。

●読み込み：BrForm.php

<?php
	if(!empty($_GET['er']))
	echo "<label class='error'>必須項目を入力してください</label>";
?>


<input type="text" name="お名前" required="required">

デザイン

/*--------------------------------------------------------

メール設定

--------------------------------------------------------*/

#form table{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	border-collapse:collapse;
	border-top:1px solid #FFFFFF;
	border-left:1px solid #FFFFFF;
	empty-cells:show;
}
#form table th{
	width:30%;
	border-right:3px solid #67d407;
	border-bottom:1px solid #FFFFFF;
	border-top:1px solid #FFFFFF;
	border-left:1px solid #FFFFFF;
	background-color:#FFFFFF;
	padding:10px;
	text-align:right;
	vertical-align:middle;
}
#form table td{
	border-right:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
	border-top:1px solid #FFFFFF;
	border-left:1px solid #FFFFFF;
	padding:10px;
}
.hissu{
	background-color:#F00;
	color:#FFFFFF;
	border-radius:3px;
	padding:0px 5px;
	margin-left:5px;
	font-size:70%;
}
#form table textarea{
	width:100%;
	height:300px;
}

input[type="submit"]{
	width:180px;
	background-color:#d30000;
	border:solid 1px #d30000;
	border-radius:3px;
	color:#FFFFFF;
	padding:10px 10px;
}
input[type="reset"]{
	width:180px;
	background-color:#bfbfbf;
	border:solid 1px #bfbfbf;
	border-radius:3px;
	color:#FFFFFF;
	padding:10px 10px;
}

input[type="text"]{
	width:50%;
	color:#808080;
	vertical-align:60%;
	height:40px;
}
input[type="image"]{
	width:30%;
}

/* --------------------------

     小型タブレット端末（スマホのみに適応）

-------------------------- */

@media screen and (max-width: 481px)  {

#form table{font-size:90%;}
#form table th{
	width:20%;
	padding:5px;
}
#form table td{
	padding:5px;
}
#form table textarea{
	width:100%;
	height:200px;
}

}

●vertical-align:60%;　のパーセント表示で、送信ボタン画像との高さが揃う。
●height:40px; で入力フォームの高さが大きくなる。

入力フォームに色を付ける

/*++++++++++++++++++++++++++++
メールフォーム設定
++++++++++++++++++++++++++++*/
#formWrap input:focus, select:focus, textarea:focus {
	background-color: #ffffe4;
	border:solid 2px #000000;
	border-radius:3px;
}
#formWrap .required{
	background-color: #ffeeee;
	border:solid 2px #000000;
}


#formWrap input[type=submit]{
	background: linear-gradient(#fd3939, #830000);
	color:#FFFFFF;
	border-radius:6px;
	padding:10px 30px;
	font-size:15px;
	border:solid 3px #FFFFFF;
	box-shadow:0px 0px 5px #555555;
}
#formWrap input[type=submit]:hover { /* マウスが上に載ったとき */
	background: linear-gradient(#830000, #dc0000);
	text-shadow: 0 0 5px #fff,0 0 10px #fff;
}

#formWrap table th{
	width:23%;
	font-weight:normal;
	font-size:90%;
}
#formWrap .col1{width:75%;}
#formWrap .col2, #formWrap textarea{width:80%;}