inform-el error attributes

by juliendelort

HTML

<script src="https://unpkg.com/informel"></script>

<inform-el>
  <form>

    <label>
      Type a url (...or not)
      <inform-field default-error="This error is both for required and type=url">
        <input type="url" name="field1" required  />
      </inform-field>
    </label>
    
    <label>
      Type an email (...or not)
      <inform-field value-missing="You need to type something here!" type-mismatch="This is not an email!">
         <input type="email" name="field1" required  />
      </inform-field>
    </label>

   
    <button type="submit">Submit</button>
  </form>
</inform-el>

CSS

label {
  display: block;
  margin-bottom: 20px;
}
body {
  background: #f6f8fa;
  font-family: arial;
  padding: 20px;
}

inform-el {
  --error-margin: 5px 0; 
}