<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Form validation: Task 1</title>

  </head>

  <body>
    <form>
      <h2>Enter your support query</h2>
      <ul>
        <li>
          <label for="uname">User name:</label>
          <input type="text" name="uname" id="uname" minlength="5" maxlength="20" required>
        </li>
        <li>
          <label for="email">Email address:</label>
          <input type="email" name="email" id="email" required>
        </li>
        <li>
          <label for="phone">Phone number:</label>
          <!--<input type="tel" name="phone" id="phone" maxlength="15" required>-->
          <input type="number" name="phone" id="phone" required>
        </li>
        <li>
          <label for="comment">Comment:</label>
          <textarea name="comment" id="comment" cols="36" rows="6" maxlength="200" required></textarea>
        </li>
        <li>
          <button>Submit comment</button>
        </li>
      </ul>
    </form>
  </body>

</html>
body {
  background-color: #fff;
  color: #333;
  font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

/* My CSS from here */

li {
  margin-bottom: 0.5rem;
  list-style-type: none;
  display: flex;
}

input, textarea {
  border: 1px solid gray;
  border-radius: 3px;
}

input {
  width: 15rem;
  height: 1.5rem
}

label {
  align-self: top;
  margin-right: 10px;
  width: 7rem;
}

input:invalid, textarea:invalid {
  border: 1px solid red;
}

button {
  width: 8rem;
  height: 1.5rem;
  background: rgb(229, 225, 225);
  border: 1px solid gray;
  border-radius: 5px;
  font-size: 0.8rem;
}

const phone = document.querySelector('input[id="phone"]');
phone.addEventListener('input', ()=>
  phone.value = phone.value.slice(0,15)
)
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.