<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>