HTML erklärt #15.2 Input - Spezielle Eingaben
geschrieben von Felix Beuster amDein Browser ist zu klein für den eingebetteten Player. Du kannst das Video hier auf YouTube ansehen.
Der Input tag bietet eine ganze Reihe an semantischen Unterschieden und eine ebenso lange Reihe an verschiedenen Unterstzüzungen der Brwoser. Ich zeige euch heute mal, welche Typen es alles gibt, wofür sie gut sind und wie man sie einbindet.
Das Video ist eine Fortführung des Formularvideos, schaut euch dazu am besten HTML erklärt #15.1 an. Das Video findet ihr oben in der Playlist oder auf YouTube.
Der Quellcode kann wie immer hier eingesehen werden:
1<!DOCTYPE html>2<html>3 <head>4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">5 <title>Formulare 1.1</title>6 <style>7 p, legend {font-size: 1.2em;}8 </style>9 </head>10 <body>11 <h1>Kontrollraum</h1>12 <p>13 Basiscode:<br>14 <code>15 <input type="text" name="text">16 </code>17 </p>18 <form action="kontrolle.php" method="post">19 <fieldset>20 <legend>Zeitangaben</legend>21 <p>22 <label>date <input type="date" name="date"></label><br><br>23 <label>datetime <input type="datetime" name="datetime"></label><br><br>24 <label>datetime-local <input type="datetime-local" name="datetime-local"></label><br><br>25 <label>month <input type="month" name="month"></label><br><br>26 <label>time <input type="time" name="time"></label><br><br>27 <label>week <input type="week" name="week"></label><br><br>28 </p>29 </fieldset>30 <fieldset>31 <legend>Formularinteraktion</legend>32 <p>33 <label>button <input type="button" name="button" value="button"></label><br><br>34 <label>checkbox <input type="checkbox" name="checkbox" value="a"></label><br><br>35 <label>checkbox <input type="checkbox" name="checkbox" value="b"></label><br><br>36 <label>color <input type="color" name="color"></label><br><br>37 <label>file <input type="file" name="file"></label><br><br>38 <label>hidden <input type="hidden" name="hidden" value="hidden"></label><br><br>39 <label>image <input type="image" name="image" src="cebit102.jpg" alt="Submit"></label><br><br>40 <label>radio <input type="radio" name="radio" value="0"></label><br><br>41 <label>radio <input type="radio" name="radio" value="1"></label><br><br>42 <label>range <input type="range" name="range" min="1" max="10"></label><br><br>43 <label>reset <input type="reset" name="reset"></label><br><br>44 <label>submit <input type="submit" name="submit"></label><br><br>45 </p>46 </fieldset>47 <fieldset>48 <legend>Texte etc.</legend>49 <p>50 <label>email <input type="email" name="email"></label><br><br>51 <label>number <input type="number" name="number"min="1" max="5"></label><br><br>52 <label>password <input type="password" name="password"></label><br><br>53 <label>search <input type="search" name="search"></label><br><br>54 <label>tel <input type="tel" name="tel"></label><br><br>55 <label>text <input type="text" name="text"></label><br><br>56 <label>url <input type="url" name="url"></label><br><br>57 </p>58 </fieldset>59 </form>60 </body>61</html>Mehr aus HTML erklärt
Ein parr mehr Artikel
Kommentare
Bisher keine Kommentare.Bitt warte 20 Sekunden, bevor du das Formular abschicken kannst.