HTML + CSSEingabefelder

Adressfeld mit Kartenpin

Tippe eine Straße, wähle einen Vorschlag, und ein Pin fällt auf einen kleinen Stadtplan, der an die Stelle heranzoomt.

Einstellungen

16px
1x

Code

<div class="uvq06-ad"><label for="uvq06-ad-in" class="lb">Lieferadresse</label><div class="fd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0C18.5 15.4 12 21 12 21z"/><circle cx="12" cy="10" r="2.3"/></svg><input id="uvq06-ad-in" role="combobox" aria-expanded="false" aria-controls="uvq06-ad-ls" aria-autocomplete="list" autocomplete="off" spellcheck="false" placeholder="Straße und Hausnummer"><ul id="uvq06-ad-ls" role="listbox" aria-label="Vorschläge" hidden><li role="option" id="uvq06-ad-o0" data-x="40" data-y="38" aria-selected="false"><b>Gran Vía 28</b><span>28013 Madrid</span></li><li role="option" id="uvq06-ad-o1" data-x="64" data-y="46" aria-selected="false"><b>Calle de Alcalá 42</b><span>28014 Madrid</span></li><li role="option" id="uvq06-ad-o2" data-x="72" data-y="70" aria-selected="false"><b>Paseo del Prado 8</b><span>28014 Madrid</span></li><li role="option" id="uvq06-ad-o3" data-x="26" data-y="58" aria-selected="false"><b>Calle Mayor 15</b><span>28013 Madrid</span></li><li role="option" id="uvq06-ad-o4" data-x="48" data-y="72" aria-selected="false"><b>Plaza de Santa Ana 3</b><span>28012 Madrid</span></li><li role="option" id="uvq06-ad-o5" data-x="46" data-y="18" aria-selected="false"><b>Calle de Fuencarral 70</b><span>28004 Madrid</span></li></ul></div><div class="mp" aria-hidden="true"><svg viewBox="0 0 200 110" preserveAspectRatio="xMidYMid slice"><rect class="ld" width="200" height="110"/><rect class="pk" x="118" y="10" width="56" height="34" rx="5"/><circle class="pk" cx="34" cy="88" r="10"/><path class="rv" d="M-5 102C30 92 62 108 100 97S165 80 205 90"/><path class="s2" d="M0 20H200M0 56H200M0 84H200M20 0V110M36 0V110M84 0V110M142 0V110M182 0V110"/><path class="s1" d="M0 40H200M0 70H200M58 0V110M110 0V110M0 106L132 0"/></svg><span class="rp"></span><span class="pin"></span></div><p class="ok" aria-live="polite"></p></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Eingabefelder

Alle ansehen: Eingabefelder

Wofür du ihn nutzen kannst

Ein Adressfeld mit barrierefreier Combobox und einem stilisierten Stadtplan aus Inline-SVG: Häuserblöcke, ein Park, ein Fluss und Alleen. Vorschläge filtern unabhängig von Akzenten und lassen sich mit Pfeiltasten und Enter wählen. Nach der Auswahl zoomt die Karte an die Stelle, ein Pin fällt federnd herunter, und eine Welle läuft über den Boden.

Die Hauptfarbe ist der Pin, die zweite Farbe die Parks. Ersetze die Vorschlagsliste durch Ergebnisse deines Geocoding-Dienstes samt Kartenposition und nutze es im Checkout mit Lieferung, in Filialfindern und Buchungsformularen.