Anzeige von Geburtsdatum oder Alter
Möchten Sie die Anzeige von Geburtsdatum oder Alter unterbinden?
Wählen Sie eine Darstellungsart aus
Name und Anschrift

Quelltext dieser Webseite

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Checkbox zum de/aktivieren von anderen Elementen</title>
  5.        
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.         <meta http-equiv="expires" content="0">
  8.        
  9.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  10.         <script type="text/javascript">
  11.             $(document).ready(function(){
  12.                 $('#geb')[0].onclick = function(){
  13.                     $('input[name=gebradio]').each(
  14.                         function(key, radio){
  15.                             radio.disabled = $('#geb').attr('checked');
  16.                             if($('#geb').attr('checked')){
  17.                                 radio.checked = false;
  18.                             }
  19.                         }
  20.                     );
  21.                     $('#auswahl')[0].style.color = ($('#geb').attr('checked')) ? 'gray' : 'black';
  22.                 }
  23.             });
  24.         </script>
  25.  
  26.         <style type="text/css">
  27.             body{
  28.                 font-family: verdana, georgia, arial, sans-serif;
  29.             }
  30.             .sourcecode {
  31.                 border:1px solid #c0c0c0;
  32.                 background-color:#f8f8f8;
  33.                 margin:10px 5px;
  34.                 padding:10px;
  35.             }
  36.  
  37.             dl {
  38.                 padding:0;
  39.                 margin:0;
  40.                 margin-bottom:1em
  41.             }
  42.             dt {
  43.                 margin:0;
  44.                 padding:0;
  45.                 margin-left:120px;
  46.                 font-weight:bold;
  47.             }
  48.             dd {
  49.                 padding:0;
  50.                 margin:0;
  51.             }
  52.  
  53.             form {
  54.                 width:50%;
  55.                 margin:0 auto;
  56.                 padding:1em 1.5em;
  57.                 background:#ffe8c0;
  58.                 border:4px solid #f0a080;
  59.                 border-radius:15px;
  60.                 -webkit-border-radius:15px;
  61.                 -moz-border-radius:15px;
  62.                 -khtml-border-radius:15px;
  63.                 behavior:url('css/border-radius.htc'); /* Dem Internet Explodierer muss man erst einmal Benehmen beibringen, wenns um runde Ecken geht */
  64.             }
  65.  
  66.             form fieldset {
  67.                 margin-bottom:1em;
  68.                 background:#d8f0ff;
  69.                 border:4px solid #80a0f0;
  70.                 border-radius:15px;
  71.                 -webkit-border-radius:15px;
  72.                 -moz-border-radius:15px;
  73.                 -khtml-border-radius:15px;
  74.                 behavior:url('css/border-radius.htc'); /* Dem Internet Explodierer muss man erst einmal Benehmen beibringen, wenns um runde Ecken geht */
  75.             }
  76.             form fieldset legend {
  77.                 height:1.3em;
  78.                 font-size:1.1em;
  79.                 font-weight:bold;
  80.                 margin:1em 0 1em 1em;
  81.                 padding:0 .5em;
  82.                 background:#c0e0ff;
  83.                 border:4px solid #80a0f0;
  84.                 border-radius:15px;
  85.                 -webkit-border-radius:15px;
  86.                 -moz-border-radius:15px;
  87.                 -khtml-border-radius:15px;
  88.                 behavior:url('css/border-radius.htc'); /* Dem Internet Explodierer muss man erst einmal Benehmen beibringen, wenns um runde Ecken geht */
  89.             }
  90.  
  91.             #geb:checked+label {
  92.                 color:#f00000;
  93.             }
  94.  
  95.             label.textlabel {
  96.                 float:left;
  97.                 width:120px; /* das gleiche Maß wird auch für margin-left bei dt, input[type="radio"] und input[type="checkbox"] verwendet */
  98.                 text-align:right;
  99.                 padding-top:3px;  /* Damit es hübscher aussieht*/
  100.             }
  101.  
  102.             input[type="radio"], input[type="checkbox"] {
  103.                 margin-left:120px;
  104.             }
  105.  
  106.             input[type="text"], input[type="password"] {
  107.                 margin-bottom: 4px;
  108.             }
  109.             input[type="submit"] {
  110.                 cursor:pointer;
  111.                 font-weight:bold;
  112.                 background:#f0e8c0;
  113.                 border:4px solid #e0c880;
  114.                 border-radius:15px;
  115.                 -webkit-border-radius:15px;
  116.                 -moz-border-radius:15px;
  117.                 -khtml-border-radius:15px;
  118.                 behavior:url('css/border-radius.htc'); /* Dem Internet Explodierer muss man erst einmal Benehmen beibringen, wenns um runde Ecken geht */
  119.             }
  120.         </style>
  121.     </head>
  122.     <body>
  123.         <form id="gebdat" action="#" method="post">
  124.             <fieldset>
  125.                 <legend>Anzeige von Geburtsdatum oder Alter</legend>
  126.                 <dl>
  127.                     <dt>Möchten Sie die Anzeige von Geburtsdatum oder Alter unterbinden?</dt>
  128.                     <dd><input type="checkbox" name="geb" id="geb"><label for="geb">Alter oder Geburtsdatum nicht anzeigen</label></dd>
  129.                 </dl>
  130.                 <dl id="auswahl">
  131.                     <dt>Wählen Sie eine Darstellungsart aus</dt>
  132.                     <dd><input type="radio" name="gebradio" id="geb1" value="1"><label for="geb1">Alter</label></dd>
  133.                     <dd><input type="radio" name="gebradio" id="geb2" value="2"><label for="geb2">Tag, Monat</label></dd>
  134.                     <dd><input type="radio" name="gebradio" id="geb3" value="3"><label for="geb3">Tag, Monat, Jahr</label></dd>
  135.                 </dl>
  136.                 <dl>
  137.                     <dt>Name und Anschrift</dt>
  138.                     <dd><label class="textlabel" for="vorname">Vorname:</label><input type="text" name="vorname" id="vorname"></dd>
  139.                     <dd><label class="textlabel" for="nachname">Nachname:</label><input type="text" name="nachname" id="nachname"></dd>
  140.                 </dl>
  141.             </fieldset>
  142.             <dl>
  143.                 <dt></dt>
  144.                 <dd><input type="submit" name="gebdatsubmit" value="Absenden"></dd>
  145.             </dl>
  146.            
  147.         </form>
  148.  
  149.         <div class="sourcecode">
  150.             <h2>Quelltext dieser Webseite</h2>
  151.  
  152. <?php
  153. require_once('Ixiter_Geshi.php');
  154. echo IxiterGeshi_parseCode(file_get_contents(__FILE__));
  155. /*
  156. $src = file_get_contents(__FILE__);
  157. $lang = 'website-ish';
  158. $geshi = new Ixiter_Geshi($src, $lang);
  159. $geshi->keyword_links = false;
  160.  
  161. echo $geshi->parse_code();
  162.  *
  163.  */
  164. ?>
  165.  
  166.         </div>
  167. <?php include('./piwik.php') ?>
  168.     </body>
  169.  </html>
  170.  
(Sourcecode highlighting by Ixiters Hilighter)