HTML autocomplete?

Ich habe ein Verständnisproblem mit der autocomplete-Funktion für HTML-Formulare.

Genauer gesagt möchte ich erreichen, dass der Nutzer beim Ausfüllen eines Formulars z.B. bei Vorname, Nachname und Email vom Browser automatisch vorgeschlagen bekommt, was er bei früheren Sessions eingegeben hat.

Scheinbar ist dafür der Parameter name="xxx" innerhalb des <input> Tags maßgebend. Beispiel:

Email: <input name="email" ...
Vorname: <input name="given-name" ...
Nachname: <input name="family-name"

Nun habe ich mir andere Websiten angesehen. Die benutzen z.B. für Vor- und Nachname völlig andere Schlüsselworte. So z.B.

für Vorname: name="Vorname"
für Nachname: name="Nachname"

Ist es also egal, welches Schlüsselwort verwendet wird? D.h. merkt sich der Browser die alten Eingaben für jedes beliebige Schlüsselwort?

3 Antworten

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

12.01.2025, 12:59

Hi Rammstein53,

du kannst in HTML das autocomplete-Attribut verwenden. Damit lassen sich Angaben wiederverwenden. Hier mehr zum Thema: https://wiki.selfhtml.org/wiki/HTML/Attribute/autocomplete

Eine andere Lösung wäre die Nutzung von JavaScript und der Web Storage API. Damit lassen sich Eingaben speichern und wieder laden. So kann man den User die Möglichkeit bieten einen Speicher-Hacken zu setzen.

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Computihack

Nutzer, der sehr aktiv auf gutefrage ist

im Thema IT

09.01.2025, 15:55

Ich schlage vor du solltest dir mal das autocomplete Attribut anschauen.

Ein guten Anfang findest du hier https://www.w3schools.com/tags/att_input_autocomplete.asp

Technischer hier: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Video: https://www.youtube.com/watch?v=JcvX5VTEH20

Woher ich das weiß:Studium / Ausbildung – Information Engineering Studium

GamersGame

10.01.2025, 02:15

Du gehst das falsch an. An sich ist es egal was in name="email" oder value="email" steht. Diese Werte sind nicht für die Autocomplete Funktion zuständig. Funktionieren tun sie aber trotzdem (mehr oder weniger).

Der Browser sieht nun ein HTML Tag mit dem Wert "email", also interpretiert dieser daraus, dass hier die E-Mail rein sollte. Aber die Betonung liegt auf interpretiert, diese kann auch Fehlerhaft sein.

Der richtige Weg wäre die passenden autocomplete Attribute zu verwenden.

Vorab, hier kannst du alle Werte dir anschauen: https://www.w3schools.com/tags/att_input_autocomplete.asp

Der richtige Weg für z.B. ein E-Mail Feld ist also folgender:

<input type="text" name="ist_egal" value="such_dir_was_aus" autocomplete="email" />

Mit autocomplete definierst du was der Browser eingeben soll. Ist autocomplete nicht definiert interpretiert der Browser lediglich welcher Wert hier eingegeben werden sollte. Benutze daher bei jedem Feld autocomplete.

Pro Tipp 1: Gehen wir mal davon aus du verkaufst Tickets für einen Club. Der Nutzer muss Vorname, Name, E-Mail etc und die Anzahl der Tickets eingeben die er kaufen möchte, dann sollte das Feld für die Ticket Anzahl nicht automatisch ausgefüllt werden, denn diesen Wert kann dein Browser nicht wissen. Im worst case steht dann irgend ne Zahl drin, die der Nutzer gar nicht will, übersiehts und schickts ab...
Benutze dann autocomplete="off"

<input type="text" name="ist_egal" value="Anzahl der Tickets" autocomplete="off" />

Der Browser wird dieses Feld dann nicht automatisch ausfüllen und der Nutzer muss selbst eine Angabe machen (und ja man kann sich jz darüber streiten, dass ich type="text" und nicht type="number" verwendet habe, aber es ist ja nur ein Beispiel).

