Размер входного сигнала vs ширина

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

или

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

какой из них является оптимальным кросс-браузерным кодом?

конечно, это зависит от требований, но мне любопытно знать, как люди решают и на каком основании.

198
css html

7 ответов

вы можете использовать оба. Стиль css переопределит size атрибут в браузерах, которые поддерживают CSS и делают поле правильной ширины, а для тех, кто этого не делает, он будет возвращаться к указанному количеству символов.

Edit: Я должен был упомянуть, что 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>
151

Я предлагаю, вероятно, лучший способ-установить ширину стиля в единице em:) поэтому для размера ввода 20 символов просто установите style='width:20em' :)

42

size несовместимо в разных браузерах и их возможных настройках шрифта.

на width набор стилей в px будет, по крайней мере, согласованным, по модулю проблемы с размером коробки. Вы также можете установить стиль в "em", если хотите изменить его размер относительно шрифта (хотя опять же, это будет непоследовательно, если вы не установитеfont семейство и размер явно), или"%", если вы делаете форму жидкого макета. Так или иначе, стилей наверное предпочтительнее встроенного .

вам все еще нужно size на <select multiple> чтобы получить высоту, чтобы правильно выстроиться с параметрами. Но я бы не стал использовать его на <input>.

20

Я хочу сказать, что это противоречит "общепринятой мудрости", но я обычно предпочитаю использовать размер. Причина этого именно в том, что многие люди говорят не: ширина поля будет варьироваться от браузера к браузеру, в зависимости от размера шрифта. В частности, он всегда будет достаточно большим для отображения указанного количества символов, независимо от настроек браузера.

например, если у меня есть поле даты, я обычно хочу, чтобы поле было достаточно широким для отображения либо 8 или 10 символов (двухзначный месяц и день и двух-или четырехзначный год, с разделителями). Установка атрибута size по существу гарантирует мне, что вся дата будет видна, с минимальным потраченным впустую пространством. Аналогично для большинства чисел-я знаю диапазон ожидаемых значений, поэтому я установлю атрибут size на правильное количество цифр плюс десятичную точку, если это применимо.

насколько я могу судить, никакой атрибут CSS этого не делает. Например, установка ширины в em основана на высота, а не ширина, и поэтому не очень точна, если вы хотите отобразить известное количество символов.

конечно, эта логика не всегда применима - например, поле ввода имени может содержать любое количество символов. В этих случаях я вернусь к свойствам ширины CSS, как правило, в px. Однако я бы сказал, что большинство полей, которые я делаю, имеют какое-то известное содержимое, и, указав атрибут size, я могу убедиться, что большинство контент, в большинство случаях, отображается без искажений.

13

Я только что закончил борьбу с таблицей, которую я не мог сделать меньше, независимо от того, какой элемент я пытался сделать меньше, ширина таблицы оставалась прежней. Я искал с помощью firebug, но не мог найти элемент, который устанавливал ширину так высоко.

наконец, я попытался изменить атрибут размере входных текстовых элементов и это исправлено. По какой-то причине атрибут размере переехал ширину css. Я использовал jQuery для динамически добавлять строки в таблицу, и именно эти строки содержат входные данные. Поэтому, возможно, когда дело доходит до динамического добавления входов с помощью функции appendTo (), возможно, лучше установить атрибут размере вместе с шириной.

2

HTML управляет семантическим значением элементов. CSS управляет макетом / стилем страницы. Используйте CSS, когда вы контролируете свой макет.

короче говоря, никогда не используйте size=""

1

вы получите больше согласованности, если используете width (ваш второй пример).

1