For the form below, how could I make the input field big, like maybe 100 pixels in height by 400 pixels in length?
Thanks in advance,
John
<form action="http://www...com/sandbox/comments/comments2.php" method="post">
<input type="hidden" value="'.$_SESSION['loginid'].'" name="uid">
<div class="addacomment"><label for="title">Add a comment:</label></div>
<div class="submissionfield"><input name="title" type="title" id="title" maxlength="1000"></div>
<div class="submissionbutton"><input name="submit" type="submit" value="Submit"></div>
</form>
asked Mar 27, 2010 at 3:31
Any reason not to use a TEXTAREA form element instead?
<textarea rows="5" cols="80" id="TITLE">
</textarea>
answered Mar 27, 2010 at 3:40
SparkySparky
14.8k1 gold badge30 silver badges45 bronze badges
2
you can avoid using the div by applying the class in the <input> itself
your CSS can be
.submissionfield { width: 90px; height: 390px; border: 1px solid #999999; padding: 5px; }
answered Mar 27, 2010 at 3:38
pixeltocodepixeltocode
5,29211 gold badges52 silver badges69 bronze badges
You can add css to the input, like:
.input-element{
font-size: 100px; // for say a select
width: 400px;
}
or you can add height but you might have to add !important to it…
.input-element{
height: 100px !important;
width: 400px;
}
answered Aug 30, 2015 at 2:32
cmaccmac
3,0074 gold badges37 silver badges49 bronze badges
Don’t you need a textarea (example) field?
answered Mar 27, 2010 at 3:40
Thiago BelemThiago Belem
7,6825 gold badges43 silver badges64 bronze badges
for better n bigger input field textarea is effective.
<textarea type="text"
name="pre_book_sugg"
class="form-control"
style="height: calc(2.5em + 4.75rem + 2px);"
>
//input value
answered May 31, 2019 at 7:51
1
You can also change the font-size in the css.
This will make the input boxes bigger, and allow for more readable text.
Chrome
CSS
form input{
font-size: 2em;
}
answered Nov 27, 2019 at 3:12
Длина – это атрибут тега «input», который помогает установить размер текстового поля для пользователя. Тег «input» является основным тегом, когда дело доходит до создания пользовательских форм на HTML. Чтобы создать определенную часть формы с помощью тега «input», нужно правильно определить атрибут. Например, с помощью атрибутов тега «input» можно создать следующие поля:
пункт для ввода текста, где можно собирать фамилию, имя, отчество или короткое сообщение пользователя;
пункт для ввода пароля;
открыть пользователям возможность выбирать пункты радио-списка;
открыть пользователям возможность проводить множественный выбор из списка чекбокса;
скрытые поля, которые появляются только при определенных условиях;
разнообразные кнопки, в том числе и кнопки для отправки формы, очистки формы;
и др.
В HTML5 у тега «input» насчитывается несколько десятков разнообразных атрибутов, которые помогают создавать разнообразные поля. Тег «input» в основном используется внутри тега «form», однако в HTML5 он приобрел самостоятельность и может применяться отдельно.
Разнообразие атрибутов тега «input» велико. Поэтому, постепенно, в своих статьях мы будем рассказывать о каждом. Сегодня мы подробнее остановимся на атрибуте, определяющем текстовое поле формы и подробнее расскажем, что такое длина или размер «input».
Атрибут текстового поля: длина «input»
Важнейшим атрибутом у тега «input» является «type». Именно он определяет какое поле будет перед нами: текстовое, для пароля, чекбокс, радио и др. Поэтому, чтобы определить тег «input», как текстовое поле нужно воспользоваться вот таким синтаксисом:
<input type=»text»/>
Обозначив тег «input» таким образом мы получим текстовое поле в форме, но оно будет с «гибким» размером. То есть, оно растянется на всю ширину контейнера, в котором мы обозначили тег «input». Такой подход не всегда уместен. Иногда нам нужно чтобы текстовое поле было определенного размера. Мы можем это сделать, если задействовать CSS-свойство «width» для конкретного поля «input» или прямо внутри самого тега мы можем задействовать свойство «size». В свойстве «size» нужно прописать какое-то число, где число будет определять ширину поля, а обозначать количество видимых символов.
Кстати, когда говорят «длина input» – это немного не корректное высказывание, потому что правильнее будет говорить «ширина input» или «размер input».
Как выставляется ширина(длина, размер) «input» в HTML на примере
Давайте сверстаем небольшую HTML-форму, где у нас будет текстовое поле «input» заданной ширины. Код будет вот таким:
<!DOCTYPE html>
<html>
<head>
<metacharset=»utf-8″>
<title>Ширина текстового поля</title>
<style>
#userForm {
width: 600px; /*Определяем пиксельную ширину текстового поля с помощью CSS-свойств */
}
</style>
</head>
<body>
<form method=»post» action=»myhandler.php»>
<p>Введите ваше имя:</p>
<p><input type=»text» name=»usernameform» id=»userForm» size=»55″ />
<input type=»submit» name=»SubmitForm» value=»Послать» /></p>
</form>
</body>
</html>
Результат этой формы можно увидеть на рисунке ниже:
Важно отметить, что размер текстового поля «input» в CSS-свойствах можно определить разными единицами измерения: в пикселях, процентах и других измерительных единицах. А в свойстве «size» можно указать только количество видимых текстовых символов в виде числа. На примере, что мы привели выше, мы указали оба варианта определения размера поля «input». На практике так делать не надо, потому что в этом случае сработает только CSS-свойство, так как оно по иерархии главнее, чем внутреннее свойство «size».
Заключение
Сегодня мы рассказали, что длина, ширина и размер текстового поля «input» в HTML – это определения одного и того же свойства и правильно его называть «ширина input». На примере мы показали, что установить размер текстового поля всегда можно при помощи CSS-свойства «width», либо использовать внутреннее свойства текстового поля «input» – «size».
Думаю, что многим верстальщикам (и не только) приходилось верстать текстовые поля (<input type=«text» />), задавая им произвольные размеры. Но как сделать данный элемент резиновым и удовлетворить условиям:
- Возможность установки любых горизонтальных и вертикальных отступов у текста;
- Элемент должен занимать весь контейнер, в который он помещен;
- Клик мышью в любое место текстового поля устанавливает в нем курсор.
Ответ достаточно прост и решается следующим методом:
Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.
Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border) и внешних отступов полей (margin), будет равна:
width = width + padding-left + padding-right
Т.е. она будет больше на величину внутренних горизонтальных отступов, и получившийся при этом элемент будет выступать за отведенную для него область.
Чтобы итоговая ширина была равна 100%, можно использовать систему из двух контейнеров:
<div class="input-width"> <div class="width-setter"> <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 на величину своих горизонтальных отступов (padding), а в IE6 — растягивать всех «родителей» под собственные размеры (пример 1). Также в браузерах IE6-7 input-элемент имеет отступы, которые нельзя убрать, обнуляя свойство margin. Чтобы изменить такое расположение, надо сдвинуть текстовое поле влево, на размер левого отступа (padding-left). Можно это осуществить через position:relative, но при этом в IE6 останется растянутым под ширину текстового поля input контейнер width-setter. Для устранения растяжения надо сделать так, чтобы элемент не мог влиять на размеры своего родителя, задав, например, ему position:absolute.
Опишем по-новому исходный набор контейнеров:
.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
В итоге, при применении таких стилей выполняются поставленные в начале задачи. Текстовое поле получилось с заданными отступами резиновым и кликабельным в любом его месте.
Чтобы задать конкретную ширину итоговому элементу, необходимо лишь прописать свойство width для контейнера input-width.
Примечание. Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) — и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.
Рано или поздно вы получите от дизайнера макет, где встретится он — с виду вроде бы обычный текстовый инпут, а на деле, меняющий свою ширину или высоту, в зависимости от содержимого. Хорошие новости — отчаиваться не будем, это возможно. Причем, возможно достаточно разнообразными способами, об одном из них сегодня и поговорим.
Проблема
Прежде чем кидаться решать проблему — ее нужно осознать. С чего бы начать? Все зависит от поставленной вам задачи. Например: если требуется, чтобы инпут расширялся в ширину — это одна проблема. Если нужно чтобы он рос в высоту — это проблема другая. А если нужно чтобы сразу во все стороны, тут можно начинать страдать, дело-то непростое.
Главная проблема состоит в том, что элементы ввода не умеют растягиваться по своему содержимому. Это очень досадно и конечно мир был бы лучше, если бы они умели, но увы. Более того, однострочное текстовое поле — input вообще бессмысленно растягивать в высоту, содержимое все равно не ляжет в несколько строк, так уж он устроен. Поэтому дальше начинаются любимые фронтендерами лайфхаки.
Варианты решения
Самый первый, приходящий в топ выдачи гугла — это просто взять и заменить инпут на div с атрибутом contenteditable — и вот оно, проблема решена! Вот вам адаптивный по высоте/ширине див и редактируемое содержимое. Но если для вас (как и для меня) это не вариант, то смотрим дальше.
Следующий вариант не назовешь слишком изящным, но работающий вот что важно. Основан на том, что где-то позади самого текстового поля мы прячем невидимый блок, куда дублируем содержимое текстового поля при любом изменении. Блок изменяет свои размеры по содержимому, мы вычисляем их с помощью ява-скрипта и присваиваем текстовому полю. Если вас не смущает дополнительный мусор на странице в виде такого вот костыля — смело можно брать на вооружение.
Ну и третий вариант, который мне больше всего пришелся по душе — это все-таки вычислять содержимое текстового инпута и адаптировать его ширину/высоту, чтобы все помещалось. Давайте на него посмотрим чуть более внимательно.
Выбираем правильный инпут
Прежде всего, понадобится заменить input на textarea. Поскольку инпуты бесполезно наращивать в высоту, лучше сразу возьмем многострочное поле и будем делать вид, что это однострочный инпут.
Добавляем немного стилей, чтобы замаскировать истинную сущность нашего текстового поля.
.textarea {
font-size: 24px;
font-family: Arial;
border-radius: 8px;
resize: none;
padding: 5px;
overflow: hidden;
box-sizing: border-box;
height: 40px;
min-height: 40px;
width: 400px;
margin-bottom: 15px;
}
Тут следует обратить внимание на три обязательных параметра, без которых ничего не сработает: box-sizing, height, min-height.
box-sizing: border-box
В обязательном порядке box-sizing должен быть в значении border-box, чтобы когда вы добавите паддинг в текстовом поле, а вы его обязательно добавите, он не увеличивал дополнительно высоту или ширину текстового поля, а откладывался бы вовнутрь.
height и min-height (width и min-width)
Тут все просто: height — чтобы изначально textarea выглядела бы как input. min-height — чтобы при сбросе значения высоты текстовое поле не прыгало, а оставалось минимально необходимого размера. Все это справедливо и для свойств width и min-width.
Немного теории
Принцип действия очень простой. У каждого DOM-элемента, который может содержать контент, есть readonly-свойство scrollHeight (scrollWidth) которое и содержит так нужную нам, истинную высоту элемента, такую, при которой все содержимое этого элемента будет видно пользователю. Все, что нам требуется — при изменении текстового поля, вычислять значение scrollHeight/scrollWidth и присваивать его текстовому полю.
А для того, чтобы текстовое поле могло еще и возвращаться к своему исходному виду, перед изменением, будем сбрасывать установленную ранее высоту до нуля, для того чтобы свойство scrollHeight корректно бы показало нам, есть ли контент, не умещающийся в текстовом поле.
Немного vanilla JS-практики
Специально не использовала никаких фреймворков, для большей гибкости. Любым удобным способом получаем текстовое поле со страницы и добавляем обработчик события input
const textareaHeight = document.getElementById("text");
textareaHeight.addEventListener("input", (event) => {
textareaHeight.style.height = 0;
textareaHeight.style.height = textareaHeight.scrollHeight + "px";
})
Это ввод с клавиатуры. Не стоит забывать, что текстовые поля бывают заполняются автоматически, извне. Для этого добавляем отдельный метод вставки значения:
function setValue(text: string) {
const textarea = document.getElementById("text");
textarea.style.height = 0;
textarea.value = text;
textarea.style.height = textarea.scrollHeight + "px";
}
Ну и давайте для ширины тоже сделаем. Все то же самое, только тут уже берем input, и высоту меняем на ширину.
const textInput = document.getElementById("text");
textInput.addEventListener("input", (event) => {
textInput.style.width = 0;
textInput.style.width = textInput.scrollWidth + "px";
})
function setValue(text: string) {
const textInput = document.getElementById("text");
textInput.style.width = 0;
textInput.value = text;
textInput.style.width = textInput.scrollWidth + "px";
}
Результат
Вот такие поля получились. Несложно и недолго.
Адаптивный инпут, растущий в высоту:
See the Pen Adaptive Height Text Input with Vanilla JS by dreamhelg (@dreamhelg) on CodePen.dark
Адаптивный инпут, растущий в ширину:
See the Pen Adaptive Width Text Input with Vanilla JS by dreamhelg (@dreamhelg) on CodePen.dark
Angular Директива
Для тех, кто дочитал аж до сюда — бонус. Если лень самостоятельно упаковать все это в директиву, я уже все сделала за вас, смотрите:
@Directive({
selector: "[adaptiveInputDirective]"
})
export class AdaptiveInputDirective implements OnInit {
@Input() horizontal: boolean;
constructor(private element: ElementRef) {}
ngOnInit() {
if (this.horizontal) {
this.element.nativeElement.style.whiteSpace = "nowrap";
}
}
@HostListener("ngModelChange", ["$event"])
onChange(): void {
const input = this.element.nativeElement;
if (this.horizontal) {
input.style.width = 0;
input.style.width = input.scrollWidth + "px";
} else {
input.style.height = 0;
input.style.height = input.scrollHeight + "px";
}
}
}
Здесь используется уже знакомый вам декоратор @HostListener. А если еще не знакомый, то обязательно почитайте статью об этом.
Пример использования:
<textarea formcontrolname="myText" adaptiveinputdirective=""></textarea>
Да, можно обойтись одним элементом — textarea. Просто, если нужна адаптивность в ширину — добавим CSS-свойство white-space: nowrap — запрет на перенос строк.
В остальном, все, о чем говорили, плюс — настраиваемый параметр horizontal указывающий что тянуть, ширину или высоту. Выбирайте нужный вариант и ни в чем не отказывайте своему дизайнеру.
Посмотреть как работает на stackblitz.com
Приходилось вам сталкиваться с подобной задачей? Как решали?
В этом посте мы обсудим, как установить ширину текстового поля ввода в HTML, CSS и JavaScript.
В HTML вы можете использовать width Атрибут для установки ширины элемента.
|
<html> <body> <label for=«name»>Enter a value:</label> <input type=«text» id=«name» style=«width: 200px;»> </body> </html> |
Изменить в JSFiddle
Кроме того, вы также можете использовать size атрибут для определения ширины <input>.
|
<html> <body> <label for=«name»>Enter a value:</label> <input type=«text» id=«name» size=«20»> </body> </html> |
Изменить в JSFiddle
2. Установите ширину с помощью CSS
Хорошей практикой является отделение разметки CSS от разметки HTML. Идея состоит в том, чтобы определить класс для установки width Свойство CSS.
HTML
|
<html> <body> <label for=«name»>Enter a value:</label> <input type=«text» id=«name» class=«someclass»> </body> </html> |
CSS
|
.someclass { width: 200px; } |
Изменить в JSFiddle
Кроме того, вы также можете использовать селектор CSS текстового поля ввода для установки width Свойство CSS.
HTML
|
<html> <body> <label for=«name»>Enter a value:</label> <input type=«text» id=«name»> </body> </html> |
CSS
|
input[type=»text»] { width: 200px; } |
Изменить в JSFiddle
3. Установите ширину с помощью JavaScript
С помощью JavaScript вы можете использовать setAttribute() способ установить значение size атрибут в текстовом поле ввода.
|
<html> <body> <form> <label for=«name»>Enter a value:</label> <input type=«text» id=«name»> </form> </body> <script> document.getElementById(«name»).setAttribute(‘size’, ’20’); </script> </html> |
Изменить в JSFiddle
Вы также можете динамически изменять ширину текстового поля в соответствии с длиной ввода. Мы можем легко сделать это, установив size атрибут на ключевые события.
JS
|
$(document).ready(function() { $(‘#name’).keyup(function() { $(this).attr(‘size’, $(this).val().length) }); }); |
HTML
|
<form> <label for=«name»>Enter a value:</label> <input type=«text» id=«name»> </form> |
Изменить в JSFiddle
Это все, что касается установки ширины текстового поля ввода в HTML, CSS и JavaScript.
Спасибо за чтение.
Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.
Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования 🙂
I have and input with icon, looking like this:
<div class="input-with-icon">
<input type="text" value="abcdefeghijklmnopqrtvuvwxyz" class="form-control">
<span class="icon icon-calendar"></span>
</div>
live demo
Is it possible to adjust CSS so the input will always fit the text width? e.g. it will stretch as I type.
currently, .input-with-icon has fixed width, but if I set it to auto, input won’t stretch.
asked Nov 10, 2016 at 10:00
2
<input id="txt" type="text" value="Hello World!" />
input {
min-width:50px!important;
max-width:99.99%!important;
transition: width 0.25s;
text-align:center;
}
function resizable (el, factor) {
var int = Number(factor) || 7.7;
function resize() {el.style.width = ((el.value.length+1) * int) + 'px'}
var e = 'keyup,keypress,focus,blur,change'.split(',');
for (var i in e) el.addEventListener(e[i],resize,false);
resize();
}
resizable(document.getElementById('txt'),7);
answered Jan 2, 2018 at 7:07
You have many option for that. The First option is to change your <input type="text"> into <textarea class="form-control"></textarea>. <textarea> can handle much better characters than <input type="text">.
The Second option is use this example. This example is from @megakorre in this link. Dont forget to Vote up or put a check if you got the answer. That’s all dude! Happy Coding! 
answered Nov 10, 2016 at 10:34
1
<div class="input-with-icon">
<input type="text" value="tes" class="form-control">
</div>
input[type="data-autosize-input"] {
width: 90px;
min-width: 90px;
max-width: 300px;
transition: width 0.25s;
}
answered Nov 10, 2016 at 10:06
9