Pro Tipp 2: Verwende für E-Mail inputs type="text" und validiere den Wert mit RegEx (da gibts zig sehr gute RegEx Codes dazu). input="email" ist leider extremst schlecht (und zwar wirklich bodenlos schlecht) umgesetzt und validiert die E-Mail nicht richtig, man kann trotzdem eine ungültige E-Mail eingeben (z.B. "test.!=?/@e.c" ist laut input="email" eine gültige E-Mail-Adresse...).

Woher ich das weiß:Berufserfahrung

Ähnliche Beiträge

HTML Formular automatische email?

Hallo, ich habe ein Formular in HTML gecodet. Unten ist ein Button, der zum abschicken des Formulars dient.

Ganz unten im "Form"-tag steht folgendes:

Oben als Attribut von <form> steht folgendes:

method="post" action="mailto:(hier steht meine Email)"

Jetzt zum Problem:

Wenn man auf abschicken drückt, öffnet sich das Mail-Programm auf dem Laptop, es soll aber automatisch die Mail gesendet werden (nur mit den Werten).

Wie kann ich das umsetzen?

...zum Beitrag

HTML input ausgeben?

Hallo Community,

ich habe einen Code für eine Webseite mit HTML geschrieben.

Nun ist es so, das ich den input von vier Feldern, welche sich oben auf der Webseite befinden, unten auf der Webseite angezeigt haben möchte. Ich habe schon viele Möglichkeiten im Internet gefunden, aber keine wollte so richtig funktionieren. Kann mir hier jemand bei meinem Problem helfen?

Bei dem Code kann ich euch nur einen Ausschnitt, nämlich den mit den betreffenden Teilen reinschicken, da die Frage sonst zu lang ist.

MfG Kuchenmonster31

Teilcode:

Feedbackwebsite
<form class="Formular" action="datenbank für website.py" method="post">
  Vorname:
  <input type="text" name="vorname" size="30" maxlength="50">
</form>
<!-- Nachname -->
<form class="Formular" action="datenbank für website.py" method="post">
  Nachname:
  <input type="text" name="nachname" size="30" maxlength="50">
</form>
<!-- Fedback für Coding School -->
<form class="Formular" action="datenbank für website.py" method="post">
  Feedback für die<br> Coding School:
  <textarea type="text" name="vorname" size="30" maxlength="1000"></textarea>
</form>
<!-- Feedback für Website -->
<form class="Formular" action="datenbank für website.py" method="post">
  Anmerkung zur <br> Website:
  <textarea type="text" name="vorname" size="30" maxlength="1000"></textarea>
</form>
<!-- Button damit die eingabe unten auf der Website angezeigt wird: -->
<button class="Button">Formular abschicken</button>
<h4 class="Ausgabe">Ausgabe:</h4>

...zum Beitrag

seriöse email adresse für eine bewerbung

