HTML Forms - Versionsgeschichte

Sebastian.kalms: /* einfache Funktion mit Standard-URL-Weiterleitung */

2022-09-04T13:28:43Z

einfache Funktion mit Standard-URL-Weiterleitung

← Nächstältere Version		Version vom 4. September 2022, 13:28 Uhr
Zeile 250:		Zeile 250:
	// Daten für die Konfiguration		// Daten für die Konfiguration
	$mailTo = 'sebastian.kalms@elsterkind.de';		$mailTo = 'sebastian.kalms@elsterkind.de';
	$mailFrom = 'website@~~trendfoodscout~~.de';		$mailFrom = 'website@DOMIAN.de';
	$mailSubject = 'Feedback vom Php-Formular';		$mailSubject = 'Feedback vom Php-Formular';
	$returnPage = 'danke.html';		$returnPage = 'danke.html';

Sebastian.kalms: /* PHP Funktion */

2022-09-04T13:28:20Z

PHP Funktion

← Nächstältere Version		Version vom 4. September 2022, 13:28 Uhr
Zeile 242:		Zeile 242:

	=== PHP Funktion ===		=== PHP Funktion ===

			==== einfache Funktion mit Standard-URL-Weiterleitung ====

			<syntaxhighlight lang="php">
			<?php defined( 'ABSPATH' ) or die();

			// Daten für die Konfiguration
			$mailTo = 'sebastian.kalms@elsterkind.de';
			$mailFrom = 'website@trendfoodscout.de';
			$mailSubject = 'Feedback vom Php-Formular';
			$returnPage = 'danke.html';
			$returnError = 'fehler.html';
			$mailContent = '';

			// Formulardaten einlesen und Mail daraus erstellen
			if(isset($_POST)) {
			foreach ($_POST as $name => $value) {
			$mailContent .= $name . " : " . $value . "\n";
			}
			}

			// E-Mail versenden
			$mailSend = mail($mailTo, $mailSubject, $mailContent, "From: " . $mailFrom );

			// E-Mail-Versand überprüfen
			if($mailSend === TRUE) {
			header("Location: " . $returnPage);
			} else {
			header("Location: " . $returnError);
			}
			exit();

			</syntaxhighlight>

			==== umfangreiche Funktion ohne URL-Weiterleitung ====

	<syntaxhighlight lang="php">		<syntaxhighlight lang="php">
Zeile 313:		Zeile 348:

	</syntaxhighlight>		</syntaxhighlight>


	=== CSS ===		=== CSS ===

Sebastian.kalms: /* Pfeile */

2022-02-16T17:41:56Z

Pfeile

← Nächstältere Version		Version vom 16. Februar 2022, 17:41 Uhr
Zeile 52:		Zeile 52:
	=== CSS ===		=== CSS ===

	==== Pfeile ====		==== Pfeile über Hintergrundbild ====

			https://codepen.io/vkjgr/pen/VYMeXp

	~~über Hintergrundbild https://codepen.io/vkjgr/pen/VYMeXp~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	select.classic {		select.classic {
Zeile 88:		Zeile 89:
	border-color: grey;		border-color: grey;
	outline: 0;		outline: 0;
			}
			</syntaxhighlight>

			==== Pfeile über SVG als Hintergrundbild ====

			https://codepen.io/herrfischer/pen/aNpWwy

			<syntaxhighlight lang="css">
			select {
			width: 300px;
			padding: 12px;
			border: 0 !important;
			background-color: lightblue;
			/* needed */
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			/* SVG background image */
			background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
			background-size: .6em;
			background-position: calc(100% - 1.3em) center;
			background-repeat: no-repeat;
			}
			select::-ms-expand {
			display: none;
	}		}
	</syntaxhighlight>		</syntaxhighlight>

Sebastian.kalms: /* CSS */

2022-02-16T17:23:18Z

CSS

