Input размер поля: Как установить ширину текстового поля в пикселах?
Атрибут size тега | HTML справочник
HTML тег <input>Значение и применение
Атрибут size (HTML тега <input>) определяет ширину для элемента (в символах). Только для элементов управления следующих типов: text, search, tel, url, email и password (остальные игнорируются). Значение по умолчанию 20 символов.
Обращаю Ваше внимание, что вы можете указать максимально допустимое количество символов в элементе с использованием атрибута maxlength.
Поддержка браузерами
Синтаксис:
<input size = "number">
Значения атрибута
| Значение | Описание |
|---|---|
| number | Задает ширину элемента <input> в символах (значение должно быть больше нуля). Значение по умолчанию 20. |
Отличия HTML 4.01 от HTML 5
Нет.Пример использования
<!DOCTYPE html> <html> <head> <title>Использование атрибута size HTML тега <input></title> </head> <body> <form name = "myForm"> <!-- создаем форму --> <input type = "text" size = "3" value = "3"><br> <!-- ширина элемента 3 символа --> <input type = "text" size = "5" value = "5"><br> <!-- ширина элемента 5 символов --> <input type = "text" size = "10" value = "10"><br> <!-- ширина элемента 10 символов --> <input type = "text" value = "20 (по умолчанию)"><br> <!-- ширина элемента 20 символов (по умолчанию) --> </form> </body> </html>
В данном примере мы создали форму (HTML тег <form>). Внутри формы мы поместили элементы управления <input> для ввода текстовой информации, для которых с помощью атрибута size мы указали различную ширину элементов (3
Результат нашего примера:
Пример использования атрибута size HTML тега <input>.HTML тег <input>Тюнинг резинового текстового поля / Хабр
Думаю, что многим верстальщикам (и не только) приходилось верстать текстовые поля (), задавая им произвольные размеры. Но как сделать данный элемент резиновым и удовлетворить условиям:- Возможность установки любых горизонтальных и вертикальных отступов у текста;
- Элемент должен занимать весь контейнер, в который он помещен;
- Клик мышью в любое место текстового поля устанавливает в нем курсор.
Ответ достаточно прост и решается следующим методом:
Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.
Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border) и
width = width + padding-left + padding-right
Т.е. она будет больше на величину внутренних горизонтальных отступов, и получившийся при этом элемент будет выступать за отведенную для него область.
<div> <div> <input type="text" value="" /> <div> </div>
Каждый контейнер выполняет свою роль:
- input-width – этот контейнер задает результирующую ширину текстового поля;
- width-setter – этот контейнер задает ширину input-элемента за вычетом горизонтальных внутренних отступов.
Вот набор стилей, который разъяснит эту конструкцию:
.input-width {
height:23px;
border:1px solid #999;
background:#fff;
}
.width-setter {
height:23px;
margin:0 9px;
}
.width-setter input {
width:100%;
height:14px;
padding:4px 9px 5px;
margin:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:14px;
color:#000;
border:0 none;
background:#9C6;
}
Пример 1
Из стилей получается, что элемент input-width задает ширину, которую должно было занимать текстовое поле. Элемент width-setter задает ширину input-элемента меньше на горизонтальные внутренние отступы. Стоит заметить, что его внешние отступы поля (margin) должны быть равны padding-left и padding-right для элемента input.
При таком описании input-элемент будет выступать из width-setter
Опишем по-новому исходный набор контейнеров:
.input-width {
height:23px;
border:1px solid #999;
background:#fff;
}
.width-setter {
height:23px;
margin:0 9px;
position:relative;
}
.width-setter input {
width:100%;
height:14px;
padding:4px 9px 5px;
margin:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
line-height:14px;
color:#000;
border:0 none;
background:#9C6;
position:absolute;
left:-9px;
top:0;
}Пример 2
В итоге, при применении таких стилей выполняются поставленные в начале задачи. Текстовое поле получилось с заданными отступами резиновым и кликабельным в любом его месте.
Чтобы задать конкретную ширину итоговому элементу, необходимо лишь прописать свойство
Примечание. Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) — и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.
Атрибут height тега | HTML справочник
HTML тег <input>Значение и применение
Атрибут height (HTML тега <input>) задает высоту элемента.
Атрибут используется только с элементами управления, которые определяют графическую кнопку «отправить форму» (<input type = «image»>).
Поддержка браузерами
Синтаксис:
/* значение указывается цифрой (нет необходимости добавлять px) */ <input height = "pixels"> Например: <input height = "50">
Значения атрибута
| Значение | Описание |
|---|---|
| pixels | Задает высоту элемента в пикселях. |
Отличия HTML 4.01 от HTML 5
Атрибут height считается новым в HTML 5.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута height HTML тега <input></title> </head> <body> <form> Login: <input type = "text" name = "login"><br><br> <input type = "image" src = "../../images/right2.png" alt = "submit" width = "40" height = "40"> </form> </body> </html>
В данном примере мы создали элемент управления, который определяют графическую кнопку «отправить форму» (<input type = «image»>). В атрибуте src элемента мы указали относительный путь к файлу с изображением, в атрибуте alt указали альтернативный текст, для того случая если изображение по каким-то причинам не будет загружено. Размеры изображения в пикселях мы задали с использованием атрибутов width (ширина) и height (высота).
Результат нашего примера:
Пример использования атрибута height HTML тега <input> (высота элемента).HTML тег <input>Динамическая ширина текстового поля ввода (HTML)
Как я могу иметь текстовое поле, которое наследует ширину его контейнера?
например, у меня есть div, внутри которого есть текстовое поле.
<div>
<input type='text' name='txtUsername'>
</div>
что я хотел сделать, так это изменить размер браузера, текстовое поле должно соответствовать ширине родительского div.
С кодом выше текстовое поле всегда переполняется контейнером, когда я изменяю размер браузера на меньшую ширину.
3 ответов
вы должны использовать box-sizing:border-box вместе с width:100%.
Таким образом input будет соответствовать 100% ширины контейнера, но не будет переполнять его из-за добавленного inputс подкладкой:
#content input
{
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
демо: http://jsfiddle.net/745Mt/1/
подробнее о box-sizing CSS свойство с примерами:http://css-tricks.com/box-sizing/
12
автор: keaukraine
просто добавить style='width:100%;' (или сколько % вам нужно) на вход
<div> <input type='text' name='txtUsername'> </div>
0
автор: Maksym Stepanenko
вы пытались установить ширину входного сигнала на 100%? например,
input {width:100%;}
Как можно определить размер текстового поля input в HTML? — html
Вот текстовое поле HTML input:
<input type="text" name="text_name" />
Каковы параметры для определения размера коробки?
Как это может быть реализовано в CSS?
html css inputПоделиться Источник osos 25 сентября 2011 в 11:48
5 Ответов
108
Вы можете установить его width :
<input type="text" name="text_name" />
или еще лучше определить класс:
<input type="text" name="text_name" />
а в отдельном файле CSS нанесите необходимый стайлинг:
.mytext {
width: 300px;
}
Если вы хотите ограничить количество символов, которые пользователь может ввести в этот textbox, вы можете использовать атрибут maxlength :
<input type="text" name="text_name" maxlength="25" />
Поделиться Darin Dimitrov 25 сентября 2011 в 11:49
43
Атрибут size также работает:
<input size="25" type="text" />
Поделиться Fuzzy Analysis 20 июля 2013 в 14:11
7
Попробовать это
<input type="text">
Иначе
<input type="text">
с помощью css:
#txtbox
{
font-size:18pt;
height:420px;
width:200px;
}
Поделиться Janarthanan Ramu 09 сентября 2015 в 05:36
1
Вы можете установить ширину в пикселях с помощью встроенного стиля:
<input type="text" name="text">
Вы также можете установить ширину с видимой длиной символа:
<input type="text" name="text" size="35" />
Поделиться betrice mpalanzi 13 ноября 2016 в 12:35
-2
<input size="45" type="text" name="name">
«size» указывает видимую ширину в символах элемента input.
Вы также можете использовать высоту и ширину от css.
<input type="text" name="name">
Поделиться Daniel dos Santos 14 февраля 2019 в 10:46
Похожие вопросы:
Как изменить размер текстового поля Swing?
Я написал код ниже: public class Information extends JFrame{ private JComboBox comboBox1; private JComboBox comboBox2; private JTextField textField[]; private JTextField jtextField; private JLabel…
Можно ли программно определить положение курсора в элементе _26?
Предполагая, что обычный текстовый блок <input type=text> с данными в нем. Можно ли определить (через JavaScript) положение текстового курсора внутри этого текстового поля? Я могу обнаружить…
Как сделать просто некоторый текст, внутри текстового поля input, полужирным?
Я пытаюсь выделить жирным шрифтом определенный текст внутри текстового поля input. Я не знаю, как это сделать, так как код html не интерпретируется внутри текстового поля, поэтому ничего подобного…
Можно ли установить цвет выделения текстового поля html form input?
Я хочу иметь возможность указать цвет подсветки, который появляется вокруг текстового поля input , когда пользователь выбирает его. По умолчанию (на Mac) это всегда кажется светло-синим цветом, как…
Как изменить размер текстового поля в IE9?
Я могу изменить размер текстового поля в Chrome & других браузерах. Однако я не могу сделать ту же работу в IE9, даже после установки Chrome frame для IE. Я использую для бывших:…
Как изменить размер текстового поля в Chrome?
Мне нужно изменить размер текстового поля в google Chrome. Я хочу, чтобы иметь возможность перетащить конец текстового поля по горизонтали & по вертикали. Это то, что я пробовал до сих пор. Я…
Selenium WebDriver: размер текстового поля
Я застрял с одной основной проблемой в Selenium WebDriver: Как проверить емкость текстового поля в форме? Я использовал .sendKeys (строка) , а затем я попытался получить текст обратно .getText() ,…
Как вы сопоставляете размер и максимальную длину текстового поля ввода?
Как вы сопоставляете размер и максимальную длину текстового поля ввода? Это очень раздражает, что атрибуты maxlength и size не выстраиваются в линию и зависят от использования шрифта. Example…
Как установить размер текстового поля HTML?
Как установить размер текстового поля HTML?
Размер текстового поля в Flash
Есть ли способ получить размер динамического текстового поля во время выполнения?
Размер атрибута тега | HTML-справочник
HTML тегЗначение и применение
Размер атрибута (HTML тега ) определяет ширину для элемента (в символах). Только для элементов управления следующих типов: текст, поиск, тел., URL, адрес электронной почты и пароль (остальные игнорируются). Значение по умолчанию 20 символов.
Обращаю Ваше внимание, что вы можете указать максимально допустимое количество символов в элементе с использованием атрибута maxlength.
Поддержка браузерами
Синтаксис:
Значения атрибута
| Значение | Описание |
|---|---|
| number | Задает ширину элемента в символах (значение должно быть больше нуля). Значение по умолчанию 20. |
Отличия HTML 4.01 от HTML 5
Нет.Пример использования
Использование атрибута size HTML тега <input>
В данном примере мы создали форму (HTML тег
