<h1>HTML, CSS, Forms - A Test</h1>

<p>When using <code>::placeholder</code> in connection with the attribute of the same name (<code>placeholder="your text"</code>) being put in an input field, we can tell our users what or how they should fill an input field in our precious webforms.</p>

<p>On top of that we love to tell people which fields they <strong>have to</strong> fill out in order to be able to submit said webform to us. Therefore we got the <code>:required</code> pseudo-class to style form elements which we deem important – you sure want to write <em>required</em> into the input then for the styling to take effect. <code>&lt;input required /&gt;</code> will do by the way, as it is a boolean and therefore it defaults to <em>true</em> when it's there.</p>

<p>I think I found a nice way to combine both the pesudo-element with the pseudo-class in order to give people a hint on required fields.</p>

<p><strong>Notice:</strong> <a href="http://caniuse.com/#feat=form-validation">Browser Support</a> is an issue when it comes to IE. <em class="spoken">"&#$§¥ you IE!."</em> Anything lower than IE10 won't understand those selectors. <em>*shakes fist towards the sky*</em></p>

<p>Enough with the chatter, here we go with the example form:</p>

<hr />

<form class="myform" action="" method="post" name="bestformeva">
  <fieldset>
    <legend>Please tell me a few things about you! Required fields are marked with a blue border.</legend>
    
    <label for="name">First, I need your full name.</label>
    <input type="text" id="name" name="name" required placeholder="Your Name"/>
    
    <label for="street">It's optional but if you wanted to be very accurate, you may enter your street address here. Otherwise you can also skip this field.</label>
    <input type="text" id="street" name="street" placeholder="Optional: Street Address" />
    
    <label for="city">Now, I do need to know which city you live in.</label>
    <input type="text" id="city" name="city" required placeholder="Name the city you live in" />
    
    <label for="zip">Please provide the zip-code for your city. This field accepts only numbers.</label>
    <input type="number" id="zip" name="zip" required placeholder="ZIP Code. Numbers only" />
    
    <label for="email">Now, please tell me your email address so I can get back to you when needed.</label>
    <input type="email" id="email" name="email" placeholder="[email protected]" required />
    
    <label for="textarea">If there is anything else you want to tell me, hack away on your keyboard like there's no tomorrow after focussing the following textarea. Maximum characters is 4000.</label>
    <textarea id="textarea" name="textarea" placeholder="This empty textarea is valid, as it is not required to fill it with text in order to submit the form."></textarea>

    <label for="submit">You may now submit your form by hitting the button below.</label>
    
    <button id="submit" type="submit" name="submit">Submit</button>
  </fieldset>
</form>

<hr />

<p>Interestingly enough the placeholder text for <code>&lt;input type="number" /&gt;</code> does not change its color although the field is set to required in the HTML. The border color though did change.</p>

<h2>Update:</h2>

<p>Now, that I added the <code>:valid</code> and <code>:invalid</code> selectors to the CSS, there's another funky thing going on. The <code>&lt;number></code> input is now marked as invalid although it's empty (apart from the placeholder, which now received the color I set for invalid input values). <strong>STRRRRAAAAANNNGE!</strong></p>

<p>Apart from that you would have to know Regular Expressions in order to prevent the <code>type="text"</code> inputs to take any character. You'd want to prevent people from using numbers for their name, right? <small>There might be a use-case for this (numbers in names that is) but I honestly don't know, so I'd go the way of not preventing the user from typing whatever he thinks his name really is. <em>- Yours Batman1982-0H-Y34H</em></small></p>

<p><strong>Interesting find:</strong> When setting the submit button styles related to the form being valid or invalid you can give users visible feedback on whether they can submit the form or not.</p>

/*
  Let's say Firefox has issues, okay?
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
  As little styling as we need
*/
body {
  font-family: sans-serif;
  font-size: 1.25em;
  line-height: 1.55;
  padding: 1.618em 5%;
  max-width: 900px;
  margin: 0 auto;
}

code {
  font-family: Consolas, Monaco, "Courier New", Courier, monospace;
  background: #f0f0f0;
  font-size: .875em;
  color: #333;
  padding: .25em;
}

.spoken {
  font-family: "Comic Sans MS";
  text-align: center;
  float: right;
  padding: 2em;
  margin: 1em 0 1em 1em;
  background: #ffa;
  border: .3125em solid #333;
  border-radius: 50% 75%;
  width: 300px;
  transform: rotate(-15deg);
}

hr {
  border: 0;
  height: .08em;
  background: #ebc533;
  margin: 2em
}

small {
  font-size: .75em;
  display: block;
  margin: .5em 0;
}

small em {
  color: #595959;
}

/*
  The actual form - finally
*/

form {
  margin: 2em 0;
}

fieldset {
  margin: 0 0 2em;
}

legend {
  font-weight: bold;
  padding: 0 .5em;
}

label {
  display: block;
  margin: 1em 0 0;
  cursor: pointer;
  color: #595959;
}

input,
textarea {
  border: .125em solid #e5e5e5;
  padding: .5em;
}

textarea {
  box-sizing: border-box;
  resize: vertical;
  width: 50%;
  height: 8em;
}

input:not(:focus):valid,
textarea:not(:focus):valid{
  border-color: green;
  color: green;
}

input:not(:focus):invalid,
textarea:not(:focus):invalid {
  border-color: red;
  color: red;
}

input:required,
textarea:required {
  border-color: darkblue;
}

::placeholder {
  color: #777;
}

input:required::placeholder,
textarea:required::placeholder{
  color: orange;
  opacity: 1;
}

button {
  color: darkblue;
  border: 2px solid darkblue;
  padding: .309em .618em;
}

form:valid button {
  color: green;
  border-color: green;
}

form:invalid button {
  color: red;
  border-color: red;
}