← Nächstältere Version		Version vom 16. Februar 2022, 17:23 Uhr
Zeile 52:		Zeile 52:
	=== CSS ===		=== CSS ===

			==== Pfeile ====

			über Hintergrundbild https://codepen.io/vkjgr/pen/VYMeXp
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	~~CSS~~		select.classic {
			background-image:
			linear-gradient(45deg, transparent 50%, blue 50%),
			linear-gradient(135deg, blue 50%, transparent 50%),
			linear-gradient(to right, skyblue, skyblue);
			background-position:
			calc(100% - 20px) calc(1em + 2px),
			calc(100% - 15px) calc(1em + 2px),
			100% 0;
			background-size:
			5px 5px,
			5px 5px,
			2.5em 2.5em;
			background-repeat: no-repeat;
			}

			select.classic:focus {
			background-image:
			linear-gradient(45deg, white 50%, transparent 50%),
			linear-gradient(135deg, transparent 50%, white 50%),
			linear-gradient(to right, gray, gray);
			background-position:
			calc(100% - 15px) 1em,
			calc(100% - 20px) 1em,
			100% 0;
			background-size:
			5px 5px,
			5px 5px,
			2.5em 2.5em;
			background-repeat: no-repeat;
			border-color: grey;
			outline: 0;
			}
	</syntaxhighlight>		</syntaxhighlight>

Sebastian.kalms: /* */

2022-02-16T16:26:54Z

← Nächstältere Version		Version vom 16. Februar 2022, 16:26 Uhr
Zeile 39:		Zeile 39:

	== <select> ==		== <select> ==

			=== HTML-Grundstruktur ===

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
Zeile 46:		Zeile 48:
	<option value="value 3">value 3</option>		<option value="value 3">value 3</option>
	</select>		</select>
			</syntaxhighlight>

			=== CSS ===

			<syntaxhighlight lang="css">
			CSS
	</syntaxhighlight>		</syntaxhighlight>

Sebastian.kalms: /* Allgemein */

2022-02-16T16:25:21Z

Allgemein

← Nächstältere Version		Version vom 16. Februar 2022, 16:25 Uhr
Zeile 2:		Zeile 2:

	Ein HTML-Formular wird verwendet, um Benutzereingaben zu sammeln. Die Benutzereingabe wird meistens zur Verarbeitung an einen Server gesendet.		Ein HTML-Formular wird verwendet, um Benutzereingaben zu sammeln. Die Benutzereingabe wird meistens zur Verarbeitung an einen Server gesendet.

	~~= Allgemein =~~

	Das HTML-Element <form> wird verwendet, um ein HTML-Formular für Benutzereingaben zu erstellen:		Das HTML-Element <form> wird verwendet, um ein HTML-Formular für Benutzereingaben zu erstellen:

Sebastian.kalms: /* HTML-Form-Elemente */

2022-02-16T16:24:58Z

HTML-Form-Elemente

← Nächstältere Version		Version vom 16. Februar 2022, 16:24 Uhr
Zeile 40:		Zeile 40:
	=== <input type="button"> ===		=== <input type="button"> ===

	=== <select> ===		== <select> ==

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
Zeile 50:		Zeile 50:
	</syntaxhighlight>		</syntaxhighlight>

	=== <textarea> ===		== <textarea> ==

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
Zeile 56:		Zeile 56:
	</textarea>		</textarea>
	</syntaxhighlight>		</syntaxhighlight>

	~~== <select> ==~~

	~~<label for="selection">Selection</label>~~
	~~<select id="selection" name="selection" size="4" multiple>~~
	~~<option value="option1">Option 1</option>~~
	~~<option value="option2">Option 2</option>~~
	~~<option value="option3">Option 3</option>~~
	~~</select>~~

	~~== <textarea> ==~~

	= Vorlage =		= Vorlage =

Sebastian.kalms: /* */

2022-02-16T16:23:44Z

← Nächstältere Version		Version vom 16. Februar 2022, 16:23 Uhr
Zeile 31:		Zeile 31:

	=== <input type="submit"> ===		=== <input type="submit"> ===

			* funktioniert nur innerhalb eines Form-Elements (<form></form>)

			=== <input type="reset"> ===

			* funktioniert nur innerhalb eines Form-Elements (<form></form>)

	=== <input type="button"> ===		=== <input type="button"> ===

Sebastian.kalms: /* CSS */

2022-02-09T14:53:59Z

CSS

← Nächstältere Version		Version vom 9. Februar 2022, 14:53 Uhr
Zeile 393:		Zeile 393:
	</form>		</form>
	</syntaxhighlight>		</syntaxhighlight>

	~~== CSS ==~~

Sebastian.kalms: /* PHP (inkl. HTML & JS) */

2022-02-09T14:53:15Z

PHP (inkl. HTML & JS)

