How to create readonly textbox like structure using html(div/span) and css ?

Question

I have web page on which i have read only text box in which i show html code.

<input type="text" readonly="true" value="<table>...</table>"/>

Now on the same page there is submit button because of which page post back takes place and XSS validation is triggered. Now i don't want to turn off XSS.

I also tried disabled = "disabled" but with this user if not able to copy the text in the text box.

So i though that providing similar UI using div and span which can give same look and feel will suffice and also no need for turning of the validation. While trying for this i am struggling to restrict the string in one line. As in text box it is single row with column size and text is shown nicely, we can also copy text.

If this is not good solution and something else is better please suggest ?

Thanks all,

Answer 1

If I understand you correctly you're trying to show some example code in a web interface that is formatted for easy consumption by the end user.

As a general rule, you should wrap code snippets in <pre></pre> tags, I would then suggest having a go at using: http://alexgorbatchev.com/wiki/SyntaxHighlighter to format the code as if you were viewing in an IDE.

This will prevent you from having to turn of the XSS checker.

Answer 2

you could use <pre> tags

check this link