hallo am besten ist es für eine bewerbung eine seriöse email adresse zu haben, vorname und nachname. leider sind meine vor- und nachname wirklich sehr lang :( ist es ok wenn ich meine vorname abkürze? z.B. T.kukukuku@bla.de ? oder doch besser ausschreiben? danke schön lg jemand mit sehr langen namen xD

...zum Beitrag

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

...zum Beitrag

Input löschen Vue.js?

Hallo

Ich bin gerade mit Vue js eine To-Do-App am programmieren. Es gibt ein Input feld in dem man den Namen des To-Do's schreiben kann, danach kann man noch die Kategorie wählen z.B. Arbeit oder Privat. Alles funktioniert jedoch möchte ich gerne das nach dem ich den "Add to Board"/Submit Buttom drücke der Text aus dem Input Feld gelöscht wird.

Ich bin ein Anfänger was das Programmieren angeht und würde mich über Hilfe freuen.

...zum Beitrag

Was wird mit Name und Vorname gemeint?

Ist der Vorname der Nachname? Z.b.

Name: Max

Vorname: Zimmermann

ODER

Name: Zimmermann

Vorname: Max

Welche ist die Richtige die Erste oder die Zweite?

...zum Beitrag

Warum werden Pflichtfelder in einem HTML-Formular auf dem PC erkannt und auf einem Smartphone ignoriert?

ich versuche gerade auf einer Homepage in einem Formularfeld Pflichtfelder einzubauen. Per PC funktioniert das auch wunderbar mit der Anweisung "required" bzw. input type="email" ... aber auch einem mobilen Endgerät lässt sich das Formular trotzdem einfach ohne Ausfüllen der Felder senden ... Ich weiß leider nicht weiter :(

Hier der Code dazu:

Name:

E-Mail:

Betreff:

Nachricht:

Hat wer eine Idee?

...zum Beitrag

Was ist der vorname und der nachname?

ich kann mir sowas niee merken also ist vorname der name z.B Bernd und nachname des andere oder was ?? bItte brauche hillffee

...zum Beitrag

Namen mit Doktortitel ausschreiben?

Wenn ich einen Namen mit Vornamen und Nachnamen sowie Doktortitel ausschreiben will z.B. Vorname: Steffan, Nachname: Müller & Doktortitel , wie schreibe ich das dann?

...zum Beitrag

Woher weiß ich, welcher der Vorname und welcher Nachname sein soll?

Hallo, ich schreibe eine Seminarfacharbeit und verwende auch ausländische Quellen. Bei vielen Namen weiß ich nicht, welcher der Nachname und welcher Vorname sein soll. Gibt es eine Webseite, die das schnell herausfindet? (Sind etwa 40Namen, kann nicht bei jedem nach Ursprung schauen)

...zum Beitrag

Website-Änderungen werden nicht angezeigt wegen Browser-Cache?

Hallo zusammen,

ich habe folgendes Problem:

Ich hoste meine Website bei Ionos. Dort habe ich meine Codes (HTML, CSS, JavaScript und PHP) im Webspace abgelegt, der mit der Domain verbunden ist.

Nun habe ich an der Website Änderungen vorgenommen und z.B. eine mobile Ansicht implementiert. Ich habe die alten Code-Dateien überschrieben.

Auf der Website werden diese Änderungen aber nicht angezeigt, wenn man die Website vor kurzem bereits besucht hatte, da der Browser-Cache die alten Daten noch gespeichert hat.

Gibt es hier eine Möglichkeit, das zu verhindern und für die Nutzer direkt die neue Version anzeigen zu lassen?

Ich danke für eure Rückmeldungen :)

...zum Beitrag

HTML Formular Input in SQLite Datenbank speichern, (mit NodeJS) wie?

Hallo. Ich möchte den Input eines HTML-Formulars mit Hilfe von Node in eine SQLite Datenbank einfügen.

Mein index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello world!</title>
    <script src="sqlite.js"></script>
</head>
<body>

    <form action="/team_name_url/" method="post">
        <label for="team_name">Enter name: </label>
        <input id="team_name" type="text" name="name_field" value="Default name for team.">
        <input type="submit" value="OK">
    </form>

</body>
</html>

Mein sqlite.js:

const sqlite3 = require('sqlite3');
const db = new sqlite3.Database('./sqlite.db');

let express = require('express');
let app = express();
const bodyParser= require('body-parser');


app.use(bodyParser.urlencoded({extended:true}));

app.post('/',(req,res)=>{
let placeName = req.body.PlaceName; 
});


db.run(`INSERT INTO places (id, name, coords) VALUES(4, ${placeName}, '1234, 5678');`, function(err) {
    if (err) {
        return console.log(err.message);
    }

    console.log(`A row has been inserted with rowid ${this.lastID}`);


});

db.close();

...zum Beitrag

Vorname, Nachname,Name....?! bin durcheinander

Hallo leuts ! ich komm immer durcheinander mit den namen, vornamen und Nachname...Was ist Was?! Zum Beispiel : Max Mustermann...was ist der Nachname,Vorname, Name ? Bitte um vernünftige Antworten !! lg ;)

...zum Beitrag

HTML/CSS Blauen Kasten um Input entfernen?

Also ich habe einen kleinen Login erstellt, aber wenn ich den Input für z.B. den Username auswähle, zeigt es wegen der border-radius einen blauen, eckigen Kasten um den Input an.

Mein Frage wäre jetzt, ob man den irgendwie mit z.B. ":active" entfernen kann.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen