フォーム｜入力欄の長さを最適化

フォームをコーディングするとき、各項目の長さをどれくらいにするかを考えることがあります。毎回考えなくても済むように、コピペで使えるフォームのフォーマットサンプルを考えました。

ページの余白が大きいからといって、入力欄を大きくしすぎるのもおかしいし。。。

小さすぎると文字数が多い場合に入力した文字すべてが表示されないし。。。

ここでは、最適な文字数にあうんじゃないかな～と思うサンプルを紹介します。
※もちろんあくまで参考にしていただければと思うので、用途やシーンに応じて幅は変更してくださいね！

使用する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文字

　全角4文字

〒　半角7文字

〒 – 　半角3文字＋半角4文字

　全角5文字

　全角25文字

　半角14文字

– – 　半角4文字×3

　半角60文字

　半角34文字

Source

<input type="text" placeholder="xsのとき100％、smのとき50％" class="size-xs-100 size-sm-50">　[xs]-[sm]-[md]-[lg] 各5～100％の間で5％刻み
<hr>
<input type="text" placeholder="氏名" class="size-input-name">　全角15文字
<hr>
<input type="text" placeholder="氏" class="size-input-nameS">
<input type="text" placeholder="名" class="size-input-nameS">　全角7文字×2
<hr>
<input type="text" placeholder="会社名" class="size-input-company">　全角16文字
<hr>
<input type="text" placeholder="部署名" class="size-input-division">　全角16文字
<hr>
<input type="text" placeholder="従業員数" class="size-input-quantity">　全角4文字
<hr>
〒 <input type="text" placeholder="7桁" class="size-input-zip" maxlength="8">　半角7文字
<hr>
〒 <input type="text" placeholder="上3桁" class="size-input-zip3" maxlength="3"> - <input type="text" placeholder="下4桁" class="size-input-zip4" maxlength="4">　半角3文字＋半角4文字
<hr>
<input type="text" placeholder="都道府県" class="size-input-pref">　全角5文字
<hr>
<input type="text" placeholder="住所" class="size-input-address">　全角25文字
<hr>
<input type="text" placeholder="電話番号" class="size-input-tel" maxlength="14">　半角14文字
<hr>
<input type="text" placeholder="市外局番" class="size-input-telS" maxlength="4"> - <input type="text" placeholder="市内局番" class="size-input-telS" maxlength="4"> - <input type="text" placeholder="加入者番号" class="size-input-telS" maxlength="4">　半角4文字×3
<hr>
<input type="text" placeholder="Web site" class="size-input-homepage">　半角60文字
<hr>
<input type="text" placeholder="メールアドレス" class="size-input-email ">　半角34文字

<input type="text" placeholder="xsのとき100％、smのとき50％" class="size-xs-100 size-sm-50">　[xs]-[sm]-[md]-[lg] 各5～100％の間で5％刻み

<hr>

<input type="text" placeholder="氏名" class="size-input-name">　全角15文字

<hr>

<input type="text" placeholder="名" class="size-input-nameS">　全角7文字×2

<hr>

<input type="text" placeholder="会社名" class="size-input-company">　全角16文字

<hr>

<input type="text" placeholder="部署名" class="size-input-division">　全角16文字

<hr>

<input type="text" placeholder="従業員数" class="size-input-quantity">　全角4文字

<hr>

〒 <input type="text" placeholder="7桁" class="size-input-zip" maxlength="8">　半角7文字

<hr>

〒 <input type="text" placeholder="上3桁" class="size-input-zip3" maxlength="3"> - <input type="text" placeholder="下4桁" class="size-input-zip4" maxlength="4">　半角3文字＋半角4文字

<hr>

<input type="text" placeholder="都道府県" class="size-input-pref">　全角5文字

<hr>

<input type="text" placeholder="住所" class="size-input-address">　全角25文字

<hr>

<input type="text" placeholder="電話番号" class="size-input-tel" maxlength="14">　半角14文字

<hr>

<input type="text" placeholder="市外局番" class="size-input-telS" maxlength="4"> - <input type="text" placeholder="市内局番" class="size-input-telS" maxlength="4"> - <input type="text" placeholder="加入者番号" class="size-input-telS" maxlength="4">　半角4文字×3

<hr>

<input type="text" placeholder="Web site" class="size-input-homepage">　半角60文字

<hr>

<input type="text" placeholder="メールアドレス" class="size-input-email ">　半角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;
}

/* ================================================================

　フォーム整形

=================================================================== */

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;

}

使用するclass名

View

Source

Share this:

Like this: