<form onsubmit="event.preventDefault(); window.alert('submitted')">
<label for="tel">Phone number</label>
<input type="tel" name="tel" pattern="[0-9]{10}" placeholder=
"Please enter a ten digit phone number" title="10 digit phone number" required />
<p>
The regular expression above accepts exactly ten digits.
</p>
<br/>
<label for="password">Password</label>
<input id="password" name="password" type="password" title="Password (UpperCase, LowerCase, Number/SpecialChar and min 8 Chars)" 
pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" placeholder="Minimum 8
characters, one number, one uppercase and one lowercase letter" required/>
<p>
This regular expression restricts the characters the user can use in the password: Minimum 8
characters, one number, one uppercase and one lowercase letter
</p>
  <label for="URL">URL</label>
<input name="URL" type="url" title="enter a valid url" placeholder="Ex.: https://example.com" pattern="https?://.+" required/>
  <br/>

  <label>Date (dd/mm/yyyy or mm/dd/yyyy)</label>
<input type="text" title="Enter date in dd/mm/yyyy format" pattern="\d{1,2}/\d{1,2}/\d{4}" required />
  <br/>
  <label>Price</label>
<input type="text" pattern="\d+\.{1}\d{2}" title="Enter price in currency format, ex.: 55.40" required/>
  <br/>
    <input type="submit"/>

</form>
input, p, label {
  box-sizing: border-box;
  font-size: 1rem;
  font-family: Helvetica, sans-serif;
}
input {
  padding: 0.5rem;
  margin: 1rem 1rem 0 1rem;
  width:300px;
}
p {
  width: 500px;
  margin-top:0.5rem;
}
label {
  display: block;
  margin-top:1.5rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.