HTML: Unterschied zwischen den Versionen
| (18 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
== Checkbox == | == Checkbox == | ||
=== Senden des HTML Formulars === | |||
==== Aktive Checkbox ==== | |||
Der Wert einer Checkbox wird nur dann abgesendet, wenn sie aktiviert ist. | |||
# Beispiel | |||
<input type="checkbox" name="checkboxtest"> | |||
<tt>$_POST["checkboxtest"]</tt> existiert nur dann, wenn die Checkbox vor dem Absenden angeklickt wurde. | |||
Wenn das HTML-Attribut <tt>value</tt> nicht vorhanden ist, dann wird per POST der Defaultwert "on" gesendet. | Wenn das HTML-Attribut <tt>value</tt> nicht vorhanden ist, dann wird per POST der Defaultwert "on" gesendet. | ||
<input type="checkbox" name="bezahlt"> | |||
Nach dem Senden des Formulars hat $_POST["bezahlt"] den Wert "on", wenn die Checkbox angeklickt wurde. | |||
==== Nicht aktive Checkbox ==== | |||
Mit einem versteckten input-Element kann man erreichen, dass der Wert auch dann gesendet wird, wenn die Checkbox nicht angeklickt ist. | |||
<input type="hidden" name="checkboxtest" value="0"> | |||
<input type="checkbox" name="checkboxtest" value="1"> | |||
Die zwei Input Elemente haben das gleiche Attribut <tt>name</tt>. | |||
Bei nicht aktiver Checkbox wird nur das versteckte Element abgesendet. <tt>$_POST["checkboxtest"]</tt> enthält entweder den Wert "0" oder "1". | |||
== Event Handler == | |||
<tt>stopPropagation()</tt> verhindert, dass ein EvenHandler des Containers aufgerufen wird, falls ein solcher definiert ist. | |||
In einem Inline-Eventhandler immer <tt>event.stopPropagation()</tt> verwenden, nicht nur <tt>stopPropagation()</tt>. | |||
< | <p onclick="event.stopPropagation(); window.open('http://localhost');"> Klick mich </p> | ||
== Sonderzeichen == | == Sonderzeichen == | ||
| Zeile 16: | Zeile 33: | ||
✓ | ✓ | ||
Siehe https://www.vioma.de/de/wiki/tools/html-sonderzeichen | Siehe https://www.vioma.de/de/wiki/tools/html-sonderzeichen | ||
Font Awesome | === Font Awesome === | ||
Auf folgender Seite ist eine Einführung in Font Awesome. Außerdem eine Liste der verfügbaren Symbole. | |||
https://www.w3schools.com/icons/fontawesome5_intro.asp | |||
Ich habe Font Awesome Version 5 heruntergeladen von https://fontawesome.com/v5/download und in folgendem Verzeichnis entpackt | |||
/srv/www/extension/fontawesome | |||
und mit folgendem Code im HEAD der Website eingebunden. | |||
<link rel="stylesheet" type="text/css" href="extension/fontawesome/css/all.css"> </link> | |||
Nun kann man ein Symbol in HTML einfügen | |||
<nowiki><i class="far fa-save fa-2x"></nowiki> | |||
<tt>far</tt> bedeutet, dass das Icon aus der Gruppe <tt>regular</tt> ist. <tt>fa-2x</tt> gibt die Größe an. | |||
== HTML 5 Formular Validation == | |||
In HTML 5 gibt es spezielle input Typen, die eine clientseitige Validierung im Browser ermöglichen. | |||
: https://www.sitepoint.com/html5-form-validation/ | |||
Diese automatische Validierung erfolgt nur dann, wenn das Formular über einen <tt>Submit Button</tt> abgeschickt wird. Sendet man das Formular per Javascript <tt>submit()</tt>, dann wird die Validierung nicht ausgelöst. | |||
: Siehe [https://stackoverflow.com https://stackoverflow.com/questions/16707743/html5-validation-when-the-input-type-is-not-submit] | |||
Aktuelle Version vom 15. Juli 2025, 10:02 Uhr
Checkbox
Senden des HTML Formulars
Aktive Checkbox
Der Wert einer Checkbox wird nur dann abgesendet, wenn sie aktiviert ist.
# Beispiel <input type="checkbox" name="checkboxtest">
$_POST["checkboxtest"] existiert nur dann, wenn die Checkbox vor dem Absenden angeklickt wurde.
Wenn das HTML-Attribut value nicht vorhanden ist, dann wird per POST der Defaultwert "on" gesendet.
<input type="checkbox" name="bezahlt">
Nach dem Senden des Formulars hat $_POST["bezahlt"] den Wert "on", wenn die Checkbox angeklickt wurde.
Nicht aktive Checkbox
Mit einem versteckten input-Element kann man erreichen, dass der Wert auch dann gesendet wird, wenn die Checkbox nicht angeklickt ist.
<input type="hidden" name="checkboxtest" value="0"> <input type="checkbox" name="checkboxtest" value="1">
Die zwei Input Elemente haben das gleiche Attribut name.
Bei nicht aktiver Checkbox wird nur das versteckte Element abgesendet. $_POST["checkboxtest"] enthält entweder den Wert "0" oder "1".
Event Handler
stopPropagation() verhindert, dass ein EvenHandler des Containers aufgerufen wird, falls ein solcher definiert ist.
In einem Inline-Eventhandler immer event.stopPropagation() verwenden, nicht nur stopPropagation().
Klick mich
Sonderzeichen
HTML Entities oder UNICODE
Sonderzeichen können zum Teil als HTML Entity eingegeben werden oder als UNICODE.
Pfeil nach rechts als HTML entity →
Häkchen als UNICODE ✓
Siehe https://www.vioma.de/de/wiki/tools/html-sonderzeichen
Font Awesome
Auf folgender Seite ist eine Einführung in Font Awesome. Außerdem eine Liste der verfügbaren Symbole.
https://www.w3schools.com/icons/fontawesome5_intro.asp
Ich habe Font Awesome Version 5 heruntergeladen von https://fontawesome.com/v5/download und in folgendem Verzeichnis entpackt
/srv/www/extension/fontawesome
und mit folgendem Code im HEAD der Website eingebunden.
<link rel="stylesheet" type="text/css" href="extension/fontawesome/css/all.css"> </link>
Nun kann man ein Symbol in HTML einfügen
<i class="far fa-save fa-2x">
far bedeutet, dass das Icon aus der Gruppe regular ist. fa-2x gibt die Größe an.
HTML 5 Formular Validation
In HTML 5 gibt es spezielle input Typen, die eine clientseitige Validierung im Browser ermöglichen.
Diese automatische Validierung erfolgt nur dann, wenn das Formular über einen Submit Button abgeschickt wird. Sendet man das Formular per Javascript submit(), dann wird die Validierung nicht ausgelöst.