Text field

A comments-box user interface template with integrated text preview, and preview required before submit.

The form is intentionally created so that preview is required before submit. This, in order to make it easier for the commenter to catch typos etc. before the form is submitted.

Try it

First write, then preview (html OK). Note: Styling is only indicative, you will want to edit the css before use.

Write
Preview

Usage

Version, Use, and License

Version

Current version: 3.5
Note: This is an interface template only. As such it does not "do" anything on submit.

Use

See code below. Copy first, then paste.

Before use you will want to edit the CSS and perhaps add input validation/control.

Also, you may want to remove the "return false;" from the onClick property of the submit button.

License

What? Free!

Source code

HTML source

<ul id="tabs">
    <li id="tab_frm_edit" class="active"
        onClick="shift('frm_edit','frm_preview');return false;">
        <a href="#frm_edit">Write</a>
    </li>
    <li id="tab_frm_preview"
        onClick="shift('frm_preview','frm_edit');return false;">
        <a href="#preview">Preview</a>
    </li>
</ul>
<form action="" method="post" accept-charset="utf-8">
    <div id="frm_edit">
        <label for="title">title</label>
        <br><input type="text" id="title" name="title" size="65" maxlength="200" value="">
        <br><label for="content">message</label>
        <br><textarea id="content" name="content" rows="10" cols="75"></textarea>
        <div class="frm_options">
            <input type="checkbox" name="option" id="c_1" value="1">
                <label for="c_1">Some option</label>
            <input type="radio" name="choice" id="r_1" value="this" checked>
                <label for="r_1">this</label>
            <input type="radio" name="choice" id="r_2" value="that">
                <label for="r_2">that</label>
            <input type="radio" name="choice" id="r_3" value="other">
                <label for="r_3">other</label>
            <select name="select" id="s_1">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>
            </select>
        </div>
    </div>
    <div class="frm_buttons" id="frm_edit_buttons">
        <input type="reset" value="Reset">
        <input type="button" value="Preview"
            onClick="shift('frm_preview','frm_edit');return false;">
    </div>
    <div id="frm_preview">
        <div id="frm_preview_content"></div>
    </div>
    <div class="frm_buttons" id="frm_preview_buttons">
        <input type="button" value="Edit"
            onClick="shift('frm_edit','frm_preview');return false;">
        <input type="submit" id="btn_submit" value="Submit"
             onClick="return false;">
    </div>
</form>

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.trim();
    var writ = form.elements[1].value.trim();
    var chars = titl.length + writ.length;
    var btnSubmit = document.getElementById(\"btn_submit\");
    var html = '';
    if (chars) {
        if (titl.length){
            html += \"<h2>\" + titl + \"</h2>\\n\";
        }
        if (writ.length){
            html += \"<div>\" + writ + \"</div>\";
        }
        btnSubmit.style.display = \"\";
    } else {
        html += notxt;
        btnSubmit.style.display = \"none\";
    }
    document.getElementById(\"frm_preview_content\").innerHTML = html;
}
function shift(show,hide) {
    var t_s = 'tab_'+show;
    var t_h = 'tab_'+hide;
    var b_s = show+'_buttons';
    var b_h = hide+'_buttons';
    var s = document.getElementById(show);
    var h = document.getElementById(hide);
    var ts = document.getElementById(t_s);
    var th = document.getElementById(t_h);
    var bs = document.getElementById(b_s);
    var bh = document.getElementById(b_h);
    if (show == 'frm_preview') {
        prew(document.forms[0]);
    }
    s.style.display = \"block\";
    h.style.display = \"none\";
    ts.setAttribute(\"class\", \"active\");
    th.setAttribute(\"class\", \"\");
    bs.style.display = \"block\";
    bh.style.display = \"none\";
}
</script>

CSS source

ul#tabs li, div#frm_edit, div#frm_preview, div.frm_buttons {
    background-color: lightgray;
    color: inherit;
}
div#frm_edit, div#frm_preview {
    padding: 10px;
    min-height: 262px;
}
div#frm_edit, div#frm_preview, div.frm_buttons {
    margin: 2px 0px 0px 100px;
    width: 650px;
    border: 1px solid grey;
    border-top: 0px;
    border-bottom: 0px;
}
ul#tabs {
    height: 20px;
    width: 672px;
    margin: 0px;
    margin-left: 100px;
    padding: 0px;
    list-style: none;
    line-height: 1em;
}
ul#tabs li {
    width: 333px;
    border: 1px solid grey;
    margin: 0px;
    background-color: darkgray;
    color: inherit;
    text-align: center;
}
ul#tabs li#tab_frm_edit {
    float: left;
}
ul#tabs li#tab_frm_preview {
    float: right;
}
ul#tabs li#tab_frm_edit.active
, ul#tabs li#tab_frm_preview.active {
    border-bottom: none;
    background-color: lightgray;
    color: inherit;
}
input[type="text"],textarea {
    margin: 0px;
    padding: 3px;
    width: 640px;
}
div.frm_options {
    height: 25px;
}
input[type="checkbox"] {
    margin: 0px;
    padding: 0px;
    margin-left: 0px;
}
label[for="option"] {
    margin: 0px;
    padding: 0px;
}
div.frm_options {
    margin: 0px 20px 0px 0px;
}
div.frm_buttons {
    margin-top: 0px;
    margin-right: 5px;
    padding: 10px 10px 10px 10px;
    text-align: right;
    border-bottom: 1px solid grey;
}
input[type="button"]
, input[type="reset"]
, input[type="submit"] {
    margin-right: 20px;
}
div#frm_preview, div#frm_preview_buttons {
    display: none;
}

Reference

W3C: HTML Forms
Wikipedia: HTML Form