Last updated on May 29th, 2016 at 09:36 pm
HTML5 Form Validation API For Email, URL and Empty Input Field With Slider Placeholder
HTML5 is very handy when it comes to form validation. Complex javascript coding can be replaced with simple HTML5 attributes in most cases.
HTML5 can be used to,
-
Add a placeholder to the input tag
Add a slider or range in the HTML form
Check whether a field is empty or not
Check whether a field has a valid email format
Check whether a field has valid URL starting with [http or https]
Inorder to have a placeholder in the input tag all you have to do add an attribute with name placeholder=”” inside the input tag as shown below.
<label>Phone <input type="text" name="myform" placeholder="Phone" id="myform" class="inp" ></label>
Creating a slider with values embedded is another advantage of HTML5
<label>Satisfaction: <input type=range min=0 max=100 value=20 step=20 list=testlist> <datalist id=testlist> <option>0</option> <option>20</option> <option>40</option> <option>60</option> <option>80</option> <option>100</option> </datalist></label>
In the above code we have minimum value as 0 and maximum as 100, the default value is set as 20. When page loads slider will be shown at position 20.
How to validate whether a input field is empty or not?
It is simple all you need to do is add attribute “required” inside the input tag.
<input type="text" name="myform" required placeholder="Name" class="inp" id="myform">
HTML5 will be also helpful to check whether an email is entered in the correct format. Inside the input tag add attribute type=”email”
<input type="email" name="myform" required id="myform" placeholder="Email" class="inp" >
In HTML5 we can add type=”url” and pattern=”https?://.+” inside the input tag , This means that patterns with http:// or https:// will be accepted and all other patterns will be rejected by the browser.
<label>Website Name<input type="url" required name="myform" placeholder="URL" pattern="https?://.+" id="myform" class="inp" ></label>
Below you will find a simple HTML form with all kind of validation and slider included. Just copy paste the code. Make sure you run this code in an HTML5 enabled web browser.
<!DOCTYPE html> <html> <head> <title>Simple HTML Form With HTML 5 Validation </title> </head><body><br> <div id="header"> <h1>HTML5 Form Validation For Email, URL, Range or Slider and Empty Field Along With Placeholder</h1> <form id="search"> <label>Name<input type="text" name="myform" required placeholder="Name" class="inp" id="myform"></label><p> <label>Email<input type="email" name="myform" required id="myform" placeholder="Email" class="inp" ></label><p> <label>Age: <input type="number" size="6" name="myform" min="18" max="99" value="21"></label><p> <label>Satisfaction: <input type=range min=0 max=100 value=20 step=20 list=testlist> <datalist id=testlist> <option>0</option> <option>20</option> <option>40</option> <option>60</option> <option>80</option> <option>100</option> </datalist></label><p> <label>Website Name<input type="url" required name="myform" placeholder="URL" pattern="https?://.+" id="myform" class="inp" ></label><p> <label>City <input type="text" name="myform" placeholder="City" id="myform" class="inp" ></label><p> <label>Phone <input type="text" name="myform" placeholder="Phone" id="myform" class="inp" ></label><p> <label>Mobile <input type="text" name="myform" placeholder="Mobile" id="myform" class="inp" ></label><p> <label>Country <input type="text" name="myform" placeholder="Country" id="myform" class="inp" ></label><p> <br><input type="submit" class="submit" value="Submit"> </form> *This will work only in HTML5 enabled web browser. </div> </body> </html>
admin