HTML5 ?? (? : ??, ??, ??, ??)? ???? ??? ?? ?? ??? ??? ??? ? ?????

HTML5 ??? ???? ??? ?? ?? ??? ????? required , pattern , min ? max ? ?? ??? ???? HTML ?? ??? ??? ?? ??? ?? ?? ? ? ????. ??? ? ??? ???? ??? ??? ????.

• ?? ?? : required ??? ??? ???? ?? ?? ???? ?? ??? ?? ? ? ????. ?? ??:

   <code class="html"><input type="text" name="username" required></code>

  ????? ??? ??? ? username ??? ?? ? ? ????.

• ?? ?? : pattern ??? ?? ?? ?? ???? ?? ???? ???? ? ?????. ?? ??:

   <code class="html"><input type="text" name="zipcode" pattern="[0-9]{5}" title="Five digit zip code"></code>

  ????? zipcode ??? 5 ?? ?? ? ?? ? ? ????.

• ?? ? ?? ?? : min ? max ??? ?? ?? ?? ?? ??? ?? ? ?? ?? ???? ? ?????. ?? ??:

   <code class="html"><input type="number" name="age" min="18" max="100"></code>

  ????? age ??? 18?? 100 ??? ? ? ?? ? ? ????.

??? ??? ???? HTML?? ?? ??? ??? ?? ??? ?? ? ? ????.? ??? ?? JavaScript?? ????? ?? ? ??? HTML?? ?? ??? ??? ?? ??? ?? ? ? ????.

JavaScript? ???? ?? ??? HTML5 ??? ???? ?? ??? ?????

?? ??? HTML5 ??? ???? JavaScript??? ??? ??? ???? ?? ???? ? ?? ??? ?????.

• ?? ?? : HTML5 ??? HTML ??? ?? ?? ? ? ???? ?? ???? ? ??? ?? ??? ??? ? ????.
• ?? ???? ?? : ???? ?? ????? ????? ??? HTML5 ??? ?? ??? ???? ???? ?? ?? ???? ?????? ??? ???? ????? ?????.
• ?? ?? : ???? ??? ?? ??? ??? ????? ?? ? ????? ? ???????? ? ????? ?? ? ????.
• ??? ?? : ???? ?? ??? ? ??? ??? ?? ?? ??? ?? ???? ???? ?? ?? ??? ??? ??????.
• ??? : HTML5 ?? ??? ?? ??? ?? ? ? ???? ?? ???? ???? ????? ???? ?? ?? ??? ???? ????? ?????.
• ?? ??? ?? : HTML5 ??? ???? ?? ??? ??? JavaScript ??? ?? ??? ???????? ?? ?? ? ? ??????.

HTML5 ?? ?? ??? ??? ? ?? ???? ???? ??? ?? ? ? ?????

HTML5 ?? ?? ??? ??? ? ??? ???? ??? ?? : ? ?? ??? ?????.

• ?? ?? : Webshim ?????? ?? JavaScript ?? ??? ???? ????? ??? ??? ???? ?? ?? ?????? HTML5 ?? ?? ??? ??????.
• ?? ??? ?? : JavaScript? ???? ?? ??? ?? ????? ???? HTML5 ??? ???? ?? ?????? ??? ??? ?????. ?? ?? ?? ???? ??? ??? ?? ??? ??? ? ????.
• ??? ?? : ??? ???? ????? ?? ??? ?????. ?, HTML5 ??? ???? ?? ?????? JavaScript? ???? ??? ???? ?????.
• ??? : ??? ???? ??? ??? ???? ?? ???? ???? ??? ??? ????? ??????. Browserstack ?? Sauce Labs? ?? ??? ??? ??? ???? ? ??? ? ? ????.

• CSS ???? : CSS? ???? ?? ??? ?? ?? ???? ?????? ???????? ???? ?????. ?? ??:

   <code class="css">:invalid { border: 2px solid red; }</code>

  ??? ??? ?????? ?? ???? ?? ??? ???? ?? ? ??? ??? ?????.

?? ????? HTML5 'Pattern'??? ?? ??? ??? ??? ??? ?? ?? ? ? ?????

HTML5 pattern ??? ??? ?? ??? ???? ?? ?? ???? ?? ??? ? ????. ??? ??? ? ?? ?? ??? ????.

• ??? ?? ??? ?? :

   <code class="html"><input type="text" name="email" pattern="[a-z0-9._% -] @[a-z0-9.-] \.[az]{2,}$" title="Enter a valid email address"></code>

  ? ??? ?? ? ???? ??? ??? ?? ???? ?????.

• ??? ?? ?? :

   <code class="html"><input type="password" name="password" pattern="(?=.*\d)(?=.*[az])(?=.*[AZ]).{8,}" title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 or more characters"></code>

  ? ??? ????? ?? ??? ??, ??? 1 ?, ??? 1 ?, ??? 8 ? ??? ????? ?????.

• ?? ?? ?? ?? :

   <code class="html"><input type="text" name="creditcard" pattern="^(?:4[0-9]{12}(?:[0-9]{3})?|[25][1-7][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$" title="Enter a valid credit card number"></code>

  ? ??? Visa, MasterCard, American Express, Discover ? JCB? ??? ???? ?? ?? ??? ?????.

• ?? ?? ??? ?? :

   <code class="html"><input type="tel" name="phone" pattern="\ ?[1-9]\d{1,14}" title="Enter a valid phone number"></code>

  ? ??? ???? ?? ?? ??? ??? ???? ?? 15 ??? ?? ?? ??? ?????.

? ??? pattern ??? HTML ?? ??? ?? ??? ??? ?? ??? ???? ?? ??? ??? ? ??? ?????.

? ??? HTML5 ?? (? : ??, ??, ??, ??)? ???? ??? ?? ?? ??? ??? ??? ? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!