Mobile Friendly Website

CSSPLAY

Doing it with style

TUTORIALCSS ONLY responsive form with field entry checks and validation

Date : 6th February 2015

For all the latest browsers, Android and iOS





Information

Using the latest html form attributes and CSS styles it is possible to produce a form withinput validation and completion to rival that produced by javascript/jQuery.

The above form, which works in all the latest browsers and operating systems, has a validation in all the fields and a real time indication of correctly entered content. It also lets you know when all the fields are correctly entered by changing the background color of the 'submit' button and the text above it changes from 'form waiting completion' to 'form complete'.

It also has a graphic representation of a checkbox for the 'Subscribe to mail list?' question. You can toggle this by clicking on the text and by clicking on the YES/NO 'graphic'.

This form is not submitted so you can play around with entries to see what happens.

If you click the submit button before all the fields are correctly entered then you will get a prompt to indicate which fields are not filled or incorrectly entered.

Firefox has probably the best interpretation of the code and styles.

HTML Code

A standard form with 'required', 'placeholder', 'pattern' and 'title' attributes.

<article class="parent">
  <form class="prompts">
    <input class="prompt" id="name" name="name" type="text" required="required" placeholder="Name">
    <input class="prompt" id="email" name="email" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required="required" placeholder="Email - your@email.address">
    <input class="prompt" id="url" name="url" type="url" required="required" title="http(s)://your.website" pattern="https?://.+" placeholder="Website - http(s)://your.website">
    <div class="check"><input type="checkbox" id="maillist" name="maillist"><label for="maillist">Subscribe to mail list?<br><span class="yes">Yes please!</span><span class="no">No thank you</span></label></div>
    <textarea class="prompt" id="comment" name="comment" required="required" placeholder="Please enter your comment(s)" spellcheck="true"></textarea>
    <p></p>
    <input class="submit" id="submit" type="submit" value="  POST COMMENT  ">
  </form>
</article>

Cascading Style Sheet

Note the browser differences in 'placeholder' styling and the Firefox specific :-moz-ui-invalid style which checks the form AFTER clicking the SUBMIT button.

form.prompts {padding:0; width:100%; min-width:300px; margin:25px auto;}
form.prompts input.prompt {width:calc(100% - 22px); height:50px; font:normal 16px/40px arial, sans-serif; color:#333; padding:5px 10px; margin:5px 0; border:1px solid #ddd; border-radius:8px;}
form.prompts textarea.prompt {display:block; width:calc(100% - 22px); height:200px; padding:15px 10px; margin:5px 0; font:normal 16px/25px arial, sans-serif; color:#666; overflow:auto; border:1px solid #ddd; border-radius:8px;}

form.prompts div.check {position:relative; width:100%; height:55px; margin:5px 0;}
form.prompts div.check label {display:block; margin-left:120px; margin-top:-15px; font:normal 16px/20px arial, sans-serif; color:#888; cursor:pointer;}
form.prompts div.check label span.yes {color:#080;}
form.prompts div.check label span.no {color:#f00; display:none;}

form.prompts div.check label:before {content:"YES\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0NO"; display:block; width:100px; height:40px; border-radius:5px; border:5px solid #999; font:bold 12px/40px arial, sans-serif; color:#fff; text-align:center; position:absolute; left:0; top:0; box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
background:linear-gradient(to right, #080 50%, #f00 50%);
} 
form.prompts div.check label:after {content:""; display:block; width:51px; height:40px; background:rgba(0,0,0,0.8); position:absolute; left:54px; top:5px; box-shadow:0 0 10px rgba(0,0,0,0.6);
-webkit-transition:0.5s;
transition:0.5s;
}
form.prompts div.check #maillist:checked ~ label:after {left:5px;}
form.prompts div.check #maillist:checked ~ label span.yes {display:none;}
form.prompts div.check #maillist:checked ~ label span.no {display:inline;}

form.prompts #submit {width:50%; height:60px; margin:0; background:#c00; color:#fff; border:0; border-radius:5px; cursor:pointer; font:normal 16px/25px  arial, sans-serif;
-webkit-transition:0.5s;
transition:0.5s;
}

form.prompts *::-webkit-input-placeholder {color:#45a !important; text-overflow: ellipsis;}
form.prompts *:-moz-placeholder {color:#45a !important; text-overflow: ellipsis;}
form.prompts *::-moz-placeholder {color:#45a !important; text-overflow: ellipsis;}
form.prompts *:-ms-input-placeholder {color:#45a !important; text-overflow: ellipsis;}
form.prompts *:input-placeholder {color:#45a !important; text-overflow: ellipsis;}

datalist select option {width:50%; height:50px; border:1px solid #ddd;}

form.prompts *:focus {outline:0;}
form.prompts *:invalid {box-shadow:none; border:0; outline:0;}

form.prompts *:required:invalid, 
form.prompts *:focus:invalid {background:#fff url(invalid.png) no-repeat right 5px top 5px;} 
form.prompts *:required:valid {background: #fff url(valid.png) no-repeat right 5px top 5px; color:#080 !important;}

form.prompts *:-moz-ui-invalid {box-shadow: 0 0 3px rgba(0,0,0,0.4); background: #fff url(fail.png) no-repeat right 5px top 5px !important;}

form.prompts #name:valid ~ #email:valid ~ #url:valid ~ #comment:valid ~ #submit {background:#080;}

form.prompts p:before {content:"All fields are required - form waiting completion"; font:normal 16px/25px  arial, sans-serif; color:#c00;}
form.prompts #name:valid ~ #email:valid ~ #url:valid ~ #comment:valid ~ p:before {content:"All fields are required - form complete"; color:#080;}

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Terms and Conditions

This demonstration can be used subject to the following terms and conditions.

  1. If you wish to use this demonstration in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
  2. You may NOT place this demonstration on another site for others to download.
  3. You may NOT redistrubute or resell this demonstration.
  4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
  5. Please see the Copyright statement above regarding the requirement for a support donation.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page