Multiple lines of input in <input type="text" />

Question

I have this text input in a form:

<input type="text"
       cols="40" 
       rows="5" 
       style="width:200px; height:50px;" 
       name="Text1" 
       id="Text1" 
       value="" />

I am trying to get it to take multiple lines of input. The width and height make the box to be bigger, but the user can enter text all (s)he wants yet it fills one line only.

How do I make the input more like a textarea?

See https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ for a way to autogrow textareas using HTML and CSS, until there is a native way. — David Spector
– David Spector, Commented Aug 17, 2024 at 14:43

lambda · Accepted Answer · 2016-09-01 15:12:39Z

952

You need to use a textarea to get multiline handling.

<textarea name="Text1" cols="40" rows="5"></textarea>

edited Sep 1, 2016 at 15:12

lambda

3,3831 gold badge28 silver badges32 bronze badges

answered Jun 7, 2011 at 8:28

Ólafur Waage

70.2k22 gold badges147 silver badges199 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

toddmo Over a year ago

Yes, but, textarea doesn't support the pattern attribute. So darn.

Fai Zal Dong Over a year ago

hmmmm, what. Im looking for multiple insert for type text. why this people ask this ques.

Nick Louloudakis Over a year ago

@AlexH your comment is very important and helpful indeed, thanks.

Malcolm Salvador Over a year ago

what I don't like about this is that in JQuery, you can't set textarea value using val(). You have to append to it. :(

Els den Iep Over a year ago

@AlexH: You could remove your comment and add it again if you want to alter anything.

|

Álvaro González · Accepted Answer · 2020-01-08 15:41:47Z

87

You can't. At the time of writing, the only HTML form element that's designed to be multi-line is <textarea>.

edited Jan 8, 2020 at 15:41

answered Jun 7, 2011 at 8:26

Álvaro González

147k45 gold badges282 silver badges378 bronze badges

Comments

Sté · Accepted Answer · 2013-12-04 13:30:39Z

68

It is possible to make a text-input multi-line by giving it the word-break: break-word; attribute. (Only tested this in Chrome)

answered Dec 4, 2013 at 13:30

Sté

7775 silver badges2 bronze badges

3 Comments

rap1ds Over a year ago

Thanks! I noticed that Chrome was allowing multiple lines for inputs, which I totally didn't want to, and the reason was word-break which was inherited from the body element

Jeremy Wadhams Over a year ago

Looks good in Chrome 39 and Safari 8.0.2, but not Firefox 34 in my brief testing. :( jsfiddle.net/msybs9g7

Dror Bar Over a year ago

This solution is outdated and not supported in most browsers anymore. Use <textarea> instead

themightysapien · Accepted Answer · 2013-06-20 14:53:36Z

65

Use the textarea

<textarea name="textarea" style="width:250px;height:150px;"></textarea>

don't leave any space between the opening and closing tags Or Else This will leave some empty lines or spaces.

answered Jun 20, 2013 at 14:53

themightysapien

8,3892 gold badges19 silver badges16 bronze badges

1 Comment

ideaztech Over a year ago

Thanks, I was wondering if the height would work instead of rows.

David Stögmüller · Accepted Answer · 2023-07-28 02:06:22Z

49

If you need Multiline Textarea with Auto Height Increase feature, You can use following simple javascript,

function auto_height(elem) {  /* javascript */
    elem.style.height = '1px';
    elem.style.height = `${elem.scrollHeight}px`;
}

.auto_height { /* CSS */
  width: 100%;
}

<textarea rows="1" class="auto_height" onInput="auto_height(this)"></textarea>

edited Jul 28, 2023 at 2:06

David Stögmüller

12 bronze badges

answered Mar 27, 2020 at 8:29

Prasad Gayan

1,75220 silver badges28 bronze badges

8 Comments

Cuado Over a year ago

Thanks. I modified this and used it in my react textarea

Art3mix Over a year ago

P.S you want to add overflow: hidden to the textarea, or else it will add the extra height few letters before the actual needed one.

mrexodia Over a year ago

For me this caused the textarea to slightly increase in height when you start typing. A workaround is to set padding to 0 and restore it after setting the height: codepen.io/mrexodia/pen/LYdrBqM

run_the_race Over a year ago

Probably nered a ResizeObserver too for if the window is size changed

KD.S.T. Over a year ago

in react.js I applied it and it worked.

|

Matías Fidemraizer · Accepted Answer · 2011-06-07 08:27:48Z

21

Check this:

http://www.w3.org/TR/html401/interact/forms.html#h-17.7

The TEXTAREA element creates a multi-line text input control

answered Jun 7, 2011 at 8:27

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

Comments

Osanda Deshan · Accepted Answer · 2018-04-21 09:48:59Z

16

You should use textarea to support multiple-line inputs.

<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>

answered Apr 21, 2018 at 9:48

Osanda Deshan

1,5693 gold badges15 silver badges32 bronze badges

Comments

Kalnode · Accepted Answer · 2022-02-13 16:05:41Z

10

Use <div contenteditable="true"> (supported well) with storing to <input type="hidden">.

HTML:

<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">

jQuery:

$("#multilineinput").on('keyup',function(e) {   
    $("#detailsfield").val($(this).text()); //store content to input[type=hidden]
});
//optional - one line but wrap it
$("#multilineinput").on('keypress',function(e) {    
    if(e.which == 13) { //on enter
        e.preventDefault(); //disallow newlines     
        // here comes your code to submit
    }
});

edited Feb 13, 2022 at 16:05

Kalnode

11.7k3 gold badges44 silver badges76 bronze badges

answered Dec 2, 2019 at 14:57

Fanky

1,8041 gold badge20 silver badges25 bronze badges

Comments

Kalnode · Accepted Answer · 2022-02-13 16:03:31Z

-7

If you're using React, you could use the 3rd-party UI library MUI. It has a custom proprietary <Input> element with a multiline option.

As LSE commented, ultimately it gets rendered as <textarea>.

  <FormControl>
    <InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
    <Input
      id="textContract"
      multiline
      rows="30"
      type="text"
      value={props.textContract}
      onChange={() => {}}
    />
  </FormControl>

https://material-ui.com/components/text-fields/#multiline

edited Feb 13, 2022 at 16:03

Kalnode

11.7k3 gold badges44 silver badges76 bronze badges

answered Jun 10, 2020 at 2:32

Alan

10.3k4 gold badges59 silver badges75 bronze badges

1 Comment

LSE Over a year ago

From the documentation : The multiline prop transforms the text field into a <textarea> element.. So even though it looks like an <input>, it's rendering a <textarea>.

nitau · Accepted Answer · 2022-02-02 17:49:30Z

-14

If you don't need to edit it, you can use a

<span>text here</span>

It will expand with the text.

answered Feb 2, 2022 at 17:49

nitau

8882 gold badges13 silver badges27 bronze badges

1 Comment

Kalnode Over a year ago

This would remove the input element completely; doesn't help at all.

Collectives™ on Stack Overflow

Multiple lines of input in <input type="text" />

10 Answers 10

7 Comments

Comments

3 Comments

1 Comment

8 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

7 Comments

Comments

3 Comments

1 Comment

8 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Linked

Related