HTML 5 form validation and form handling Problem Statement
  
  Create one form having following fields
  
  1) Email ( with html5 email validation).
  
  2) Password (It should take minimum 6 charactors ).
  
  3) Your project URL ( with html5 url validation).
  
  4) Project completion date ( with html5 date validation).
  
  5) Current month ( with html5 month validation).
  
  6) Current week (with html5 week validation).
  
  7) Current time (with html5 time validation).
  
  8) Select color (with html5 color features).
  
  9) Age (with html5 range features and also show the selected age ).
  
  10) Your hobbies (with html5 data list ).
  
  
  
  Expected output
  
  


Solution

&lt;head&gt;
        &lt;title&gt;Form validation&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;style type="text/css"&gt;
            form, p{
                width: 18%;
                margin: auto;
            }
            form *{
                height: 30px;
            }
            form &gt; input[type=text]{
                height: 50px;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;Fill The Form&lt;/p&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
        &lt;form method="POST" action="javascript:void(0)" enctype="multipart/form-data"&gt;
                &lt;input type="email" name="email_id" placeholder="Email" required autocomplete="off" autofocus="on" pattern="^[A-Za-z0-9_-.]+@[A-Za-z-]{3, 4}\.[A-Za-z]{2, 3}$"&gt;&lt;br&gt;
                &lt;input type="password" name="password" placeholder="Password" required autocomplete="on" pattern="^[A-Za-z0-9_.-]{6, 10}$"&gt;&lt;br&gt;
                &lt;input type="url" name="url" placeholder="your project URL" required autocomplete="on"&gt;&lt;br&gt;
                &lt;input type="date" name="projectCompletionDate" placeholder="Project completion date" required autocomplete="off"&gt;&lt;br&gt;
                &lt;input type="month" placeholder="Current month" required autocomplete="on"&gt;&lt;br&gt;
                &lt;input type="week" placeholder="Current week" required autocomplete="on"&gt;&lt;br&gt;
                &lt;input type="time" placeholder="Current time" required autocomplete="on"&gt;&lt;br&gt;
                &lt;label&gt;Select color:&lt;/label&gt;&lt;input type="color" required autocomplete="on"&gt;&lt;br&gt;
                &lt;label&gt;Age:&lt;/label&gt;&lt;input type="range" required autocomplete="on"&gt;&lt;br&gt;
                &lt;label&gt;Hobbies:&lt;/label&gt;&lt;input list="hobbies" name="hobby"&gt;
                                          &lt;datalist id="hobbies"&gt;
                                            &lt;option value="Soccer"&gt;
                                            &lt;option value="Reading"&gt;
                                            &lt;option value="Golf"&gt;
                                            &lt;option value="Swimming"&gt;
                                            &lt;option value="Tennis"&gt;
                                          &lt;/datalist&gt;
                &lt;input type="submit" value="Submit Query"&gt;
        &lt;/form&gt;
    &lt;/body&gt;




1) Can this solution be improved?

2) Can regex patterns be avoided?
Validating HTML5 Code

It seems that you are new to HTML5, so it's a good idea to validate your code. You have 14 errors and 5 warnings in your code:


autofocus="on" should be autofocus
Your email regex is invalid (because of the - which needs to be escaped).
You can't have a placeholder for date, month, week, time (it doesn't make that much sense)
You can't use required with color or range (it's automatically set to some value, so requiring it doesn't make sense)
Options must have a value or a label


Problem Statement vs Your Code


range is probably not ideal for age, but as it's in the spec, there's nothing you can do about it. But: For me, it doesn't show the age in firefox or chrome. You probably need JavaScript to do that.
Your password pattern is quite restrictive. The spec says to set a minimum of 6 characters, which makes sense. But restricting what those characters might be, or the length of the password are not good ideas. 
Your email pattern is too strict. There are TLDs that are more than 3 characters. The local part of an email can contain more than alphanum + _-., and the domain can also contain a lot more than a-z. Also, {3, 4} matches {3, 4} literally, which doesn't make that much sense. Just use the html5 email validation like the spec says.


Other


autocomplete="off" is a very good idea for passwords. But for many other inputs (generally generic inputs that a user uses often on different websites/forms, such as emails), it reduces usability. 
Try to use standard names to increase readability and so that autocomplete will work (what even is an email_id? email would fit better).
autocomplete="on" is the default, so you don't really need to specify it (it clutters up your code and makes it harder to read). 
Your indentation is inconsistent (2 vs 4 vs 8 spaces, and datalist is indented even more).
You should not use linebreaks to change the look of the page. That's what CSS is for (I know it's easier to just place &lt;br&gt;&lt;br&gt;&lt;br&gt;, and I do it too sometimes, but it would be cleaner to do it via CSS).



  Can regex patterns be avoided?


Not for the password, but for the email, it can be avoided. As the problem statements says, use HTML5 email validation (it works automatically for type email, no need for a pattern; and your pattern is way too strict, disallowing a lot of valid email addresses).