← Nächstältere Version		Version vom 9. Februar 2022, 14:53 Uhr
Zeile 71:		Zeile 71:
	<?php defined( 'ABSPATH' ) or die(); ?>		<?php defined( 'ABSPATH' ) or die(); ?>

	<form name="my-new-form" onsubmit="submitForm(this);" class="ek-block-form my-form" action="<?php echo get_site_url(); ?>/wp-json/wp/v2/submit-~~contact~~-request">		<form name="my-new-form" onsubmit="submitForm(this);" class="ek-block-form my-form" action="<?php echo get_site_url(); ?>/wp-json/wp/v2/submit-form-request">
	<div class="ek-block-form__inner-container">		<div class="ek-block-form__inner-container">
	<label for="textfeld">Textfeld</label>		<label for="textfeld">Textfeld</label>
	<input type="text" id="text" name="~~Textfeld~~" value="">		<input type="text" id="text" name="textfeld" value="">
	</div>		</div>
	<div class="ek-block-form__inner-container">		<div class="ek-block-form__inner-container">
	<label for="email">E-Mail</label>		<label for="email">E-Mail</label>
	<input type="email" required>		<input type="email" name="email" required>
	</div>		</div>
	<div class="ek-block-form__inner-container">		<div class="ek-block-form__inner-container">
	<label for="~~telephone~~">Telefonnummer</label>		<label for="telefon">Telefonnummer</label>
	<input type="tel">		<input type="tel" name="telefon">
	</div>		</div>
	<div class="ek-block-form__inner-container">		<div class="ek-block-form__inner-container">
Zeile 93:		Zeile 93:
	</div>		</div>
	<div class="ek-block-form__inner-container">		<div class="ek-block-form__inner-container">
	<input type="checkbox" id="checkbox1" name="" value="">		<input type="checkbox" id="checkbox1" name="checkbox1" value="1">
	<label for="checkbox1">checkbox1</label><br>		<label for="checkbox1">checkbox1</label><br>
	<input type="checkbox" id="checkbox2" name="" value="">		<input type="checkbox" id="checkbox2" name="checkbox2" value="1">
	<label for="checkbox2">~~checkbox1~~</label><br>		<label for="checkbox2">checkbox2</label><br>
	</div>		</div>
	<div class="ek-block-form__inner-container">		<div class="ek-block-form__inner-container">
	<input type="radio" id="radiobutton1" name="radio" value="">		<input type="radio" id="radiobutton1" name="radio" value="1">
	<label for="radiobutton1">Radiobutton 1</label><br>		<label for="radiobutton1">Radiobutton 1</label><br>
	<input type="radio" id="radiobutton2" name="radio" value="">		<input type="radio" id="radiobutton2" name="radio" value="2">
	<label for="radiobutton2">Radiobutton 2</label><br>		<label for="radiobutton2">Radiobutton 2</label><br>
	<input type="radio" id="radiobutton3" name="radio" value="">		<input type="radio" id="radiobutton3" name="radio" value="3">
	<label for="radiobutton3">Radiobutton 3</label>		<label for="radiobutton3">Radiobutton 3</label>
	</div>		</div>
	<div class="ek-block-form__inner-container">		<div class="ek-block-form__inner-container">
	<label for="Range">Range Slider</label>		<label for="Range">Range Slider</label>
	<input type="range">		<input type="range" name="range">
	</div>		</div>
			<!--
	<div class="ek-block-form__inner-container">		<div class="ek-block-form__inner-container">
	<label for="fileupload">Dateiupload</label>		<label for="fileupload">Dateiupload</label>
	<input type="file">		<input type="file">
	</div>		</div>
			-->
	<div class="ek-block-form__inner-container">		<div class="ek-block-form__inner-container">
	<label for="~~message~~">Textbox</label>		<label for="textbox">Textbox</label>
	<textarea name="~~message~~" rows="10" cols="30"></textarea>		<textarea name="textbox" rows="10" cols="30"></textarea>
			</div>
			<div class="ek-block-form__inner-container">
			<input type="checkbox" name="datenschutz" id="input_datenschutz" required value="akzeptiert" />
			<label for="input_datenschutz">
			<small>
			Ich stimme zu, dass meine Angaben aus dem Kontaktformular zur Beantwortung meiner Anfrage erhoben und verarbeitet werden. Die Daten werden nach abgeschlossener Bearbeitung meiner Anfrage gelöscht.
			</small>
			</label>
	</div>		</div>
	<div class="ek-block-form__inner-container">		<div class="ek-block-form__inner-container">
Zeile 128:		Zeile 138:
	Vielen Dank für Ihre Anfrage!		Vielen Dank für Ihre Anfrage!
	</div>		</div>
			</syntaxhighlight>

			<syntaxhighlight lang="js">
	<script>		<script>
	let submitForm = function(form) {		let submitForm = function(form) {