Я немного запутался в различии между атрибутами maxlength и size.
<input type="text" name="telephone" maxlength="30" size="34">
Я знаю, что maxlength используется для управления входными данными. Итак, в чем причина одновременного использования обоих атрибутов?
Атрибут maxlength (not max-length) указывает максимальную длину входной строки в символах или, точнее, в единицах кода. Предполагается, что браузер выполнит это, отказавшись принять больше символов. Однако это не предназначено для того, чтобы действовать как мера безопасности, поскольку ее можно переопределить тривиально. Скорее, он сообщает пользователю, что больше не будет приниматься символов при обработке данных. Это полезно, когда вам нужно установить верхний предел, например. ваша база данных может хранить только фиксированное количество символов fpr для некоторой информации, а также когда существует логический предел длины (например, если данные представляют собой двухбуквенный код для американского штата, у него есть логический верхний предел 2).
Таким образом, атрибут maxlength является логичным, и ожидается, что он будет работать даже в не визуальном пользовательском интерфейсе. Он не должен влиять на визуальный внешний вид поля ввода.
Атрибут size, напротив, предназначен только для визуального рендеринга. Это предполагает видимую ширину поля в терминах "средних" символов. Эта неопределенная концепция не уточняется в спецификациях, и браузеры реализуют ее непоследовательно. Он работает лучше всего, когда используется моноширинный шрифт. Этот атрибут не ограничивает количество введенных символов, но влияет на удобство использования: трудно ввести, скажем, строку длиной 30 символов в поле, которое позволяет видеть только 10 символов за раз. Ширина поля также является сигналом для пользователя: он указывает ожидаемую максимальную ширину входа.
Часто бывает полезно использовать оба атрибута, часто с одинаковым значением. Например, если поле предназначено для 5-значного почтового кода, подходит size=5 maxlength=5, особенно если вы также установите font-family: monospace, чтобы фактическая ширина была более или менее ровно пяти цифр.
Однако значения могут отличаться. Например, при запросе строки в почтовом адресе вы можете установить size=30, так как это обычно достаточно для строки, но maxlength=80, если это соответствует ограничениям, установленным вашей базой данных или обработкой данных, и у вас нет особая причина не в таких длинных очередях.
Атрибут size в принципе может быть заменен на CSS, поскольку он касается только визуального рендеринга. Однако ширина обычно лучше всего задается в символах, и нет универсально поддерживаемой единицы для средней ширины символа в CSS; новый блок ch близок, но не совсем то же и не поддерживается старыми браузерами.
max-length используется для указания количества символов, которые могут быть введены в поле ввода независимо от того, насколько большие поля появляются на экране. Атрибут size определяет, насколько широкое поле будет отображаться на экране.
Например, я обычно использую это для таких вещей, как ввод адреса электронной почты, где он может быть довольно длинным, но по эстетическим соображениям (хороший веб-дизайн) вы хотите, чтобы поле ввода было определенной длины.
<input type="text" name="email" maxlength="50" size="20">
Когда пользователь вводит более 20 символов для своего адреса электронной почты, поле начинает прокручиваться по мере их ввода.
Максимальная длина относится к максимально возможной длине входной строки. Размер относится к размеру самого входа.
size "насколько большой" он должен быть на экране. max-length - максимальное количество символов, которые браузер должен разрешить вводить в поле. Они совсем не связаны. У вас может быть size = 50 kajillion, max-length=1, если вы хотите стать садистским дизайнером страниц.