< Zurück zu HTML erklärt

HTML erklärt #15.2 Input - Spezielle Eingaben

geschrieben von Felix Beuster am

Dein 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>

< Zurück zu HTML erklärt

< Zurück zu HTML erklärt

Kommentare

Bisher keine Kommentare.
Schreib etwas neues

Noch 1500 Zeichen übrig.

Mit * makierte Felder sind Pflichtfelder. Mit dem Absenden des Formulars eklären Sie sich mit den Datenschutzerklärung einverstanden.

Bitt warte 20 Sekunden, bevor du das Formular abschicken kannst.

< Zurück zu HTML erklärt < Zurück zu HTML erklärt