Data form validation

by Aggre _--

HTML

<form>

  <label>Mail( type="mail" )</label>
  <input type="mail" required>
  <label>Mail( pattern )</label>
  <input pattern="[\w\W]+@[\w\W]+(\.\w+)" required>
  
  <label>URL( type="url" )</label>
  <input type="url" required>
  <label>URL( pattern )</label>
  <input pattern="https?:\/\/[\w\W]+(\.\w+)" required>
  
  <p contenteditable="true" pattern="banana" required>Here is the "contenteditable"</p>
  
  <button>Submit</button>
  
</form>

CSS

*:invalid {
  border: 2px solid #fb9500;
}

*:valid {
  border: 2px solid #2cbb0f;
}

input {
  border: 2px solid lightgray;
}

label {
  display: block;
  font-family: monospace;
  font-style: italic;
}

* {
  padding: 8px;
  border-radius: 2px;
}