<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, установленный в px, будет по меньшей мере последовательным, по модулю вопросам размерности окна. Вы также можете установить стиль в em, если хотите его по размеру относительно шрифта (хотя, опять же, это будет непоследовательно, если вы не установите тип и размер входных данных font), или "%, если вы делаете форма жидкой формы. В любом случае, таблица стилей, вероятно, предпочтительнее встроенного атрибута style.
Вам все еще нужно size для <select multiple>, чтобы высота соответствовала параметрам. Но я бы не использовал его на <input>.
Я хочу сказать, что это противоречит "обычной мудрости", но я обычно предпочитаю использовать размер. Причина этого - причина, по которой многие люди не говорят: ширина поля будет варьироваться от браузера к браузеру, в зависимости от размера шрифта. В частности, он всегда будет достаточно большим, чтобы отображать указанное количество символов, независимо от настроек браузера.
Например, если у меня есть поле даты, я обычно хочу, чтобы поле было достаточно большим, чтобы отображать 8 или 10 символов (двухзначный месяц и день и два или четыре цифры года с разделителями). Установка атрибута размера по существу гарантирует мне, что вся дата будет видна с минимальным затраченным пространством. Аналогично для большинства чисел - я знаю диапазон ожидаемых значений, поэтому я устанавливаю атрибут size в соответствующее количество цифр, а также десятичную точку, если это применимо.
Насколько я могу судить, ни один атрибут CSS не делает этого. Например, установка ширины в em основывается на высоте, а не на ширине, и поэтому не очень точная, если вы хотите отобразить известное количество символов.
Конечно, эта логика не всегда применяется - поле ввода имени, например, может содержать любое количество символов. В этих случаях я вернусь к свойствам ширины CSS, обычно в px. Однако я бы сказал, что большинство полей, которые я создаю, имеют какой-то известный контент, и, указав атрибут size, я могу убедиться, что большая часть контента в большинстве случаев отображается без обрезки.
Я только что столкнулся с борьбой с таблицей, которую я не мог сделать меньше, независимо от того, какой элемент, который я пытался уменьшить ширину таблицы, остался прежним. Я искал с помощью firebug, но не смог найти элемент, который так сильно устанавливал ширину.
Наконец, я попытался изменить атрибут размер входных текстовых элементов и исправил его. По какой-то причине атрибут размер превысил ширину css. Я использовал jQuery для динамического добавления строк в таблицу, и именно эти строки содержали входы. Поэтому, возможно, когда речь заходит о динамическом добавлении входов с помощью функции appendTo(), возможно, лучше установить атрибут size вместе с шириной.
HTML управляет семантическим значением элементов. CSS управляет макетом/стилем страницы. Используйте CSS, когда вы контролируете свой макет.
Короче говоря, никогда не используйте size = ""
Вы получите большую согласованность, если используете ширину (второй пример).
Вы можете изменить размер, используя стиль и ширину, чтобы изменить размер текстового поля. Вот код для этого.
<!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;
}