How Display HTML Code Using Textarea in Your Blog Post

How Insert HTML Text Box in Blog Post?

There are times when you want to insert plain text into your Blog Post or template. This may be a piece of HTML code or JavaScript that you would like readers to copy, such as the “Link to Our Site” code in the sidebar. It could also be the Terms of a Legal Agreement that users can view. As we shall be discussing in our article on creating forms in Blogs, the text box can also be used in feedback forms for users to input feedback and comments.

The HTML code of the text box makes use of the <textarea> property. For the text box to be in a Blog Post, while drafting the Post, switch to “Edit HTML” mode to insert the following code. If it is to appear in the sidebar or other parts of the template, go to Template -> Page Elements -> Add a Page Element and select “HTML/JavaScript” to insert this code.

Textarea HTML Code Using in Blog Post

The textarea HTML code which allows users to input TEXTis this:-

<textarea rows="5" cols="40"> TEXT </textarea>

The attribute cols indicates the number of visible columns and the rows shows the number of visible rows. Note that this simply sets the dimensions of the text box. The lines of text can exceed the specified area, and when that happens, there will be scrollbars at the sides to allow users to view all the contents. In the above code, users can input words and characters into the text area. There is no limit to the amount of text that can be inserted but browsers may have their own preset limits. This is what readers will see:-

</span></div> <span style="font-family: "verdana" , sans-serif;"><br style="background-color: white; color: #333333; font-size: 17.8px;" /></span> <span style="background-color: white; color: #339999; font-family: "verdana" , sans-serif; font-size: 17.8px; font-weight: bold;">Read only Textbox</span><br /> <span style="font-family: "verdana" , sans-serif;"><br style="background-color: white; color: #333333; font-size: 17.8px;" /></span> <br /> <div style="text-align: justify;"> <span style="background-color: white; color: #333333; font-family: "verdana" , sans-serif; font-size: 17.8px;">If the text box contains terms and conditions or information, we can insert a <readonly> attribute into the textarea code. Readers can view the text but they cannot edit or amend it, or insert any input into the box. This is the HTML code:-</span></div> <span style="font-family: "verdana" , sans-serif;"><br /></span> <br /> <table border="1" cellpadding="2" style="background-color: white; color: #333333; font-size: 17.8px; width: 344px;"><tbody> <tr><th scope="col" width="332"><div align="left"> <span style="font-family: "verdana" , sans-serif;"><textarea rows="2" cols="30" <span style="color: #996633;">name</span>="Famous Quotes"<span style="color: #6600cc;">readonly</span>="readonly"></span><br /> <span style="font-family: "verdana" , sans-serif;">“Asking a working writer what he thinks about critics is like asking a lamp-post how it feels about dogs.” ... Christopher Hampton</span><br /> <span style="font-family: "verdana" , sans-serif;">

We changed the value of the rows and cols to give you an idea of how big the boxes will be with these values. A name can be assigned to the textbox for scripting purposes. Here, we have set it to display a read-only text which users cannot edit, but can still select and copy, like this:-

body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }
Link to Site Text Box

To display a code for readers to link to your Blog, you can make use of the <readonly> attribute. Instead of text, insert the Hyperlink HTML code. The textarea code can be this:-

<textarea rows="4" cols="25" name="Link to Site" readonly="readonly">Hyperlink Code</textarea>

Textarea Word Wrap

This is perhaps more relevant when we apply the textarea code to forms. When the text reaches the end of a row, the words can be wrapped in these manners:-

"soft" wrap – text will wrap as the user types but line breaks are not included when the text is submitted in a form.

"hard" wrap – if users enter line breaks into the text, it will be shown in the submitted form.

wrap is "off" – this will put all the words in one line, without any line breaks or wrapping.

The default value is "soft" wrap.

<textarea rows="8" cols="30" wrap="hard"> TEXT </textarea>