Wie könnte ich folgendes Problem in HTML lösen?

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML
13.05.2020, 14:50
Anwender wählt dann einfach das Bild aus mit dem Auto das er gerne haben möchte und schickt diese Auswahl dann ab. Ich frage mich nun erstmal wie man es hinkriegt, dass man Bilder auswählen kann. Hat da jemand eine Idee?

Da gibt es zahlreiche Möglichkeiten. Ein davon:

<!doctype html>
<title>button</title>
<form method="post">
<button name="auto1"><img src="auto1.jpg" alt="Auto 1"></button>
<button name="auto2"><img src="auto2.jpg" alt="Auto 2"></button>
<button name="auto3"><img src="auto3.jpg" alt="Auto 3"></button>
</form>

Alex
clnus2  13.05.2020, 14:55

Du solltest diese Antwort verwenden, wenn man nur ein Auto auswählen können soll.

Wenn man mehrere auswählen können soll, dann meine Antwort mit den Checkboxen.

0
EinAlexander  13.05.2020, 14:57
@clnus2
Du solltest diese Antwort verwenden, wenn man nur ein Auto auswählen können soll.

Ja. Zitat des FS: "Anwender wählt dann einfach das Bild aus mit dem Auto das er gerne haben möchte"

1
Vampirmeister22 
Fragesteller
 13.05.2020, 15:05

Danke für den Tipp das funktioniert prima.

0
EinAlexander  13.05.2020, 15:26
@Vampirmeister22

Wenn mehrere Autos ausgewählt werden sollen, kannst Du das z. B. so machen:

<!doctype html>
<title>checkbox</title>
<style>
div {
   position:relative;
   display:inline-block;
   }

input[type="checkbox"] { display:none }

input[type="checkbox"]:checked + label:before {
   position:absolute;
   background:rgba(255,255,255,0.5);
   text-align:center;
   width:100%;
   height:100%;
   content:"den will ich"
}
</style>
<form method="post">
<div><input type="checkbox" id="auto1" name="auto1"><label for="auto1"><img src="auto1.jpg" alt="Auto 1"></label></div>
<div><input type="checkbox" id="auto2" name="auto2"><label for="auto2"><img src="auto2.jpg" alt="Auto 2"></label></div>
<div><input type="checkbox" id="auto3" name="auto3"><label for="auto3"><img src="auto3.jpg" alt="Auto 3"></label></div>
<input type="submit">
</form>
0
clnus2
13.05.2020, 14:28

Eine einfache Lösung wäre einfach Checkboxen neben die Bilder zu machen, das würde dann auch in einem <form> mit action und method an die PHP Seite gesendet werden.

Wenn du eine hübsche Lösung haben willst, solltest du mit JavaScript und CSS arbeiten (ich kann jetzt nicht einschätzen, ob du das kannst). Eine mögliche Darstellung der Auswahl wäre z.B. über einen fetten Rand (border) oder Schatten (box-shadow).