Menu
I'm trying to get the following pattern which is from Microsoft Word:
and in HTML I'm getting:
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>
425
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;
}
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
