nicepaper @ ウィキ
nicepaper @ ウィキ

HTML5とCSS3で追加された機能やタグを使ってフォームを今風にしていきたいと思います。11月22日記事

イメージ



目次




何が新しいのか？

HTML

placeholder
placeholder属性を指定することで、あらかじめテキストの中身を灰色などで表現しておくことができます。
input type="email"
スマートフォンなどの入力の際に、ボタンに@ボタンがあらわれたりします。 CSS
last-child
疑似要素の:focusはCSS2ですが、:last-childはCSS3になってから追加されたものです。

コード

HTML 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>HTML5+CSS3的フォーム</title>
</head>
<body>
<div class="form_container">
	<h1>登録</h1>
    <form action="confirm.php" method="post">
    	<ul>
        	<li>
            	<label for="email">メールアドレス</label>
            	<input type="email" name="email" placeholder="mail@example.com">
            </li>
        	<li>
            	<label for="password">パスワード</label>
            	<input type="password" name="nickname" placeholder="New Password">
            </li>
        	<li>
            	<label for="password">再パスワード</label>
            	<input type="password" name="nickname" placeholder="Password again">
            </li>
        	<li>
            	<label for="nickname">ニックネーム</label>
            	<input type="text" name="nickname" placeholder="Nickname">
            </li>

        </ul>
        <button class="submit">確認 / confirm</button>
    </form>
</div>
</body>
</html>

CSS 

@charset "utf-8";
/* CSS Document */

.form_container{
	margin: 20px auto;
	padding: 30px;
	width: 750px;
	min-height: 100px;
	border: 1px solid #CCC;
	border-radius: 10px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.form_container h1{
	text-align: center;
	font-size: 20px;
	border-bottom: 2px solid #CCC;
	padding:5px;
}


/*入力をしようとしてタップしたときの枠の挙動*/
*:focus {outline: none;}
.form_container input:focus{
	background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
}

.form_container ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin-bottom:20px;
    padding:0px;
}
.form_container li{
    padding:12px; 
    border-bottom:1px solid #eee;
    position:relative;
}
/*liタグの最後の線は太くする*/
.form_container li:last-child {
    border-bottom:2px solid #CCC;
}
.form_container label{
	width: 350px;
    margin-top: 3px;
    display:inline-block;
    float:left;
}
.form_container input{
    height:20px; 
    width:220px; 
    padding:5px 8px;
	border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
	
}
/*buttonスタイル*/
button.submit {
    display:block;
    margin: 0 auto;
    background-color: #ffbc36;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffbc36), to(#cf9829));
    background: -webkit-linear-gradient(top, #ffbc36, #cf9829);
    background: -moz-linear-gradient(top, #ffbc36, #cf9829);
    background: -ms-linear-gradient(top, #ffbc36, #cf9829);
    background: -o-linear-gradient(top, #ffbc36, #cf9829);
    background: linear-gradient(top, #ffbc36, #cf9829);
    border: 1px solid #f5d787;
    border-bottom: 1px solid #a28a2c;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #d6b961;
    -webkit-box-shadow: 0 1px 0 0 #d6b961 inset ;
    -moz-box-shadow: 0 1px 0 0 #d6b961 inset;
    -ms-box-shadow: 0 1px 0 0 #d6b961 inset;
    -o-box-shadow: 0 1px 0 0 #d6b961 inset;
    color: white;
    font-weight: bold;
    padding: 15px 30px;
    text-align: center;
    text-shadow: 0 -1px 0 #705217;
}
button.submit:hover {
    opacity:.85;
    cursor: pointer; 
}
button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset; 
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
     
}



まとめ

jQueryを使って入力されたニックネームやメールアドレスが同じかどうかを判定することもありますが、まずはHTMLとCSSのみでフォームを作成していきました。

「HTML5,CSS3的なFormの作成1」をウィキ内検索
最終更新：2015年11月22日 15:08
添付ファイル