===== Formmutator =====

Der Formmutator bietet die Möglichkeit bestimmte Bereiche innerhalb einer Smartform (Tabs) per Onclick ein- bzw auszublenden. Dies ist sowohl mittels Radiobuttons als auch mit Checkboxen umsetzbar,

{{:software:tim:smartform:sf_form_mutator_1.png?200 |}}{{:software:tim:smartform:sf_form_mutator_2.png?200|}}

In diesem Beispiel ist der grün umrandete Bereich derjenige der ein- bzw ausgeblendet wird. Ermöglicht wird dies durch das Anklicken eines Radiobuttons bzw einer Checkbox. \\
Optional können labels auf die Radiobuttons bzw Checkboxen verweisen und diese steuern. Desweiteren können die Radiobuttons bzw Checkboxe ausgeblendet werden, in diesem Fall sind sie dann nur noch über deren label anklickbar. Falls Checkboxen verwendet werden, muss diesen jeweils das Attribut "value=true" zugewiesen werden.

==== Smartform ====
<code>
<?xml version="1.0" encoding="UTF-8"?>
<form name="form_mutation" class="form_mutation" security="all" >
<style type="text/css">
form.form_mutation h1 {
	font-family:HandelGotDLig;
	font-size:20px;
	font-weight:bold;
	text-decoration:underline; 
	text-align:center;
}
form.form_mutation h2 {
	font-family:HandelGotDLig;
	font-size:16px;
	font-weight:bold;
	text-decoration:underline;
	text-align:left;
	color:green;
}
form.form_mutation .master {
	margin:auto auto;
	width:695px;
	height:200px;
	padding:5px;
	background-color:#efefef;
	border:1px solid #aaa;
}
form.form_mutation .main {
	width:330px;
	height:150px;
	border:1px solid blue;
	float:left;
	margin:2px;
	padding:4px;
}
form.form_mutation .tabs {
	border:2px solid #00cc00;
	padding:4px 20px;
} 
</style>
 <div class="master">
  <div class="left_tab main">
   <h1><u><label for="left_tab">Left Tab</label><input type="radio" name="tabs" id="left_tab" class="formMutation" style="display:none;" checked="checked" /></u></h1> <br />
   <div class="display left_tab tabs">
    <table cellspacing="0">
	 <tr>
	  <td>
	   radio A 1&#160;
	  </td>
	  <td>&#160;
	   <input type="radio" name="group_a" id="radio_a1" /> 
	  </td>
	 </tr>
	 <tr>
	  <td>
	   radio A 2&#160;
	  </td>
	  <td>&#160;
	   <input type="radio" name="group_a" id="radio_a2" /> 
	  </td>
	 </tr>
	 <tr>
	  <td>
	   radio A 3&#160;
	  </td>
	  <td>&#160;
	   <input type="radio" name="group_a" id="radio_a3" /> 
	  </td>
	 </tr>
	</table> 
   </div>
  </div>
  <div class="right_tab main">
   <h1><u><label for="right_tab">Right Tab</label><input type="radio" name="tabs" id="right_tab" class="formMutation" style="display:none;" /></u></h1><br /> 
   <div class="display right_tab tabs"> 
    <table cellspacing="0">
	 <tr>
	  <td>
	   radio B 1&#160;
	  </td>
	  <td>&#160;
	   <input type="radio" name="group_b" id="radio_b1" /> 
	  </td>
	 </tr>
	 <tr>
	  <td> 
	   radio B 2&#160;
	  </td>
	  <td>&#160;
	   <input type="radio" name="group_b" id="radio_b2" /> 
	  </td>
	 </tr>
	 <tr>
	  <td>
	   radio B 3&#160;
	  </td>
	  <td>&#160;
	   <input type="radio" name="group_b" id="radio_b3" /> 
	  </td>
	 </tr>
	</table> 
   </div>
  </div>
 </div>
</form>
</code>

== Notwendige Einstellungen ==
1. Die steuernden Radiobuttons müssen die Klasse "formMutation" haben. \\
Der Radiobutton, dessen Bereich beim Laden der Smartform angezeigt werden soll muss zusätzlich das Attribut checked="checked" besitzen. Falls der Radiobutton ausgeblendet werden      soll,   braucht der Radiobutton das Styleattribut "display:none;" \\

2. Die ein- und auszublendenden <div>-Elemente benötigen 3 Klassen. \\
Die erste Klasse ist "display" oder "visibility". Falls die Klasse "display" vergeben wird, wird dem ausgeblendeten <div>-Element das Attribut "display:none" zugewiesen. Falls stattdessen die Klasse "visibility" vergeben wird, wird dem ausgeblendeten <div>-Element das Attribut "visibility:hidden" zugewiesen.

Die zweite Klasse ist die "id" des steuernden Radiobuttons. In diesem Beispiel ist das "right_tab" bzw. "left_tab".

Die dritte Klasse ist der "name" der Radiobutton-Group. In diesem Beispiel ist das "tabs".