Today I Learned - Rocky Kev

TIL Validation with pure HTML

POSTED ON:

TAGS:

<form>
  <!-- Case insensitive binary choice -->
  <label for="item1">Would you prefer a banana or a cherry?</label>
  <input id="item1" pattern="[Bb]anana|[Cc]herry">

  <!-- Email validation -->
  <label for="item2">What's your e-mail?</label>
  <input id="item2" type="email" name="email">

  <!-- Max length validation -->
  <label for="item3">Leave a short message</label>
  <textarea id="item3" name="msg" maxlength="140" rows="5"></textarea>

  <!-- Numeric + Symbol pattern as required field -->
  <label for="item4">Phone Number (format: xxxx-xxx-xxxx):</label><br/>
  <input id="item4" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required >

  <button>Submit</button>
</form>

Reference


Related TILs

Tagged:

TIL Gmail has a 102KB size-limit for HTML

PLACEHOLDER

TIL how Error correction works in HTML

You never get an 'Invalid Syntax' error on an HTML page. Browsers fix any invalid content and go on.

TIL what DOCTYPE means

tl;dr: DOCTYPE declaration in the first line of the HTML file, to instruct the browser to run the code in Standard mode.