m-lamonaca/dev-notes
1
0
Fork 0
mirror of https://github.com/m-lamonaca/dev-notes.git synced 2025-04-05 18:36: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.
```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"
<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="">
The `datalist` HTML element can provide suggestions to an input that targets it's `id` with the `list` attribute.
<!-- Native Search with autocomplete -->
```html
<input list="items">
<datalist id="items">
<option value="value-1">
<option value="value-2">
@ -569,6 +566,16 @@ The `<meter>` HTML element represents either a scalar value within a known range
</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)
One of the most significant features of HTML5 form controls is the ability to validate most user data without relying on JavaScript.