入力サイズと幅

231 
<input name="txtId" type="text" size="20" />

または

<input name="txtId" type="text" style="width: 150px;" />

最適なクロスブラウザコードはどれですか？

もちろん、要件によって異なりますが、人々がどのように決定し、どのような根拠に基づいているかを知りたいのです。

html  css 
— ラジャクク
ソース
17
通常、Webで「px」を使用することはお勧めできません。代わりに相対単位（ "em"、 "％"など）の使用を検討してください。
— kangax 2009
37
@kangaxそれはただの意見です。pxの使用に関してコンセンサスはありません
— Kos
7
@コスそれは一種のコンセンサスでした。（IEや他の古いブラウザを使用して）もうなくなることはない
— kangax 2015
9
@kangax私はそのメモを得たことはありません...私はいつもpxを使い、常に持っています。
— Andrew

回答:

180

両方使用できます。CSSスタイルは、sizeCSSをサポートするブラウザーの属性をオーバーライドし、フィールドを正しい幅にします。そうでない場合は、指定された文字数にフォールバックします。

編集：size属性は正確なサイズ変更方法ではないことを述べました。HTML仕様によると、これは入力が一度に表示できる現在のフォントの文字数を参照する必要があります。

ただし、指定されたフォントが固定幅/等幅フォントでない限り、これは指定された数の文字が実際に表示されることを保証するものではありません。ほとんどのフォントでは、異なる文字は異なる幅になります。この質問には、この問題に関連するいくつかの良い答えがあります。

以下のスニペットは、両方のアプローチを示しています。

@font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}
<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>
スニペットを展開

— マーク・ベル
ソース
2
@Mark B.ご回答ありがとうございます。ここでは質問にインラインスタイルを使用しました。
— rajakvk
心配は無用です-あなたが持っているのではないかと思いましたが、念のため指摘しました。
— マークベル
ほとんどのフォントはモノ幅ではありません。「一度に表示できる文字数」について・・・どの文字ですか？
— Pacerier、2015年
@Pacerier入力が使用しているフォントの文字数
— Mark Bell
1
@jbyrdはい、そうです—しかし、HTML仕様によると答えは正しいです。少しわかりやすくするために、回答を編集しました。
— Mark Bell
49

おそらく、最良の方法は、スタイルの幅をem単位で設定することですstyle='width:20em':) 20文字の入力サイズの場合は、次のように設定します:)

— 思想家
ソース
4
興味深い点ですが、私のテストではwidth：20emを使用すると、入力が20文字よりはるかに大きくなります。
— クリストフ
32
「em」は「M」文字の高さの尺度です。そのため、ボックスが大きくなりすぎます。
— humbads 2013
9
CSSでは、emはその直接または最も近い親のfont-sizeを基準にしています。例：要素の継承されたfont-sizeが16pxで、font-sizeを2emに設定した場合、結果のサイズは32px（16px * 2em）になります。「em」の単位は文字数ではありません。詳細：w3.org/TR/css3-values/#font-relative-lengths and kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs and j.eremy.net/confused -about-rem-and-em
— delroh 2014
1
@humbads 「M」文字の幅の測定値を意味するのではないですか？
— Jess
5
@ジェス、いい質問だ。ではタイポグラフィ、「日」「M」の文字の幅を意味するために使用。長い間、私は同じことを信じていました。ただし、CSSとデジタルタイポグラフィでは、「em」はポイント単位でのフォントの高さと同じです。これは、「M」文字を持たない文字セット、または「M」がフォントの高さまたは幅全体ではない文字セットに対応するためです。
— humbads
21

size は、さまざまなブラウザおよびそれらの可能なフォント設定間で一貫性がありません。

widthPXでのスタイルセットは、少なくとも一貫して、モジュロボックスサイジングの問題を。フォントに対して相対的にサイズを設定する場合は、スタイルを「em」に設定することもできます（ただし、入力のfontファミリとサイズを明示的に設定しない限り、これは一貫性がありません）。液体レイアウトフォーム。いずれにせよ、スタイルシートはおそらくインラインよりも望ましいですstyle属性ます。

あなたはまだ必要とするsizeため<select multiple>、適切なオプションと並ぶように高さを取得します。しかし、私はそれを使用しません<input>。

— ボビンス
ソース
13

これは「従来の知恵」に反すると言いたいのですが、私は一般的にサイズを使用することを好みます。この理由は、多くの人がそうではないと言う理由です。フィールドの幅は、フォントサイズに応じて、ブラウザーによって異なります。具体的には、ブラウザの設定に関係なく、常に指定された数の文字を表示するのに十分な大きさになります。

