Formulare in Bootstrap - Beispiel

Formulare in Bootstrap - Beispiel zum Ausprobieren und Weiterverwenden

Um dem Besucher die Möglichkeit zur Interaktion zu bieten, sind Formulare nicht mehr wegzudenken. In Twitter Bootstrap sind alle Formularelemente bereits von Haus aus sehr klickfreudig designt. Es gibt verschiedene Vorlagen, um ein horizontales Formular oder ein Inline-Formular zu erzeugen. Zusammen mit dem richtigen Button können auf diese Weise schnell benutzerfreundliche Formulare erzeugt werden.

Weitere Beispiele:

Frage stellen
Hast du eine Frage zu dieser Seite?
Fragen anderer Besucher zum Thema "Formulare in Bootstrap - Beispiel..."

Heinz fragt

Hallo,
wenn ich das Beispiel des horizontalen Formulars übernehme sind Label und input nicht nebeneinander sondern untereinander; was mache ich falsch?

Antwort von BootstrapWorld.de

Hallo Heinz,

hast du dem Formular auch die Klasse "form-horizontal" gegeben?

Ich habe noch mal ein Beispiel im Snippet-Editor eingefügt:

https://www.bootstrapworld.de/snippet/horizontales-formular

Schicke mir ansonsten doch mal deinen Quellcode.

Viele Grüße

Andreas

Alex fragt

Ich brauchte ein Kontakt-Formular das es ermöglicht jpg bzw png in 5MB-Größe anzuhängen. Das Formualr ansich ist kein Problem nur das Anhängen mit der Prüfung. Könnt ihr mir da helfen? Grüße Alex

Antwort von BootstrapWorld.de

Hallo Alex,

bei Dateianhängen musst du unbedint das Attribut enctype im <form>-Tag setzen sowie als method="POST" wählen.

Beispiel:

<form enctype="multipart/form-data" action="index.php" method="POST">
Datei: <input name="myfile" type="file" />
</form>

In der index.php kannst du folgendermaßen auf die Datei zugreifen:


$myfile = $_FILES['myfile']; //Hochgeladene Datei
$size = $myfile['size']; // Größe in Byte

if($size > 5242880) {
  //Fehler: Datei über 5MByte

} else {
   //OK: Datei weiter verarbeiten

}

Die Variable $myfile ist ein assoziatives Array, das u. a. die Dateigröße in Byte enthält. Damit kannst du einfach ein if-else-Bedingung bauen und nur Dateien akzeptieren, die kleiner als 5MB sind.

Viele Grüße

Andreas

 

 

Nach oben
BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen
OK