Add Text Box and Textarea

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.

Users can input text

The textarea HTML code which allows users to input TEXT is 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:-

Bosses can have personal chats on their mobile phones for hours, but all eyes are on the workers if their phones ring. Bosses arrive late, leave early and take long lunch breaks, but workers have to watch the clock. When Bosses make mistakes, they frame them as the company's mistakes. When workers make the same mistakes, their careers are on the line.

Read only Textbox

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:-

<textarea rows="2" cols="30" name="Famous Quotes" readonly="readonly"> “Asking a working writer what he thinks about critics is like asking a lamp-post how it feels about dogs.” ... Christopher Hampton </textarea>

We changed the value of the rows and cols to give you an idea 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 readonly text which users cannot edit, but can still select and copy, like this:-

“Asking a working writer what he thinks about critics is like asking a lamp-post how it feels about dogs.” ... Christopher Hampton

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>

Try typing some text and enter line breaks. This is a hard wrap. If the value is put to off, you will not see line breaks and all the words will appear in one line.

© Tricks for New Bloggers