Make input field growing on long type

Question

I have a table that receives data from a SQL database through PHP and it works well but I have a problem with long text. My input field, where I receive data, is always small even if I edit height/width with CSS.

Even tried to use contenteditable="true" on input but doesn't work.

The HTML part (JSFiddle)

<table>
  <tr>
    <td>NAME</td>
      <td>
        <input class="form-control" type="text">
      </td>
  </tr>
  <tr>
    <td>EMAIL</td>
      <td>
        <input class="form-control" type="text">
      </td>
    </tr>
  <tr>
    <td>NOTE</td>
      <td>
        <input class="form-control" type="text">
    </td>
  </tr>
</table>

<!--Complete info 

for a complete information, the full input is <td><input class="form-control" type="text" name="note" value="<?php echo "$row[note]";?>"></td> 

-->

So the question is, how can I make my input field growing on display and on typing to edit my value? The best for me would be the input field growing in height.

Thanks a lot!

5 seconds *Codepen-Google*: https://codepen.io/rgfx/pen/qxyGyy — vsync, Nov 26 '19 at 09:54
*5 seconds Stackoverflow-Google:* Possible duplicate of [make html text input field grow as I type?](https://stackoverflow.com/questions/7168727/make-html-text-input-field-grow-as-i-type) — vsync, Nov 26 '19 at 09:55
@NiravJoshi tryied but if I use textarea instead of input I get no results from php value.. I get always a blank field. — Luchiii, Nov 26 '19 at 09:58
@Luchiii for text area you needs to do like this `<?php echo "$row[note]";?> ` PS: you can change rows and cols — Nirav Joshi, Nov 26 '19 at 10:01
@vsync checked that article but I have a table and not a div/span because I get value from a database. You answer is a good start but it move the input id and never go in a new line and using it break my table impagination. — Luchiii, Nov 26 '19 at 10:03

score 3 · Accepted Answer · answered Nov 26 '19 at 10:03

Textarea like below example may help you.

<table>
  <tr>
    <td>NAME</td>
      <td>
        <input class="form-control" type="text">
      </td>
  </tr>
  <tr>
    <td>EMAIL</td>
      <td>
        <input class="form-control" type="text">
      </td>
    </tr>
  <tr>
    <td>NOTE</td>
      <td>
        <textarea rows="5" style="width:100%">Lorem ipsem</textarea>
    </td>
  </tr>
</table>

<!--Complete info 

for a complete information, the full input is <td><input class="form-control" type="text" name="note" value="<?php echo "$row[note]";?>"></td> 

-->

Make input field growing on long type

1 Answers1