Размер ввода против ширины

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

или

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

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

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

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

Редактировать: я должен был упомянуть, что 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>

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

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

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

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

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

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

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

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

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

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

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

Вы можете изменить размер, используя стиль и ширину, чтобы изменить размер текстового поля. Вот код для этого.

<!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>

Используйте выравнивание, чтобы центрировать текстовое поле.

И sizeатрибут в HTML, и widthсвойство в CSS будут устанавливать ширину <input>. Если вы хотите установить ширину, равную ширине каждого символа, используйте **ch**единицу, как в:

input {
    width: 10ch;
}

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

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