Wissen

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Sie befinden sich hier: Start » html
Zuletzt angesehen:
html

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
html [2025-06-09 17:59:33] – [POST-Test mit versteckten Daten] manfredhtml [2025-08-05 10:35:52] (aktuell) – [HTML] david
Zeile 1: Zeile 1:
 +====== HTML ======
 +
 +Hypertext Markup Language (HTML) ist eine Auszeichnungssprache zur Strukturierung elektronischer Dokumente. HTML-Dokumente werden von Webbrowsern dargestellt und bilden die Grundlage für Webseiten. HTML ist zusammen mit [[css|CSS]] und [[javascript|JavaScript]] eine der Kernsprachen des World Wide Webs (WWW).
 +
 +  * [[https://google.github.io/styleguide/htmlcssguide.html|Google HTML/CSS Style Guide]]
 +
 +
 +====== Informationen ======
 +
 +  * **[[https://wiki.selfhtml.org/wiki/Schnell-Index/HTML]]**
 +    * [[http://wiki.selfhtml.org/wiki/HTML]]
 +      * [[http://wiki.selfhtml.org/wiki/HTML/Formulare]]
 +  * **[[https://www.html-seminar.de/einsteiger.htm]]**
 +    * [[https://www.html-seminar.de/tabellenzellen-verbinden.htm]]
 +  * **[[https://www.w3schools.com/html/]]**
 +    * [[https://www.w3schools.com/tags/]]
 +
 +
 +====== HTML 5 Template ======
 +
 +<code html index.html>
 +<!DOCTYPE html>
 +<html lang="de">
 +    <head>
 +        <meta charset="utf-8">
 +        <meta name="viewport" content="width=device-width, initial-scale=1">
 +        
 +        <title>Hello World!</title>
 +
 +        <!-- <link rel="icon" href="img/favicon.svg"> -->
 +        <!-- <link rel="stylesheet" href="css/style.css"> -->
 +        
 +        <!-- <script type="module" src="js/script.js"></script> -->
 +        <!-- <script defer nomodule src="js/script.fallback.js"></script> -->
 +    </head>
 +    <body>
 +        <p>Hello World!</p>
 +    </body>
 +</html>
 +</code>
 +
 +Dieses Template berücksichtig keine IE eigenarten, da dieser Browser nicht mehr supported wird!
 +
 +
 +====== Das wichtigste zum HTML-Dokument ======
 +
 +**[[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Neu_und_obsolet_in_HTML5|Neu und obsolet in HTML5]]**
 +
 +FIXME veraltet, muss aktualisiert werden
 +
 +Ein einfaches HTML-Dokument kann wie folgt aussehen:
 +
 +  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
 +  <HTML>
 +      <HEAD>
 +      <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">
 +      <TITLE>Hallo</TITLE>
 +      </HEAD>
 +  <body LANG="de-DE">
 +  Hallo Welt!
 +  </body>
 +  </HTML>
 +
 +[[https://wiki.selfhtml.org/wiki/HTML/Regeln/Kommentar|Kommentare]]
 +  ...
 +  <!-- einzeiliger Kommentar -->
 +  ...
 +  <!-- #
 +  und das ist ein mehrzeiliger Kommentar
 +  bla-bla-bla
 +  Letzte Zeile des Kommentars
 +  # -->
 +  ...
 +
 +Ein CGI-Script (in Bourne SHell) sollte als allererstes die Zeile
 +
 +  echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">'
 +
 +enthalten und erst dann seine eigentliche Arbeit tun!
 +Sonst bekommt man den Fehler:
 +
 +  malformed header from script. Bad header=<!DOCTYPE HTML PUBLIC "-//W3C/
 +
 +Wenn der Fehler
 +
 +  Syntax error: newline unexpected
 +
 +auftritt hat man dummerweise vor der oben erwähnten ersten Zeile eine Leerzeile
 +gesendet. Das kann z.B. auftreten wenn man die erste Zeile nicht so abschickt
 +wie oben gezeigt sondern so:
 +
 +  echo '
 +  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
 +  '
 +
 +Will man eine Weiterleitung im HTML-Dokument bewirken,
 +setzt man unter der vorhandenen META-Zeile noch eine zweite drunter,
 +die wie folgt aussehen könnte:
 +
 +  <META HTTP-EQUIV="Refresh" CONTENT="5; URL=http://www.neuer-server.de">
 +
 +
 +===== Zeichensätze und URL-Kodierung im HTML-Dokument =====
 +
 +In einzelnen Fällen (unter Verwendung anderer Betriebssysteme oder älterer Software) kann es sein, dass der //UTF-8//-Zeichensatz nicht zur Verfügung steht, dann verwendet man in der Regel //ISO-8859-15//. Zu beachten ist, dass der Zeichensatz //ISO-8859-1// der alte US-Zeichensatz ist und deshalb keine Umlaute und kein Eurosymbol enthält.
 +
 +  charset=iso-8859-15
 +
 +Um mit Umlauten in einem HTML-Dokument keine Probleme zu bekommen, sollte man die [[https://www.freeformatter.com/html-entities.html|HTML-Kodierung für Sonderzeichen]] verwenden
 +(Nicht zu verwechseln mit URI-Kodierung: [[https://www.urlencoder.io/]]):
 +^ lfd. Nr. ^ Zeichen ^ HTML-Kodierung ^ ^ Zeichen ^ HTML-Kodierung ^ ^ Zeichen ^ HTML-Kodierung  ^
 +^   1 | ¡ | &iexcl; ^ | À | &Agrave; ^ | à | &agrave;  |
 +^   2 | ¢ | &cent; ^ | Á | &Aacute; ^ | á | &aacute;  |
 +^   3 | £ | &pound; ^ | Â | &Acirc; ^ | â | &acirc;  |
 +^   4 | ¤ | &curren; ^ | Ã | &Atilde; ^ | ã | &atilde;  |
 +^   5 | ¥ | &yen; ^ | Ä | &Auml; ^ | ä | &auml;  |
 +^   6 | ¦ | &brvbar; ^ | Å | &Aring; ^ | å | &aring;  |
 +^   7 | § | &sect; ^ | Æ | &AElig; ^ | æ | &aelig;  |
 +^   8 | ¨ | &uml; ^ | Ç | &Ccedil; ^ | ç | &ccedil;  |
 +^   9 | © | &copy; ^ | È | &Egrave; ^ | è | &egrave;  |
 +^  10 | ª | &ordf; ^ | É | &Eacute; ^ | é | &eacute;  |
 +^  11 | « | &laquo; ^ | Ê | &Ecirc; ^ | ê | &ecirc;  |
 +^  12 | ¬ | &not; ^ | Ë | &Euml; ^ | ë | &euml;  |
 +^  13 | ® | &reg; ^ | Ì | &Igrave; ^ | ì | &igrave;  |
 +^  14 | ¯ | &macr; ^ | Í | &Iacute; ^ | í | &iacute;  |
 +^  15 | ° | &deg; ^ | Î | &Icirc; ^ | î | &icirc;  |
 +^  16 | ± | &plusmn; ^ | Ï | &Iuml; ^ | ï | &iuml;  |
 +^  17 | ² | &sup2; ^ | Ð | &ETH; ^ | ð | &eth;  |
 +^  18 | ³ | &sup3; ^ | Ñ | &Ntilde; ^ | ñ | &ntilde;  |
 +^  19 | ´ | &acute; ^ | Ò | &Ograve; ^ | ò | &ograve;  |
 +^  20 | µ | &micro; ^ | Ó | &Oacute; ^ | ó | &oacute;  |
 +^  21 | ¶ | &para; ^ | Ô | &Ocirc; ^ | ô | &ocirc;  |
 +^  22 | · | &middot; ^ | Õ | &Otilde; ^ | õ | &otilde;  |
 +^  23 | ¸ | &cedil; ^ | Ö | &Ouml; ^ | ö | &ouml;  |
 +^  24 | ¹ | &sup1; ^ | × | &times; ^ | ÷ | &divide;  |
 +^  25 | º | &ordm; ^ | Ø | &Oslash; ^ | ø | &oslash;  |
 +^  26 | » | &raquo; ^ | Ù | &Ugrave; ^ | ù | &ugrave;  |
 +^  27 | ¼ | &frac14; ^ | Ú | &Uacute; ^ | ú | &uacute;  |
 +^  28 | ½ | &frac12; ^ | Û | &Ucirc; ^ | û | &ucirc;  |
 +^  29 | ¾ | &frac34; ^ | Ü | &Uuml; ^ | ü | &uuml;  |
 +^  30 | ¿ | &iquest; ^ | Ý | &Yacute; ^ | ý | &yacute;  |
 +^  31 | | ^ | Þ | &THORN; ^ | þ | &thorn;  |
 +^  32 | | ^ | ß | &szlig; ^ | ÿ | &yuml;  |
 +
 +
 +==== URL-Encode auf der CLI ====
 +
 +Für die Nicht-Linux-Gemeinde (z.B.: FreeBSD) gibt hier ein wunderschönes Rust-Programm, mit dem sich auf der CLI die meisten Zeichen in HTML-Kode umwandeln lassen.
 +
 +**[[https://github.com/dead10ck/urlencode|dead10ck/urlencode]]**
 +
 +  [root@webserver ~]# cd /usr/ports/lang/rust/
 +  [root@erde /usr/ports/lang/rust]# make clean
 +  [root@erde /usr/ports/lang/rust]# make
 +  [root@erde /usr/ports/lang/rust]# make install
 +  [root@erde /usr/ports/lang/rust]# make clean
 +  
 +  > cargo install urlencode
 +  > ls -lha /benutzer/.cargo/bin/
 +  > cp /benutzer/.cargo/bin/urlencode /usr/local/bin/
 +  
 +  > echo Test\'s\ 1/Best\'s\ of\ \"Cap\".mp4 | urlencode
 +  Test's%201%2FBest's%20of%20%22Cap%22.mp4
 +  
 +  > echo Test\'s\ 1/Best\'s\ of\ \"Cap\".mp4 | urlencode | sed "s/[']/%27/g")"
 +  Test%27s%201%2FBest%27s%20of%20%22Cap%22.mp4
 +
 +
 +===== Weiterleitung im HTML-Dokument =====
 +
 +  <!doctype html>
 +  
 +  <html>
 +  <head>
 +        <title>www.quelle.de</title>
 +        <meta charset=utf-8">
 +        <meta http-equiv="cache-control" content="no-cache">
 +        <meta http-equiv="refresh" content="0;url=http://www.ziel.de/page/">
 +        <meta name="identifier-url" content="http://www.ziel.de/page/">
 +        <meta name="language" content="deutsch">
 +  </head>
 +  
 +  <body bgcolor=white>
 +  
 +  <div align=center>
 +  <font face="arial, helvetica">
 +  Weiterleitung von "www.quelle.de" auf "www.ziel.de/page/"
 +  </font>
 +  <br><br>
 +  <font size=-1>
 +  dies ist nur eine Weiterleitung!
 +  </font>
 +  </div>
 +  
 +  </body>
 +  </html>
 +
 +
 +===== Beispiel-Formular =====
 +
 +  > vi /usr/lib/cgi-bin/webtest.cgi
 +<file>
 +#!/bin/bash
 +
 +#==============================================================================#
 +### Variablen
 +
 +VERSION="v2013090500"
 +
 +ZEICHENSATZ="UTF-8"
 +#ZEICHENSATZ="ISO-8859-15"
 +
 +HINTERGRUNDFARBE="#E0E0FF"
 +GRAU="#222222"
 +ROT="#EE0000"
 +
 +STARTZEIT="$(date +'%F %T')"
 +
 +#------------------------------------------------------------------------------#
 +### Beispiele für wichtige Umgebungsvariablen
 +#
 +# HTTP_HOST=192.168.0.10
 +# SCRIPT_FILENAME=/usr/lib/cgi-bin/webtest.cgi
 +# REQUEST_URI=/cgi-bin/webtest.cgi?GET-VARIABLE=Wert01
 +# SCRIPT_NAME=/cgi-bin/webtest.cgi
 +# HTTP_REFERER=http://192.168.0.10/cgi-bin/webtest.cgi
 +# REMOTE_ADDR=192.168.0.10
 +# SERVER_NAME=192.168.0.10
 +# CONTENT_LENGTH=22
 +# QUERY_STRING=GET-VARIABLE=Wert01
 +# SERVER_ADDR=192.168.0.10
 +#
 +#==============================================================================#
 +### Kopf / ANFANG
 +
 +echo "Content-Type: text/html; charset=${ZEICHENSATZ}
 +
 +<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'
 +   'http://www.w3.org/TR/html4/loose.dtd'>
 +<html>
 +  <head>
 +    <meta http-equiv='Content-Type' content='text/html; charset=${ZEICHENSATZ}' />
 +  <title>
 +    HTML-Testseite Version ${VERSION}
 +  </title>
 +    <meta name='date' content='${STARTZEIT}' />
 +    <meta name='keywords' content='webtest' />
 +  </head>
 +  <body bgcolor='${HINTERGRUNDFARBE}'>
 +"
 +
 +#==============================================================================#
 +### Datenstrom aus dem POST-Kanal in eine Variable schreiben
 +
 +POSTDATEN=$(cat | tr -d '\r')
 +
 +#==============================================================================#
 +### SEITENINHALT
 +
 +if [ -z "${POSTDATEN}" ] ; then
 +### wenn keine Daten per POST gekommen sind, dann wird dieser Teil angezeigt
 +
 +  if [ -z "${QUERY_STRING}" ] ; then
 +  echo "
 +    <h1><U>unterstrichene &Uuml;berschrift</U></h1>
 +
 +    <pre>
 +      Diese Text wird in Courier mit allen normalen Zeilenumbr&uuml;chen
 +      und allen Leerzeichen angezeigt.
 +    </pre>
 +
 +    <B>Diese Zeile ist FETT gedruckt.</B>
 +
 +    <hr>
 +
 +    <form method=post enctype=text/plain action='${SCRIPT_NAME}'>
 +      <p>
 +        <input type='checkbox' name='POST-VARIABLE' value='Wert01'>
 +          <a href='http://${SERVER_NAME}${SCRIPT_NAME}?GET-VARIABLE=Wert01'>
 +            <font color='${GRAU}'>
 +              Wert01
 +            </font>
 +          </a>
 +        <br>
 +        <input type='checkbox' name='POST-VARIABLE' value='Wert02' checked>
 +          <a href='http://${SERVER_NAME}${SCRIPT_NAME}?GET-VARIABLE=Wert02'>
 +            <font color='${ROT}'>
 +              Wert02
 +            </font>
 +          </a>
 +        <br>
 +      </p>
 +      <input type=submit value= Absenden >
 +    </form>
 +    "
 +
 +  else
 +  ### wenn keine Daten per POST gekommen sind, dann wird dieser Teil angezeigt
 +    echo "
 +      <hr>
 +        <a href='http://${SERVER_NAME}${SCRIPT_NAME}'>
 +          http://${SERVER_NAME}${SCRIPT_NAME}
 +        </a>
 +      <hr>
 +      <h1>&uuml;bertragene Daten per GET</h1>
 +      <pre>
 +${QUERY_STRING}
 +      </pre>
 +    "
 +  fi
 +
 +#------------------------------------------------------------------------------#
 +else
 +### wenn  Daten per POST gekommen sind, dann werden hier die POST-Daten angezeigt
 +
 +  echo "
 +    <hr>
 +      <a href='http://${SERVER_NAME}${SCRIPT_NAME}'>
 +        http://${SERVER_NAME}${SCRIPT_NAME}
 +      </a>
 +    <hr>
 +    <h1>&uuml;bertragene Daten per POST</h1>
 +    <pre>
 +${POSTDATEN}
 +    </pre>
 +  "
 +
 +fi
 +
 +#==============================================================================#
 +### Fuss / ENDE
 +
 +echo "
 +  </body>
 +</html>
 +"
 +
 +#==============================================================================#
 +</file>
 +
 +HTML-Code beim ersten Aufruf (ohne POST-Daten):
 +<file>
 +<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'
 +   'http://www.w3.org/TR/html4/loose.dtd'>
 +<html>
 +  <head>
 +    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
 +  <title>
 +    HTML-Testseite Version v2013090500
 +  </title>
 +    <meta name='date' content='2013-09-05 14:03:27' />
 +    <meta name='keywords' content='webtest' />
 +  </head>
 +  <body bgcolor='#E0E0FF'>
 +
 +
 +    <h1><U>unterstrichene &Uuml;berschrift</U></h1>
 +
 +    <pre>
 +      Diese Text wird in Courier mit allen normalen Zeilenumbr&uuml;chen
 +      und allen Leerzeichen angezeigt.
 +    </pre>
 +
 +    <B>Diese Zeile ist FETT gedruckt.</B>
 +
 +    <hr>
 +
 +    <form method=post enctype=text/plain action='/cgi-bin/webtest.cgi'>
 +      <p>
 +        <input type='checkbox' name='POST-VARIABLE' value='Wert01'>
 +          <a href='http://192.168.0.10/cgi-bin/webtest.cgi?GET-VARIABLE=Wert01'>
 +            <font color='#222222'>
 +              Wert01
 +            </font>
 +          </a>
 +        <br>
 +        <input type='checkbox' name='POST-VARIABLE' value='Wert02' checked>
 +          <a href='http://192.168.0.10/cgi-bin/webtest.cgi?GET-VARIABLE=Wert02'>
 +            <font color='#EE0000'>
 +              Wert02
 +            </font>
 +          </a>
 +        <br>
 +      </p>
 +      <input type=submit value= Absenden >
 +    </form>
 +    
 +
 +  </body>
 +</html>
 +</file>
 +
 +
 +HTML-Code nach dem der Knopf "Absenden" gedrückt wurde (mit POST-Daten):
 +<file>
 +<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'
 +   'http://www.w3.org/TR/html4/loose.dtd'>
 +<html>
 +  <head>
 +    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
 +  <title>
 +    HTML-Testseite Version v2013090500
 +  </title>
 +    <meta name='date' content='2013-09-05 14:05:27' />
 +    <meta name='keywords' content='webtest' />
 +  </head>
 +  <body bgcolor='#E0E0FF'>
 +
 +
 +    <hr>
 +      <a href='http://192.168.0.10/cgi-bin/webtest.cgi'>
 +        http://192.168.0.10/cgi-bin/webtest.cgi
 +      </a>
 +    <hr>
 +    <h1>&uuml;bertragene Daten per POST</h1>
 +    <pre>
 +POST-VARIABLE=Wert02
 +    </pre>
 +  
 +
 +  </body>
 +</html>
 +</file>
 +
 +
 +HTML-Code nach dem der Link "Wert01" gedrückt wurde (mit GET-Daten):
 +<file>
 +<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'
 +   'http://www.w3.org/TR/html4/loose.dtd'>
 +<html>
 +  <head>
 +    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
 +  <title>
 +    HTML-Testseite Version v2013090500
 +  </title>
 +    <meta name='date' content='2013-09-05 14:07:06' />
 +    <meta name='keywords' content='webtest' />
 +  </head>
 +  <body bgcolor='#E0E0FF'>
 +
 +
 +      <hr>
 +        <a href='http://192.168.0.10/cgi-bin/webtest.cgi'>
 +          http://192.168.0.10/cgi-bin/webtest.cgi
 +        </a>
 +      <hr>
 +      <h1>&uuml;bertragene Daten per GET</h1>
 +      <pre>
 +GET-VARIABLE=Wert01
 +      </pre>
 +    
 +
 +  </body>
 +</html>
 +</file>
 +
 +
 +===== Beispiel-Tabelle =====
 +
 +Der Kode wurde hauptsächlich in //HTML Version 4// mit ein paar CSS-Elementen verfasst.
 +
 +<file HTML>
 +<!DOCTYPE html>
 +<html lang="de-DE">
 + <head>
 + <meta charset="UTF-8">
 + <style type="text/css">
 + </style>
 + <title> Klausur </title>
 + </head>
 + <body>
 + <h1> Klausur </h1>
 + <h2> Informatik </h2>
 + <h3> E-Phase </h3>
 + <h4> Raum 033 </h4>
 + <h5> Freitag </h5>
 + <h6> 7. - 8. Stunde </h6>
 + <p> Frau Lehrerin </p>
 + <br>
 + <br>
 + <table border="3" width="100%" height="300px" cellpadding="3" style="color: black">
 + <tr>
 + <th> links </th>
 + <th> mitte </th>
 + <th> rechts </th>
 + </tr>
 + <tr>
 + <td valign="top" align="left"> links-oben </td>
 + <td valign="top" align="center"> zentriert-oben </td>
 + <td valign="top" align="right"> rechts-oben </td>
 + </tr>
 + <tr>
 + <td valign="middle" align="left"> links-mitte </td>
 + <td valign="middle" align="center"> zentriert-mitte </td>
 + <td valign="middle" align="right"> rechts-mitte </td>
 + </tr>
 + <tr>
 + <td valign="bottom" align="left"> links-unten </td>
 + <td valign="bottom" align="center"> zentriert-unten </td>
 + <td valign="bottom" align="right"> rechts-unten </td>
 + </tr>
 + </table>
 + </body>
 +</html>
 +</file>
 +
 +
 +====== Knöpfe und Schalte im HTML-Dokument ======
 +
 +  * [[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen|Radio-Buttons und Checkboxen]]
 +  * [[https://www.w3schools.com/tags/tag_input.asp|HTML <input> Tag]]
 +  * [[https://www.edv-lehrgang.de/kontrollkaestchen-checkbox-in-html/|Kontrollkästchen (Checkboxen) in HTML-Formularen]]
 +
 +FIXME
 +
 +<code html index.html>
 +<!DOCTYPE html>
 +<html lang="de">
 +    <head>
 +        <meta charset="utf-8">
 +        <meta name="viewport" content="width=device-width, initial-scale=1">
 +        
 +        <title>Hello World!</title>
 +
 +        <!-- <link rel="icon" href="img/favicon.svg"> -->
 +        <!-- <link rel="stylesheet" href="css/styles.css"> -->
 +        
 +        <!-- <script type="module" src="js/script.js"></script> -->
 +        <!-- <script defer nomodule src="js/script.fallback.js"></script> -->
 +    </head>
 +    <body>
 +        <p>Hello World!</p>
 +        <input type="radio" name="Test 0" value="Null" id="id1" checked>      <label for="id1">Radio 1</label> <br>
 +        <input type="radio" name="Test 1" value="Eins" id="id2">              <label for="id2">Radio 2</label> <br>
 +        <input type="checkbox" name="Test 2" value="Zwei" id="id3" autofocus> <label for="id3">Check 1</label> <br>
 +        <input type="checkbox" name="Test 3" value="Drei" id="id4" required>  <label for="id4">Check 2</label> <br>
 +        <input type="checkbox" name="Test 4" value="Drei" id="id5" checked>   <label for="id5">Check 3</label> <br>
 +    </body>
 +</html>
 +</code>
 +
 +  * siehe auch:
 +    * [[https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC|]]
 +    * [[https://www.edv-lehrgang.de/auswahlmenue-dropdownliste-in-html/|Auswahlmenü (Dropdown-Liste) in HTML-Formularen]]
 +
 +
 +====== GET- und POST-Test in einer Tabelle ======
 +
 +<code html cgi-bin/test.cgi>
 +#!/usr/bin/env bash
 +
 +#==============================================================================#
 +# Hiermit kann man Datenübertraun per GET und per POST testen.
 +#==============================================================================#
 +
 +#------------------------------------------------------------------------------#
 +# in FreeBSD:
 +# chown www:www cgi-bin/test.cgi ; chmod 0770 cgi-bin/test.cgi
 +#------------------------------------------------------------------------------#
 +
 +BS="$(uname -s)"
 +if [ "${BS}" = FreeBSD ] ; then
 + UMDREHEN="tail -r"
 +elif [ "${BS}" = Linux ] ; then
 + UMDREHEN="tac"
 +fi
 +
 +### damit awk ein einheitliches Dezimalzeichen verwendet
 +LANG="C.UTF-8"
 +LC_NUMERIC="de_DE.UTF-8"
 +KOMMAzuPUNKT="tr -s ',' '.'"
 +AWK='awk'
 +STARTZEIT="$(date +'%FT%T')"
 +BASE64ZEICHEN='+/0123456789=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
 +
 +#==============================================================================#
 +
 +POSTDATEN=$(cat | tr -d '\r')
 +
 +echo "Content-Type: text/html; charset=utf-8
 +
 +<!DOCTYPE html>
 +<html lang='de'>
 + <head>
 + <meta charset='utf-8'>
 + <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 + <meta name='date' content='${STARTZEIT}' />
 + <title>Test</title>
 + <!--
 + <link rel='stylesheet' href='style.css'>
 + -->
 + <style>
 + body  { background-color: #E0E0FF; }
 + tbody  { background-color: #999999; }
 +
 + tr.rot { background-color: #F08080; }
 + tr.gelb { background-color: #F0F080; }
 + tr.gruen { background-color: #80F080; }
 + tr.blau { background-color: #8080F0; }
 +
 + tr.dunkelblau { background-color: #BBBBBB; }
 + tr.hellblau { background-color: #CCCCFF; }
 +
 + tr:hover {background-color: #AAAAFF;}
 + </style>
 +</head>
 +<body>
 +<H1>
 +<a href='/cgi-bin/test.cgi' title='Test' rel='nofollow'>GET- und POST-Test in einer Tabelle</a>
 +</H1>
 +<table>
 +  <thead>
 + <tr class='dunkelblau'>
 + <th> HTTP_REFERER </th>
 + <th> ${HTTP_REFERER} </th>
 +    </tr>
 + <tr class='dunkelblau'>
 + <th> REQUEST_URI </th>
 + <th> ${REQUEST_URI} </th>
 +    </tr>
 + <tr class='dunkelblau'>
 + <th> QUERY_STRING </th>
 + <th> ${QUERY_STRING} </th>
 +    </tr>
 + <tr class='dunkelblau'>
 + <th> POSTDATEN </th>
 + <th> ${POSTDATEN} </th>
 +    </tr>
 +  </thead>
 +  <tbody>
 + <tr class='dunkelblau'>
 + <td valign='middle' align='center' colspan='2'>
 + <form method=get enctype=text/plain action='/cgi-bin/test.cgi'>
 + <input type='submit' name='get-test' value='GET:${BASE64ZEICHEN}' autofocus>
 + </form>
 + </td>
 + </tr>
 + <tr class='dunkelblau'>
 + <td valign='middle' align='center' colspan='2'>
 + <form method=post enctype=text/plain action='/cgi-bin/test.cgi'>
 + <input type='submit' name='post-test' value='POST:${BASE64ZEICHEN}'>
 + </form>
 + </td>
 + </tr>
 +  </tbody>
 +</table>
 +</html>
 +"
 +
 +#==============================================================================#
 +</code>
 +
 +{{ :bilder:1_-_get-_und_post-test_in_einer_tabelle.png?399 |frisch nach dem Start oder wenn man auf die Überschrift "GET- und POST-Test in einer Tabelle" gedrückt hat}}
 +{{ :bilder:2_-_get-_und_post-test_in_einer_tabelle.png?768 |GET: auf den oberen Knopf gedrückt}}
 +{{ :bilder:3_-_get-_und_post-test_in_einer_tabelle.png?618 |POST: auf den unteren Knopf gedrückt}}
 +
 +//Nur bei der Übertragungsmethode "POST" werden keine Zeichen ("''+''", "''/''", "''=''") ins HTML-Format konvertiert! Da diese Zeichen aber Teil des Base64-Zeichensatzes sind, wird deutlich, dass man per GET keinen Base64-Code übertragen kann!//
 +
 +
 +===== POST-Test mit versteckten Daten =====
 +
 +//Mit dem untersten Knopf werden versteckte POST-Daten übertragen. In dem oberen Beispiel sind die POST-Daten als Knopfbeschriftung zu sehen, was bei einer größeren Datenmenge unschön ist.//
 +
 +<code html cgi-bin/test-post.cgi>
 +#!/usr/bin/env bash
 +
 +#==============================================================================#
 +# Hiermit kann man Datenübertraun per POST testen.
 +#==============================================================================#
 +# +/0123456789=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
 +#------------------------------------------------------------------------------#
 +# chown www:www /home/http/cgi-bin/test-post.cgi ; chmod 0770 /home/http/cgi-bin/test-post.cgi
 +#------------------------------------------------------------------------------#
 +
 +BS="$(uname -s)"
 +if [ "${BS}" = FreeBSD ] ; then
 + UMDREHEN="tail -r"
 +elif [ "${BS}" = Linux ] ; then
 + UMDREHEN="tac"
 +fi
 +
 +### damit awk ein einheitliches Dezimalzeichen verwendet
 +LANG="C.UTF-8"
 +LC_NUMERIC="de_DE.UTF-8"
 +KOMMAzuPUNKT="tr -s ',' '.'"
 +AWK='awk'
 +STARTZEIT="$(date +'%FT%T')"
 +BASE64ZEICHEN='+/0123456789=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
 +
 +#==============================================================================#
 +
 +POSTDATEN=$(cat | tr -d '\r')
 +
 +echo "Content-Type: text/html; charset=utf-8
 +
 +<!DOCTYPE html>
 +<html lang='de'>
 + <head>
 + <meta charset='utf-8'>
 + <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 + <meta name='date' content='${STARTZEIT}' />
 + <title>Test</title>
 + <!--
 + <link rel='stylesheet' href='style.css'>
 + -->
 + <style>
 + body  { background-color: #E0E0FF; }
 + tbody  { background-color: #999999; }
 +
 + tr.rot { background-color: #F08080; }
 + tr.gelb { background-color: #F0F080; }
 + tr.gruen { background-color: #80F080; }
 + tr.blau { background-color: #8080F0; }
 +
 + tr.dunkelblau { background-color: #BBBBBB; }
 + tr.hellblau { background-color: #CCCCFF; }
 +
 + tr:hover {background-color: #AAAAFF;}
 + </style>
 +</head>
 +<body>
 +<H1>
 +<a href='/cgi-bin/test-post.cgi' title='Test' rel='nofollow'>POST-Test mit versteckten Daten</a>
 +</H1>
 +<table>
 +  <thead>
 + <tr class='dunkelblau'>
 + <th>POSTDATEN (Std)</th>
 + <th>${POSTDATEN}</th>
 +    </tr>
 + <tr class='dunkelblau'>
 + <th>POSTDATEN (pre)</th>
 + <th><pre>${POSTDATEN}</pre></th>
 +    </tr>
 +  </thead>
 +  <tbody>
 + <tr class='dunkelblau'>
 + <td valign='middle' align='center' colspan='2'>
 + <form method=post enctype=text/plain action='/cgi-bin/test-post.cgi'>
 + <input type='hidden' name='schlüssel 1' value='1. POST, mit Zeilenumbruch:
 + ${BASE64ZEICHEN}'>
 + <input type='submit' name='submit' value='Hidden+Submit' autofocus>
 + </form>
 + </td>
 + </tr>
 + <tr class='dunkelblau'>
 + <td valign='middle' align='center' colspan='2'>
 + <form method=post enctype=text/plain action='/cgi-bin/test-post.cgi'>
 + <input type='hidden' name='schlüssel 2' value='2. POST: Hidden 1'>
 + <input type='hidden' name='schlüssel 3' value='3. POST: Hidden 2'>
 + <input type='hidden' name='schlüssel 4' value='4. POST, mit Zeilenumbruch:
 + Hidden 3'>
 + <input type='submit' name='submit' value='Multihidden+Submit' autofocus>
 + </form>
 + </td>
 + </tr>
 +  </tbody>
 +</table>
 +</html>
 +"
 +
 +#==============================================================================#
 +</code>
 +
 +{{ :bilder:1_-_post-test_mit_versteckten_daten.png?366 |Die POST-Daten sind nicht zu sehen...}}
 +{{ :bilder:2_-_post-test_mit_versteckten_daten.png?902 |...und doch werden hier POST-Daten übertragen, die vorher nicht sichtbar waren.}}
 +{{ :bilder:3_-_post-test_mit_versteckten_daten.png?863 |Wenn es mehrere Input-Hidden-Sektionen gibt, dann werden die Schlüssel-Wert-Paare von allen übertragen.}}
 +
 +
 +==== Hinweise zu POST ====
 +
 +<code html kann keine Zeilenumbrüche>
 +<input type="text">
 +</code>
 +
 +<code html kann Zeilenumbrüche>
 +<textarea></textarea>
 +<input type="hidden">
 +<input type="submit">
 +</code>
 +