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

Ответ 1

Вы можете использовать оба. Стиль 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>

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

input {
    width: 10ch;
}