Skip to content

[HTML] Use “textarea” component as input box

In the HTML block, if you want to get the information from user, you can make a input box: textarea.

The textarea block is supported by almost all major browsers and can be used with confidence.

Okay, let’s start!

input box

This simple input box is quite common.

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>ClayAtlas-Code2Html</title>
</head>
<body>
Input: <input type="text" name="fname" />
</body>
</html>



Output:

ClayAtlas-Code2Html Input:

But when it comes to allowing users to enter text with “line breaks”, then just using the input box may not be suitable. Below we begin to mention textarea this kind of element.

textarea

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>ClayAtlas-Code2Html</title>
</head>
<body>
<p>TEST</p>
<textarea rows="10" cols="30">Input the content...</textarea>

</body>
</html>



Output:

ClayAtlas-Code2Html

TEST

As you can see, the text we entered this time can wrap.

References

Tags:

Leave a Reply