html: add more input types notes

This commit is contained in:
Marcello 2022-09-30 17:34:41 +02:00
parent ec5ea59676
commit 76efbea3c7

View file

@ -358,7 +358,7 @@ Used to apply a specific style inline.
<footer></footer> <footer></footer>
``` ```
## HTML Forms ## HTML Forms & Inputs
```html ```html
<form action="data-receiver" target="" method="http-method"> <form action="data-receiver" target="" method="http-method">
@ -397,8 +397,18 @@ PROs & CONs of `POST` method:
<label for="target-identifier">label-here</label> <label for="target-identifier">label-here</label>
<input type="input-type" name="input-name" value="value-sent" id="target-identifier"> <input type="input-type" name="input-name" value="value-sent" id="target-identifier">
</form> </form>
<!-- SAME AS -->
<form>
<label>Label:
<input type="input-type" name="input-name" value="value-sent" id="target-identifier">
</label>
</form>
``` ```
> **Note**: The `<label>` tag is used to define the labels for `<input>` elements.
Input Attributes: Input Attributes:
* `name`: assigns a name to the form control (used by JavaScript and queries) * `name`: assigns a name to the form control (used by JavaScript and queries)
@ -410,73 +420,41 @@ Input Attributes:
### Text Field ### Text Field
One line areas that allow the user to input text. One line areas that allow the user to input text.
The `<label>` tag is used to define the labels for `<input>` elements.
```html ```html
<form> <input type="text" placeholder="placeholder-text" spellcheck="true" pattern="\regex\">
<label for="identifier">Label:</label>
<input type="text" name="label-name" id="identifier" placeholder="placeholder-text">
</form>
<!-- SAME AS -->
<form>
<label>Label:
<input type="text" name="label-name" id="identifier" placeholder="placeholder-text">
</label>
</form>
``` ```
Text inputs can display a placeholder text that will disappear as soon as some text is entered > **Note**: Text inputs can display a placeholder text that will disappear as soon as some text is entered
### Password Field ### Password Field
```html ```html
<form> <input type="password">
<label for="identifier">Password:</label>
<input type="password" name="user-password" id="identifier">
</form>
``` ```
### Radio Buttons ### Radio Buttons
```html ```html
<form action="..." method="post" target="_blank"> <input type="radio" value="value">
<label for="identifier">Radiobutton-Text</label> <input type="radio" value="value" checked>
<input type="radio" name="option-name" id="identifier" value="option-value">
<label for="identifier">Radiobutton-Text</label>
<input type="radio" name="option-name" id="identifier" value="option-value" checked="checked">
<button type="submit">Button-Action</button>
</form>
``` ```
### Checkboxes ### Checkboxes
```html ```html
<form> <input type="checkbox">
<label for="identifier">Option-Name</label> <input type="checkbox" checked>
<input type="checkbox" name="" id="identifier">
<label for="identifier">Option-Name</label>
<input type="checkbox" name="" id="identifier">
<label for="identifier">Option-Name</label>
<input type="checkbox" name="" id="identifier" checked="checked">
</form>
``` ```
### Dropdown Menus ### Dropdown Menus
```html ```html
<form> <select multiple>
<label for="identifier">Label:</label> <option value="value">Value</option>
<select name="" id="identifier" multiple> <option value="value">Value</option>
<option value="value">Value</option> <option value="value" selected>Value</option>
<option value="value">Value</option> </select>
<option value="value" selected>Value</option>
</select>
</form>
``` ```
Use `<select>` rather than radio buttons when the number of options to choose from is large Use `<select>` rather than radio buttons when the number of options to choose from is large
@ -484,39 +462,33 @@ Use `<select>` rather than radio buttons when the number of options to choose fr
Provides the ability to select multiple options. Provides the ability to select multiple options.
Conceptually, `<select>` becomes more similar to checkboxes. Conceptually, `<select>` becomes more similar to checkboxes.
### FILE Select ### File Select
Upload a local file as an attachment Upload a local file as an attachment. The `accept` attribute value is a string that defines the file types the file input should accept.
This string is a comma-separated list of [unique file type specifiers][file_type_specifiers_docs].
```html ```html
<form> <input type="file" value="filename" accept=".txt,application/json,audio/*">
<label for="file-select">Upload:</label>
<input type="file" name="upload" value="file-select">
</form>
``` ```
[file_type_specifiers_docs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
### Text Area ### Text Area
Multi line text input. Multi line text input.
```html ```html
<form> <textarea rows="row-number" cols="column-number" >pre-existing editable test</textarea>
<label for="identifier">Label:</label>
<textarea name="label" rows="row-number" cols="column-number" id="identifier">pre-existing editable test</textarea>
<!-- rows and columns should be defined in a CSS -->
</form>
``` ```
### Submit & Reset ### Submit & Reset
```html ```html
<form action="" method="POST"> <input type="submit" value="label">
<input type="submit" value=""> <input type="reset" value="label">
<input type="reset" value=""> <!-- OR -->
<!-- OR --> <button type="submit" value="label">
<button type="submit" value=""> <button type="reset" value="label">
<button type="reset" value="">
</form>
``` ```
`submit`: sends the form data to the location specified in the action attribute. `submit`: sends the form data to the location specified in the action attribute.
@ -525,10 +497,10 @@ Multi line text input.
### Button ### Button
```html ```html
<button type="button/reset/submit" value=""/> <button type="button/reset/submit" value="label"/>
<!-- can contain HTML --> <!-- can contain HTML -->
<button type="button/reset/submit" value=""></button> <button type="button/reset/submit" value="lebel"></button>
``` ```
### Fieldset ### Fieldset
@ -547,19 +519,6 @@ Group controls into categories. Particularly important for screen readers.
</fieldset> </fieldset>
``` ```
## HTML5 Input Types
Newer input types are useful for:
* validation
* restricting user input
* Using custom dialogs
Downsides:
* most are not supported by older browsers, especially Internet Explorer.
* each browser has a different implementation so the user experience is not consistent.
### Email Field ### Email Field
Used to receive a valid e-mail address from the user. Most browsers can validate this without needing javascript. Used to receive a valid e-mail address from the user. Most browsers can validate this without needing javascript.
@ -573,6 +532,26 @@ Older browsers don't support this input type.
</form> </form>
``` ```
### Progress Bar
```html
<progress max="100" value="70"> 70% </progress>
```
### Slider
```html
<input type="range" min="0" max="20">
```
### Meter
The `<meter>` HTML element represents either a scalar value within a known range or a fractional value.
```html
<meter min="0" max="100" low="33" high="66" optimum="80" value="50" />
```
### More Input Types ### More Input Types
```html ```html
@ -580,6 +559,14 @@ Older browsers don't support this input type.
<input type="url" id="url" name="url"> <input type="url" id="url" name="url">
<input type="number" name="" id="identifier" min="min-value" max="max-value" step=""> <input type="number" name="" id="identifier" min="min-value" max="max-value" step="">
<input type="search" id="identifier" name=""> <input type="search" id="identifier" name="">
<!-- Native Search with autocomplete -->
<input list="items">
<datalist id="items">
<option value="value-1">
<option value="value-2">
<option value="value-3">
</datalist>
``` ```
### [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)