Розмір введення та ширина

<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 символів (двозначний місяць і день і два або чотиризначний рік з роздільниками). Встановлення атрибуту size по суті гарантує мені, що вся дата буде видимою, з мінімальним витраченим простором. Аналогічно для більшості чисел - я знаю очікуваний діапазон значень, тому я встановлю атрибут розміру на відповідну кількість цифр плюс десяткову точку, якщо це застосовується.

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

Звичайно, ця логіка не завжди застосовується - наприклад, поле для введення імені може містити будь-яку кількість символів. У цих випадках я повернусь до властивостей ширини CSS, як правило, в px. Однак я б сказав, що більшість полів, які я створюю, мають якийсь відомий вміст, і, вказавши атрибут size, я можу переконатися, що більша частина вмісту, в більшості випадків, відображається без відсікання.

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

Нарешті я спробував змінити атрибут розміру елементів вхідного тексту, і це виправлено. Чомусь атрибут size перевершує ширину css. Я використовував jQuery для динамічного додавання рядків до таблиці, і саме ці рядки містили вхідні дані. Тому, можливо, якщо мова йде про динамічне додавання входів за допомогою функції appendTo (), можливо, краще встановити атрибут 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;
}

HTML керує смисловим значенням елементів. CSS контролює макет / стиль сторінки. Використовуйте CSS, коли ви керуєте макетом.

Словом, ніколи не використовуйте size = ""