A comments-box type interface template. A nice big text field, and text preview. First write, then view (html OK).
To make full use of this page please enable JavaScript.
Current version: 2 Note: This is an interface only, as such it does not "do" anything.
See code below. Copy first, then paste. Optionally, edit.
What? Free!
<ul id="tabs"> <li id="wr"><a href="#input" onClick="shift('input','preview');return false;">Write</a></li> <li id="vi"><a href="#preview" onClick="shift('preview','input');return false;">View</a></li> </ul> <div id="input"> <form action="" method="post" accept-charset="utf-8"> <label for="title">title</label> <br><input type="text" id="title" name="title" size="65" maxlength="200" autofocus value=""> <br><label for="content">message</label> <br><textarea id="content" name="content" rows="10" cols="75"></textarea> <br><input type="checkbox" id="option" name="option" value="1"> <label for="option">Some option</label> <input type="radio" name="choice" value="this" checked> This <input type="radio" name="choice" value="that"> That <input type="radio" name="choice" value="other"> Other <select> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> <input type="reset" value="Reset"> <input type="submit" value="OK"> </form> </div> <div id="preview"></div>
<script type=\"text/javascript\"> function prew(form){ var notxt = '<p>Please write before you view.</p>'; var titl = form.elements[0].value; var writ = form.elements[1].value; var chars = titl.length + writ.length; var html = ''; if (chars) { if (titl.length){ var htmltitl = titl.indexOf('</'); html += \"<h2>\" + titl + \"</h2>\\n\"; } if (writ.length){ var htmlwrit = writ.indexOf('</'); html += \"<div>\" + writ + \"</div>\"; } } else { html += notxt; } document.getElementById(\"preview\").innerHTML = html; } function shift(show,hide) { var s = document.getElementById(show); var h = document.getElementById(hide); if (show == 'preview') { prew(document.forms[0]); } s.style.display = \"block\"; h.style.display = \"none\"; } </script>
div#input, div#preview { margin:0px;padding:0px; margin-top:2px; margin-left:100px; width:650px; border:1px solid grey; } div#input, div#preview { border-top:0px; } div#input, div#preview { padding:10px; } ul#tabs{ margin:0px;padding:0px; margin-left:100px; border: 0px; list-style: none; line-height: 1em; } ul#tabs li { border:1px solid grey; border-bottom:0px; margin:0px; padding:0px 165px 0px 135px; display: inline; } ul#tabs li#vi { padding-right:164px; } fieldset{ margin:0px; margin-top:25px; margin-left:25px; padding:5px; width:718px; } div#input, div#preview, fieldset{ overflow:none; } div#preview{ display:none; } input[type=\"text\"],textarea{ margin:0px;padding:0px; padding-left:3px; width:625px; } input[type=\"checkbox\"]{ margin:0px;padding:0px; margin-left:0px; } label[for=\"option\"]{ margin:0px;padding:0px; } textarea{ padding-top:3px; }