5
\$\begingroup\$

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

enter image description here

Solution

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

1) Can this solution be improved?

2) Can regex patterns be avoided?

Improve this question
\$\endgroup\$
1
  • 1
    \$\begingroup\$ Validate your solution on the site of w3. There are 13 errors and 5 warnings about your code. \$\endgroup\$
    – Sumurai8
    Dec 24, 2015 at 15:01

2 Answers 2

Reset to default
7
\$\begingroup\$

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 <br><br><br>, 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).

Improve this answer
\$\endgroup\$
8
  • \$\begingroup\$ - has to be escaped? but it is in [] \$\endgroup\$
    – overexchange
    Dec 24, 2015 at 15:25
  • \$\begingroup\$ @overexchange yes, but [_-.] is not a valid range. \$\endgroup\$
    – tim
    Dec 24, 2015 at 15:27
  • \$\begingroup\$ "•You can't have a placeholder for date, month, week, time (it doesn't make that much sense)" --> It might be good to note why that is. In browsers that do support these types, an alternative way of input is displayed, not a standard textbox. There is no place to put the placeholder text in such an input element. \$\endgroup\$
    – Sumurai8
    Dec 24, 2015 at 15:29
  • 1
    \$\begingroup\$ regarding email validation: if you are interested, here is a valid email regex. It's especially interesting that stuff like "<script>alert(1)</script>"@example.com is allowed. This questions is also quite interesting regarding valid characters in email addresses. \$\endgroup\$
    – tim
    Dec 24, 2015 at 15:29
  • 1
    \$\begingroup\$ _-. is parsed as "the range of characters between _ and ., which does not make much sense (look at a-z). When you escape -, it parses as _ literal, or -literal, or . (matches any character, think of .* for example). You want to match the literal dot, not every other character too. \$\endgroup\$
    – Sumurai8
    Dec 24, 2015 at 15:34
4
\$\begingroup\$

Tim's answer addresses most of the problems. In addition to that:

Your <label> elements both miss a for attribute, and do not contain an <input> element. Either make the corresponding <input> element a child of the label element, or add an id to the input element and use this id as a value for the for attribute on your label element.

You use the pattern attribute without the title attribute. When the user enters an invalid value, it is not made clear to the user how to improve this. Add a title attribute to tell what input is expected.

Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.