m-lamonaca/dev-notes
1
0
Fork 0
mirror of https://github.com/m-lamonaca/dev-notes.git synced 2025-04-06 10:56:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve notes for HTML datalist, meter and other inputs

Browse source
This commit is contained in:
Marcello 2023-12-04 21:57:14 +01:00
parent c0b12ea705
commit 522489884e
1 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
docs/languages/html/html.md
View file

@ -549,19 +549,16 @@ Older browsers don't support this input type.
The `<meter>` HTML element represents either a scalar value within a known range or a fractional value. The `<meter>` HTML element represents either a scalar value within a known range or a fractional value.
```html linenums="1" ```html linenums="1"
<meter min="0" max="100" low="33" high="66" optimum="80" value="50" /> <meter min="0" max="100" low="33" high="66" optimum="80" value="50">current value</meter>
``` ```
### More Input Types ### Datalist (Autocomplete)
```html linenums="1" The `datalist` HTML element can provide suggestions to an input that targets it's `id` with the `list` attribute.
<input type="email" id="email" name="email">
<input type="url" id="url" name="url">
<input type="number" name="" id="identifier" min="min-value" max="max-value" step="">
<input type="search" id="identifier" name="">
<!-- Native Search with autocomplete --> ```html
<input list="items"> <input list="items">
<datalist id="items"> <datalist id="items">
<option value="value-1"> <option value="value-1">
<option value="value-2"> <option value="value-2">
@ -569,6 +566,16 @@ The `<meter>` HTML element represents either a scalar value within a known range
</datalist> </datalist>
``` ```
### More Input Types
```html linenums="1"
<input type="email" id="email" name="email" />
<input type="url" id="url" name="url" />
<input type="number" name="" id="identifier" min="min-value" max="max-value" step="" />
<input type="search" id="identifier" name="">
<input type="color" />
```
### [Using Built-In Form Validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) ### [Using Built-In Form Validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
One of the most significant features of HTML5 form controls is the ability to validate most user data without relying on JavaScript. One of the most significant features of HTML5 form controls is the ability to validate most user data without relying on JavaScript.