Как можно определить размер текстового поля ввода в HTML?

92

Вот текстовое поле ввода HTML:

<input type="text" id="text" name="text_name" />

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

Как это можно реализовать в CSS?

html css input

— Osos
источник

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

— Тони

В некоторых случаях просто установка max-widthдостаточно

— Christophe Roussy

130

Вы можете установить его width:

<input type="text" id="text" name="text_name" style="width: 300px;" />

или даже лучше определить класс:

<input type="text" id="text" name="text_name" class="mytext" />

и в отдельном файле CSS примените необходимый стиль:

.mytext {
    width: 300px;
}

Если вы хотите ограничить количество символов, которые пользователь может ввести в это текстовое поле, вы можете использовать maxlengthатрибут:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

— Дарин Димитров
источник

11

также: вы можете изменить ширину в единицах «em» (а не «px»), и тогда размер будет пропорционален размеру шрифта текстового поля

— Александр Берд

45

sizeАтрибут работы, а также

<input size="25" type="text">

— Нечеткий анализ
источник

1

В каких единицах обычно измеряется этот атрибут размера?

— Томас Кимбер

8

Попробуй это

<input type="text" style="font-size:18pt;height:420px;width:200px;">

Или иначе

 <input type="text" id="txtbox">

с помощью css:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }

— Джанартанан Раму
источник

3

Ваш ответ не добавляет ничего нового, и вы должны указать единицы измерения (px, pt,% v и т. Д.) В css

— Jon P

1

Ну… Размер шрифта (style = "font-size: 18pt") был тем, что я искал, и он также увеличивает размер поля. Хотя OP явно не спрашивает, это также добавляет ценность.

— Wolf5

Это сработало. Поэтому большое спасибо. Однако кажется, что текст центрируется по вертикали. Можно как-нибудь предотвратить это?

— Аарон Джон Сабу

@AaronJohnSabu Извините за задержку .. Попробуйте увеличить размер ширины .. надеюсь, вы уже нашли ответ ..

— Джанартанан Раму

3

Вы можете установить ширину в пикселях с помощью встроенного стиля:

<input type="text" name="text" style="width: 195px;">

Вы также можете установить ширину с видимой длиной символа:

<input type="text" name="text" size="35">

— Betrice mpalanzi
источник

-2

<input size="45" type="text" name="name">

«Размер» определяет видимую ширину в символах ввода элемента.

Вы также можете использовать высоту и ширину из css.

<input type="text" name="name" style="height:100px; width:300px;">

— Даниэль душ Сантуш
источник