Form with Pico.css

With the framework Pico.css it is simpler because the invalid state is controlled by the attribute aria-invalid, and our component adds it automatically. Here is a short example.

<form>
  <label>
    Name
    <input type="text" name="name">
  </label>
  <label>
    Email
    <input type="email" name="email">
  </label>
  <button type="submit">Submit</button>
</form>

To set it up:

1. Add text elements with the data-error="*" that will display error text.
2. For FormIt compatibility add placeholders for values and errors.

Important

Markup validators complain about an empty action, so set the page URL there.

<form> 
<form action="[[~[[*id]]]]"> 
  <label>
    Name
    <input type="text" name="name"> 
    <input type="text" name="name" value="[[+fi.name]]"> 
    <small data-error="name">[[+fi.error.name]]</small> 
  </label>
  <label>
    Email
    <input type="email" name="email"> 
    <input type="email" name="email" value="[[+fi.email]]"> 
    <small data-error="email">[[+fi.error.email]]</small> 
  </label>
  <button type="submit">Submit</button>
</form>