Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> legend { color: #fff; background-color: #095484; padding: 3px 5px; font-size: 20px; } </style> </head> <body> <h2>Füllen Sie das Formular aus, um am Großprojekt teilzunehmen.</h2> <form action="/action_page.php"> <fieldset> <legend>Personalbogen</legend> <label for="name"> Vorname: </label> <input id="name" type="text" name="firstname" placeholder="First name" required> <label for="last">Nachname:</label> <input id="last" type="text" name="lastname" placeholder="Last name" required><br><br> <label for="age">Alter:</label> <input id="age" type="number" min="10" max="100" step="1" name="number-of-colors"> <label for="website">Webseite:</label> <input id="website" type="url" multiple> <br><br> <label for="address">E-Mail-Adresse:</label> <input id="address" type="email" name="email" placeholder="YourEmail@example.com" required> <label for="tel">Tel.:</label><input id="tel" type="tel" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"><br><br> </fieldset> <fieldset> <legend>Wir möchten SIE kennenlernen</legend> <label for="color">Lieblingsfarbe:</label> <input id="color" type="color" name="color" value="#1c87c9"/><br> <p>Motivationsgrad:</p> <input type="range" min="0" max="10" value="4"><br> <p>Lieblingsjahrezeit:</p> <input type="radio" name="season" value="winter"> Winter<br> <input type="radio" name="season" value="autumn"> Herbst<br> <input type="radio" name="season" value="summer"> Sommer<br> <input type="radio" name="season" value="spring"> Frühling</p> <p>Lieblingsmusik:</p> <input type="radio" name="music" value="jazz"> Jazz<br> <input type="radio" name="music" value="blues"> Blues<br> <input type="radio" name="music" value="pop"> Pop<br> <input type="radio" name="music" value="rock"> Rock</p> </fieldset> <fieldset> <legend>Erreichbarkeit</legend> <label for="project">Wann sind Sie bereit, das Projekt zu starten?</label> <input id="project" type="date" name="date" value="2018-01-01" min="2018-01-01" max="2018-04-01"><br> <label for="hours">Nennen Sie Ihre bevorzugten Arbeitszeiten:</label> <input id="hours" type="time" name="time" value="09:00"/> <label for="time">bis </label> <input id="time" type="time" name="time" value="18:00"/><br> <label for="password">Geben Sie Ihr Password ein:</label> <input id="password" type="password" name="password" minlength="6" required placeholder="Minimum 6 Zeichen"/> <br><br> <input type="submit" value="Absenden"> <input type="reset" value=Reset> </fieldset> </form> </body> </html>