Simple Web Form Showcase

As I am in the journey of learning web page design, now I am in the stage of designing web form layout. There is a long run of research on the web form layout such as the place where the label to be put, the font size or font weight of the text should be put, and etc.

By referring to the Luke W Research and UxMatters Blog, I have found some useful information that can help me to design a web form.

I have created a sample web form layout and I am now going to show the design for the reader. But please be noted that what I show here is not the final decision and will be changed later. Try give me any comments after you have tested it.

Screenshots

First, let us see the screenshots of the web form layout:

HTML / CSS

Second, let us see the HTML / CSS coding that make the above web form layout real life.

HTML

<!– form –>
            <div class="form">
                <h2>Sample Form</h2>
                <p>
                    <label>Name: </label><span class="required">(Required)</span>
                    <br /><span class="error">Error Message Here. Error Message Here. Error Message Here. Error Message Here.Error Message Here. Error Message Here.  </span>
                    <input class="text" type="text" value="Default" />
                    <br />
                    <div class="fieldinfo">You cannot put illegal name here</div>
                </p>
                <p>
                    <label>Name: </label><span class="required">(Required)</span>
                    <br /><span class="error">test </span>
                    <textarea class="text">Default</textarea>
                    <br />
                    <div class="fieldinfo">You cannot put illegal name here</div>
                </p>
                <p>
                    <label>Name: </label><span class="required">(Required)</span>
                    <br /><span class="error">Error Message Here. Error Message Here. Error Message Here. Error Message Here.Error Message Here. Error Message Here. Error Message Here. Error Message Here. Error Message Here. Error Message Here. Error Message Here.  </span>
                    <input class="text" type="text" value="Default" />
                    <br />
                    <div class="fieldinfo">You cannot put illegal name here</div>
                </p>
                <p>
                    <label>Hobby: </label><span class="required">(Required)</span>
                    <br /><span class="error">Error Message Here. Error Message Here. Error Message Here. Error Message Here.Error Message Here. Error Message Here.  </span>
                    <span class="group">
                        <span class="pair"><input type="radio" /> One </span>
                        <span class="pair"><input type="radio" /> One </span>
                        <span class="pair"><input type="radio" /> One </span>
                        <span class="pair"><input type="radio" /> One </span>
                        <span class="pair"><input type="radio" /> One </span>
                        <span class="pair"><input type="radio" /> One </span>
                    </span>
                    <br />
                    <div class="fieldinfo">You cannot put illegal name here</div>
                </p>
                <p>
                    <label>Like: </label><span class="required"></span>
                    <span class="error"></span>
                    <span class="group">
                        <span class="pair"><input type="checkbox" /> One </span>
                        <span class="pair"><input type="checkbox" /> One </span>
                        <span class="pair"><input type="checkbox" /> One DDSFSF </span>
                        <span class="pair"><input type="checkbox" /> One  sfsdfsfsf</span>
                        <span class="pair"><input type="checkbox" /> One </span>
                        <span class="pair"><input type="checkbox" /> One </span>
                    </span>
                    <br />
                    <div class="fieldinfo">Just choose what you like</div>
                </p>
                <p>
                    <input class="button" type="button" value="Submit" />
                </p>
            </div>
            <!– form –>

CSS

/* form */
.form {border:#CCC solid 1px;padding:0.5em;}
.form h2 {text-align:center;font-size:1.3em;}
.form p {margin:0.8em auto 0.8em auto;clear:both;}
.form label {font-weight:bold;}
.form .required {color:#666;font-weight:bold;}
.form .fieldinfo {color:#666;font-size:0.85em;clear:left;margin-top:1em;}
.form .error {color:red;font-size:0.8em;float:right;width:20em;margin:1em auto auto auto;text-align:justify;}
.form .text {margin:1em 1em auto auto;width:20em;}
.form .button {width:auto;}
.form .group {margin-bottom:2em;width:20em;display:block;margin-top:0.5em;}
.form .group .pair {display:block;float:left;}

Author: fyhao

Jebsen & Jessen Comms Singapore INTI University College Bsc (Hon) of Computer Science, Coventry University View all posts by fyhao