input


Förkortningar
- DAP - Device APIs Policy
- FAB - floating action button
Motsats
- output

Programmeringsspråk
Tagg i HTML
input
Attribut i HTML
autocomplete
autofocus
disabled
form
name
readonly
required
type
value
Attribut med uttryck för input i HTML
pattern
Nya värden för attributet type
i HTML 5
Ta bort förstoringsglas och kryss med CSS
input[type="search"] {
-webkit-appearance: textfield;
}
::-webkit-search-cancel-button {
display: none;
}

Exempel på design för toggle
Kod för HTML
<input type="checkbox" selected="false" class="switch" id="autoupdate">
<label for="autoupdate"></label>
Kod för CSS
.switch {
display: none;
}
.switch + label::after {
background: var(--white);
border-radius: 50%;
border: 2px solid var(--black);
box-sizing: border-box;
content: "";
display: block;
height: 30px;
transform: scale(0.8);
transition: .25s margin;
width: 30px;
}
.switch + label {
cursor: pointer;
}
Platser
- Formulär
- fieldset
Tillbehör
- legend
- label
Liknande
Platser
Skicka formulär med Javascript
document.forms['form-redirect'].submit();
document.forms[0].submit()
document.forms['aspnetForm'].submit()
Fokus på ett element med Javascript
document.f.username.focus();
Kod för olika typer av filer i HTML
<input type="file" accept="image/*;capture=camera">
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
Exempel på nya i HTML 5
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
file accept="image/*;capture=camera"
file accept="video/*;capture=camcorder"
file accept="audio/*;capture=microphone"
autocomplete=one-time-code

Applikation

Tjänst

Externa länkar
- http://www.developerdrive.com/2013/09/how-to-style-range-sliders-in-webkit/
- http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
- http://stackoverflow.com/questions/16349424/how-to-style-input-type-range-in-ie10