たとえば、日付フィールドがある場合、通常はフィールドに8文字または10文字（2桁の月と日と2桁または4桁の年、区切り記号付き）を表示するのに十分な幅が必要です。サイズ属性を設定すると、無駄なスペースを最小限に抑えながら、日付全体が表示されることが保証されます。同様に、ほとんどの数値について-予想される値の範囲がわかっているので、size属性を適切な桁数に加えて、該当する場合は小数点に設定します。

私の知る限り、CSS属性はこれを行いません。たとえば、emで幅を設定することは、幅ではなく高さに基づいて行われるため、既知の数の文字を表示する場合はあまり正確ではありません。

もちろん、このロジックは常に適用されるわけではありません。たとえば、名前入力フィールドには、任意の数の文字を含めることができます。そのような場合は、CSS幅のプロパティ（通常はpx）にフォールバックします。しかし、私はフィールドの大半は、私が知られているコンテンツのいくつかの並べ替えを持って行い、サイズ属性を指定することによって、私はことを確認することができると言うでしょう、ほとんどのコンテンツのは、中にほとんどの場合、クリッピングなしで表示されます。

— ibrewster
ソース
このためにexユニットを使用することもできますが、サイズを使用すると、CSSの幅に数十のID /クラスが含まれないため、ほとんどの場合は簡単になります。
— 40年
@フォーティ実際にはできません。exのように、幅ではなく、文字の高さ（具体的には「X」）emです。文字の高さと幅（xまたはその他）の間に固定の関係がないため、文字の高さを使用してフィールドの幅を設定すると、フィールドが適切な幅になり、与えられた数の文字。フォントに応じて、幅が広くなったり狭くなったりします。chユニットは有望に見えますが、9未満のIEではサポートされていません。これは、私がこれを書いたときに問題でした。
— ibrewster
はい。ただし、xの高さは通常幅よりも小さいことはありません。ほとんどの場合、実際には少し高いかほぼ同じなので、非常に近くなります。ch残念ながらもっと良くなったかもしれませんが、一部のゼロは薄く、文字スペース全体を測定できない場合があります...
— Forty
@Forty True、つまり、入力フィールドの幅を特定の文字数に設定するための適切なCSS属性はないが、size属性がそれを正確に行うよう努めているという私の元のポイントを強化します。あなたは正しいかもしれませんexが、妥当な代替手段ですが、それは高さ属性であり、幅属性ではないという事実は変わりません。size幅属性であり、単なるcssではありません。
— ibrewster 2017年
使用するには十分に近いが、この場合は実用的ではない:)
— 40年
4

テーブルの幅を小さくしようとしてどの要素を小さくしようとしても、小さくすることができないテーブルとの戦いを終えたところです。firebugを使用して検索しましたが、幅を高く設定している要素が見つかりませんでした。

最後に、入力テキスト要素のサイズ属性を変更してみましたが、修正されました。何らかの理由で、サイズ属性がCSSの幅を上書きしました。テーブルに行を動的に追加するためにjQueryを使用していて、入力を含んでいたのはこれらの行でした。したがって、おそらくappendTo（）関数を使用して動的に入力を追加することになると、幅とともにサイズ属性を設定する方が良いでしょう。

— マーク
ソース
1

スタイルと幅を使用してテキストボックスのサイズを変更できます。以下がそのコードです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<div align="center">

    <form method="post">
          <div class="w3-row w3-section">
            <div class="w3-rest" align = "center">
                <input name="lastName" type="text" id="myInput" style="width: 50%">
            </div>
        </div>
    </form>
</div>
</body>
</html>
スニペットを展開

テキストボックスを中央に配置するには、alignを使用します。

— シャー
ソース
1

sizeHTML の属性とwidthCSS のプロパティの両方がの幅を設定し<input>ます。幅を各文字の幅に近い値に設定する場合は、次のように**ch**単位を使用します。

input {
    width: 10ch;
}
— クリスボーマン22
ソース
0

HTMLは要素の意味の意味を制御します。CSSはページのレイアウト/スタイルを制御します。レイアウトを制御する場合はCSSを使用してください。

つまり、決してsize = ""を使用しないでください。

— クリス・ソボレフスキー
ソース
サイズは要素の意味に固有のものである場合があります。たとえば、ミドルネームの頭文字は1文字です。データベースに名前がない限り、OTOHという名には固有のサイズ制限はありません。
— derobert
4
@derobert：私は間違っているかもしれませんが、通常は、入力[type = text | password]にmaxlength-attributeを使用し、size-attributeを使用しないと表現します。
— Horst Gutmann、
2
@Horst：まあ、私はミドルイニシャルを両方で表現します（その制限はユーザーにとって理にかなっているため）と、データベースはmaxlengthでのみ制限します。
— derobert
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.