informel validation attributes

by juliendelort

HTML

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

<inform-el>
  <form>

    <label>
      Non empty
      <inform-field>
        <input type="text" name="field1" required />
      </inform-field>
    </label>

    <label>
      Must be 'ab'
      <inform-field>
        <input type="text" name="field2" pattern="^ab$" value="c" />
      </inform-field>
    </label>

    <label>
      A url
      <inform-field>
        <input type="url" name="field3" placeholder="url" value="a" />
      </inform-field>
    </label>

    <label>
      An email address
      <inform-field>
        <input type="email" name="field4" placeholder="email" value="a" />
      </inform-field>
    </label>
    
    <button type="submit">Submit</button>
  </form>
</inform-el>

CSS

label {
  width: 400px;
  display: block;
  overflow: hidden;
  margin-bottom: 20px;
}

input {
  float: right;
  width: 100%;
  box-sizing: border-box;
}

body {
  background: #f6f8fa;
  font-family: arial;
  padding: 20px;
}