「HTML5,CSS3的なFormの作成1」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
HTML5とCSS3で追加された機能やタグを使ってフォームを今風にしていきたいと思います。11月22日記事
~
~
イメージ
&image(width=500,register001.png)
~
~
目次
#contents
~
~
----
~
*何が新しいのか？
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;
}
/*placeholderの文字の色
:-moz-placeholder {
color: #8F8;
}
::-webkit-input-placeholder {
color: #8F8;
}
*/
/*入力をしようとしてタップしたときの枠の挙動*/
*: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で追加された機能やタグを使ってフォームを今風にしていきたいと思います。11月22日記事
~
~
イメージ
&image(width=500,register001.png)
~
~
目次
#contents
~
~
----
~
*何が新しいのか？
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のみでフォームを作成していきました。
~
~
