HTML5-Formularelemente

by Jens Grochtdreis

HTML

<div id="wrap"> 
        <form action="."> 
            <div> 
                <label for="type-text">Text (&lt;input type=&quot;text&quot;&gt;)</label> 
                <input type="text" name="type-text" id="type-text"> 
            </div> 
            <div> 
                <label for="type-search">Suchfeld (&lt;input type=&quot;search&quot;&gt;)</label> 
                <input type="search" name="type-search" id="type-search"> 
            </div> 
            <div> 
                <label for="type-tel">Telefon (&lt;input type=&quot;tel&quot;&gt;)</label> 
                <input type="tel" name="type-tel" id="type-tel"> 
            </div> 
            <div> 
                <label for="type-url">URL (&lt;input type=&quot;url&quot;&gt;)</label> 
                <input type="url" name="type-url" id="type-url"> 
            </div> 
            <div> 
                <label for="type-email">E-Mail (&lt;input type=&quot;email&quot;&gt;)</label> 
                <input type="email" name="type-email" id="type-email"> 
            </div> 
            <div> 
                <label for="type-datetime">Datum und Zeit (&lt;input type=&quot;datetime&quot;&gt;)</label> 
                <input type="datetime" name="type-datetime" id="type-datetime"> 
            </div> 
            <div> 
                <label for="type-date">Datum (&lt;input type=&quot;date&quot;&gt;)</label> 
                <input type="date" name="type-date" id="type-date"> 
            </div> 
            <div> 
                <label for="type-month">Monat (&lt;input type=&quot;month&quot;&gt;)</label> 
                <input type="month" name="type-month" id="type-month"> 
            </div> 
            <div> 
                <label for="type-week">Woche (&lt;input type=&quot;week&quot;&gt;)</label> 
                <input type="week" name="type-week" id="type-week"> 
            </div> 
            <div> 
                <label for="type-time">Zeit (&lt;input type=&quot;time&quot;&gt;)</label> 
 ...

CSS

/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}


form {margin-bottom: 30px;}
form div {margin-bottom: 15px;} 
label {margin-bottom: 5px; display: block; }