フォーム｜入力欄の長さを最適化
フォームをコーディングするとき、各項目の長さをどれくらいにするかを考えることがあります。毎回考えなくても済むように、コピペで使えるフォームのフォーマットサンプルを考えました。
ページの余白が大きいからといって、入力欄を大きくしすぎるのもおかしいし。。。
小さすぎると文字数が多い場合に入力した文字すべてが表示されないし。。。
ここでは、最適な文字数にあうんじゃないかな～と思うサンプルを紹介します。
※もちろんあくまで参考にしていただければと思うので、用途やシーンに応じて幅は変更してくださいね！
使用するclass名
.size-xs-100.size-sm-50 [xs]-[sm]-[md]-[lg] 各5～100％の間で5％刻みで対応
.size-xs-** xs以上の時、**% の長さ
.size-sm-** sm以上の時、**% の長さ
.size-ｍｄ-** md以上の時、**% の長さ
.size-ｌｇ-** lg以上の時、**% の長さ
※**の数値は、5～100％の間で5％刻みで対応
.size-input-name 氏名：全角15文字
.size-input-nameS 氏名（分割）：全角7文字
.size-input-company 会社名：全角16文字
.size-input-division 部署名：全角16文字
.size-input-quantity 従業員数：全角4文字
.size-input-zip 郵便番号：半角7文字
.size-input-zip3 郵便番号：半角3文字
.size-input-zip4 郵便番号：半角4文字
.size-input-pref 都道府県：全角5文字
.size-input-address 住所：全角25文字
.size-input-tel 電話番号：半角14文字
.size-input-telS 電話番号（分割）：半角4文字
.size-input-homepage ウェブサイト：半角60文字
.size-input-email メールアドレス：半角34文字
View
[xs]-[sm]-[md]-[lg] 各5～100％の間で5％刻み
全角15文字
全角7文字×2
全角16文字
全角16文字
全角4文字
〒 半角7文字
〒 - 半角3文字＋半角4文字
全角5文字
全角25文字
半角14文字
- - 半角4文字×3
半角60文字
半角34文字
Source
<input class="size-xs-100 size-sm-50" type="text" placeholder="xsのとき100％、smのとき50％"> [xs]-[sm]-[md]-[lg] 各5～100％の間で5％刻み
<input class="size-input-name" type="text" placeholder="氏名"> 全角15文字
<input class="size-input-nameS" type="text" placeholder="氏">
<input class="size-input-nameS" type="text" placeholder="名"> 全角7文字×2
<input class="size-input-company" type="text" placeholder="会社名"> 全角16文字
<input class="size-input-division" type="text" placeholder="部署名"> 全角16文字
<input class="size-input-quantity" type="text" placeholder="従業員数"> 全角4文字
〒 <input class="size-input-zip" type="text" placeholder="7桁" maxlength="8"> 半角7文字
〒 <input class="size-input-zip3" type="text" placeholder="上3桁" maxlength="3"> - <input class="size-input-zip4" type="text" placeholder="下4桁" maxlength="4"> 半角3文字＋半角4文字
<input class="size-input-pref" type="text" placeholder="都道府県"> 全角5文字
<input class="size-input-address" type="text" placeholder="住所"> 全角25文字
<input class="size-input-tel" type="text" placeholder="電話番号" maxlength="14"> 半角14文字
<input class="size-input-telS" type="text" placeholder="市外局番" maxlength="4"> - <input class="size-input-telS" type="text" placeholder="市内局番" maxlength="4"> - <input class="size-input-telS" type="text" placeholder="加入者番号" maxlength="4"> 半角4文字×3
<input class="size-input-homepage" type="text" placeholder="Web site"> 半角60文字
<input class="size-input-email" type="text" placeholder="メールアドレス"> 半角34文字
/* ================================================================
フォーム整形
=================================================================== */
input + br {
display: block;
content: "";
width: 100%;
height: 3px;
}
.size-input-name { width: 16em; }
.size-input-nameS { width: 8em; }
.size-input-company { width: 17em; }
.size-input-division { width: 17em; }
.size-input-quantity { width: 5em; }
.size-input-zip { width: 7em; }
.size-input-zip3 { width: 4em; }
.size-input-zip4 { width: 5em; }
.size-input-pref { width: 6em; }
.size-input-address { width: 26em; }
.size-input-tel { width: 12.5em; }
.size-input-telS { width: 5em; }
.size-input-homepage { width: 35em; }
.size-input-email { width: 20em; }
.size-input-message { width: 100%; }
form table { width: 100%; }
form th.required:before {
content: "必須";
display: inline-block;
position: relative;
top: 0.2em;
float: right;
background: #990000;
border-radius: 3px;
padding: 0.25em 0.5em;
vertical-align: middle;
line-height: 1;
color: #ffffff;
font-size: 70%;
}
form .sample {
display: block;
margin: 0.5em 0;
padding-left: 1em;
text-indent: -1em;
line-height: 1;
color: #555555;
font-size: 80%;
}
form .sample:before { content: "※"; }
form .error {
display: block;
margin: 0.25em 0 0;
padding-left: 1em;
text-indent: -1em;
line-height: 1;
color: #ff0000;
font-size: 90%;
font-weight: bold;
}
form .error:before { content: "※"; }
/* ================================================================
フォームスタイル
=================================================================== */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="number"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #999999;
border-radius: 2px;
background-color: #ffffff;
max-width: 100%;
padding: 0.25em 0.5em;
height: 2.25em;
font-size: 14px;
color: #666 !important;
font-family: "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
