Text field

A comments-box type interface template. A nice big text field, and text preview. First write, then view (html OK). Note: Styling is only indicative, you should edit the css before use.






This That Other

Usage

Version, Use, and License

Version

Current version: 2.1
Note: This is an interface template only, as such it does not "do" anything.

Use

See code below. Copy first, then paste. Optionally, edit.

License

What? Free!

Source code

HTML source 
<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><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>
JS source 
<script type="text/javascript">
/* text field, source: https://clsc.net/
*/
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){
         html += "<h2>" + titl + "</h2>\n";
      }
      if (writ.length){
         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>
CSS source 
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 li, div#input, div#preview {
   background-color: darkgray;
}
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: 1px solid darkgray;
   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;
}

Reference