Inputfield

Examples


<label for="i0" class="label">Inputfield</label>
<input type="text" class="inputfield" id="i0"/>

    

<label for="i1" class="label">E-mail</label>
<input type="email" class="inputfield" id="i1"/>

    

<label for="i2" class="label">Password</label>
<input type="password" class="inputfield" id="i2"/>

    

<label for="i3" class="label">Date</label>
<input type="date" class="inputfield inputfield--date--placeholder" placeholder="13/05/1990" id="i3"/>

    

<label for="i4" class="label">Number</label>
<input type="number" class="inputfield" id="i4"/>

    

<label for="i5" class="label inputfield__icon--search">Search</label>
<input type="search" class="inputfield inputfield--search" id="i5"/>

    

<label for="i6" class="label">Url</label>
<input type="url" class="inputfield" id="i6"/>

    

<label for="i7" class="label">Disabled inputfield</label>
<input disabled type="text" class="inputfield" value="Disabled" id="i7"/>

    

<label for="i8" class="label">Inputfield with watermark</label>
<input type="text" class="inputfield" placeholder="Watermark" id="i8"/>

    

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


<label for="i9" class="label">Inputfield with hint text</label>
<input type="text" class="inputfield" id="i9" aria-describedby="i9"/>
<p class="hint" id="i9">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>