How to add newline to textarea after label

user_7661005 0
Viewed 570

I'm trying to get the following pattern which is from Microsoft Word:

enter image description here

and in HTML I'm getting:

enter image description here

How do i code it in the way where the textarea is after the label like the visualization in word above?

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>testform</title>
    <link rel = "stylesheet" href = "test2.css">
</head>

<body>
    <div class = "entity">
        <label >Enter your address</label>
        <textarea id = "addr_out"></textarea>
    </div>
</body>

css html
6 Answers

  1. Make the entity a flexbox container and use margin-bottom for the entity label.

  2. Use rows attribute to enlarge the text area according to your desired layout.

.entity {
  display: flex;
  flex-direction: column; /* Vertical alignment of the flexbox container */
  width: 300px;
}

label {
  margin-bottom: 10px; /* Go down you Textarea! */
}

textarea {
  border: 2px solid #70AD47;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>testform</title>
  <link rel="stylesheet" href="test2.css">
</head>

<body>
  <div class="entity">
    <label>Enter your address</label>
    <textarea id="addr_out" rows="10"></textarea> <!-- Change rows to increase height -->
  </div>
</body>

user_48139130

This can be done in a couple of ways:

(old hack) would be adding <br> after the label but I don't recommend this:

<label >Enter your address</label><br/>

Or you can also make it so the label and the textarea is wrapped on a different div considering that div is full width:

<div class = "entity">
   <label >Enter your address</label>
</div>
<div class = "entity">
   <textarea id = "addr_out"></textarea>
</div>

OR you can do it on css, either make the label width 100%:

textarea {
  width: 100%;
}

OR make the .entity use flex:

.entity {
  display: flex;
}
user_27844930

Just add display: block.

#addr_out {
  border: 2px solid green;
  width: 200px;
  height: 100px;
  display: block;
  resize: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>testform</title>
  <link rel="stylesheet" href="test2.css">
</head>

<body>
  <div class="entity">
    <label>Enter your address</label>
    <textarea id="addr_out"></textarea>
  </div>
</body>

user_133311550
  1. Simply, add <br/> tag between <label> and <textarea> selectors.
  2. You can change the style of <label> with display: block.

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>testform</title>
    <link rel = "stylesheet" href = "test2.css">
</head>

<body>
    <div class = "entity">
        <label >Enter your address</label>
        <br/>
        <textarea id = "addr_out"></textarea>
    </div>
</body>

user_82028500

What about something like this

I added some css code to make your label & textarea according to your need.

.entity label::after{
      content: "\a";
      white-space: pre;
}
.entity textarea{
      border: 2px solid green;
      width: 200px;
      height: 100px;
      margin-top: 5px;
      resize: none;
}
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>testform</title>
    <link rel = "stylesheet" href = "test2.css">
</head>

<body>
    <div class = "entity">
        <label >Enter your address</label>
        <textarea id = "addr_out"></textarea>
    </div>
</body>

Explaination:

Css Line 2:- Set the content property to "\a" (this character for new-line) after label using ::after pseudo-class.

Css Line 3:- Set white-space property to pre. because the browser will read every white-space, in your given class, as a white-space.

Css Line 6:- Set the border of textarea thick and green.

Css Line 7 & 8:- Set the height and width to 200px and 100px respectively, to make it enlarge.

Css Line 9:- Set top margin to 5px, to add more space.

Css Line 10:- Set the resize property to none to tell the browser to do not make the textarea resizable.

Hope this will helpful for you, thank you .

user_133789770

I recommend to use display: block for all labels inside a specific div, in this case ".entity" for example or a parent div used to contain your form. With this approach all the labels you add inside this div will follow the same layout automatically. See example below.

I don't recommend using <br> after a label as some of the other answers suggest here. The reason is because any additional label you add will require you to manually do the same. Not only this approach relies on human action but it will also flood your code with unnecessary html tags.

.entity label {
display: block;
}
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>testform</title>
    <link rel = "stylesheet" href = "test2.css">
</head>

<body>
    <div class = "entity">
        <label >Enter your address</label>
        <textarea id = "addr_out"></textarea>
    </div>
</body>

user_79569330
Related