Parcourir la source

Update README

Make usage more understandable.
master
TheoryOfNekomata il y a 1 an
Parent
révision
93fccb18f5
1 fichiers modifiés avec 30 ajouts et 14 suppressions
  1. +30
    -14
      README.md

+ 30
- 14
README.md Voir le fichier

@@ -26,7 +26,7 @@ The package can be found on:
1. Lay out your input elements (all valid input types supported including `<select>` and `<textarea>`) then bind them
to a form:
* Put them inside a `<form>`.
* Alternatively, use the `form=""` attribute then specify the form `id` where they will be bound).
* Alternatively, use the `form=""` attribute then specify the form `id` where they will be bound.
2. Add `name=""` attributes to your input elements.
3. Get your `<form>` element:
* Query the form directly.
@@ -40,21 +40,36 @@ The package can be found on:
For an example form:

```html
<button id="autofill" type="button">
Autofill login form
</button>

<form id="loginForm">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit" name="type" value="client">
Log In As Client
</button>
<button type="submit" name="type" value="admin">
Log In As Admin
<form id="loginForm" aria-label="Login Form">
<button id="autofill" type="button">
Autofill login form (username: admin)
</button>
<hr />
<fieldset>
<legend>
Login
</legend>
<div>
<input type="text" name="username" placeholder="Username" />
</div>
<div>
<input type="password" name="password" placeholder="Password" />
</div>
<div>
<button type="submit" name="type" value="client">
Log In As Client
</button>
<button type="submit" name="type" value="admin">
Log In As Admin
</button>
</div>
</fieldset>
</form>

<!-- Input elements can be placed outside the form element they are bound to. -->

<label>
<input type="checkbox" name="remember" form="loginForm" />
Remember my login credentials
@@ -103,10 +118,11 @@ form.addEventListener('submit', async e => {
}
});

// You can use fomrxtra directly with elements as long as they are bound to a form.
const autofillButton = document.getElementById('autofill');

autofillButton.addEventListener('click', e => {
setFormValues(form, { username: 'admin', remember: true });
setFormValues(e.currentTarget.form, { username: 'admin', remember: true });
});
```



Chargement…
Annuler
Enregistrer