Datalist dient dazu, Werte vorzuschlagen, ohne Werte durchzusetzen

Benötigte jemals ein Formularfeld für kurze, freie Texttext, wie ein Name? Dafür sind HTML -Eingangsfelder dafür da. Es gibt viele Eingangstypen und -modi, und die Auswahl des richtigen ist entscheidend.

Aber es geht nicht um Eingabetypen. Es geht um etwas anderes, das für jeden Eingangstyp anwendbar ist.

Was ist, wenn der Text willkürlich ist (z. B. "Lieblingsfarbe?"), Die kostenlose Texteingaben ermöglichen, aber Sie möchten auch Vorschläge abgeben? Es könnten ein paar beliebte Antworten existieren. Wäre es nicht toll, Benutzer aus einer Liste auszuwählen, aber nicht dazu zu zwingen? Kein Dropdown, sondern eine Mischung aus Eingabe und Dropdown? Festhalten! Erstellen Sie noch keine benutzerdefinierte React -Komponente.

Dort ist das<datalist></datalist> Element scheint. Ich habe es kürzlich erfolgreich verwendet, also teile ich es.

Hier ist das Kern:

Mein Anwendungsfall erforderlich:

1. Ein Benutzername -Eingangsfeld.
2. Eine "Flag" -Angabe (eine willkürliche Zeichenfolge für Berechtigungen).

Ich würde nicht benutzen<datalist></datalist> Für jeden Benutzernamen in einer Datenbank. Obwohl es möglicherweise keine strenge Grenze gibt, befinden sich die Optionen in Ihrem HTML, sodass es für vielleicht 100 Optionen oder weniger geeignet ist.

Aber für das Feld "Flag", mit nur 3-4 einzigartigen Flaggen,<datalist></datalist> war perfekt. Benutzer können frei tippen, aber die Benutzeroberfläche schlägt gemeinsame Entscheidungen vor - hilfreich. Dieser Ansatz könnte für die Geschlechtereingabe nützlich sein und Optionen ohne obligatorische Auswahl bereitstellen.

Noch weniger bekannt als<datalist></datalist> Existenz? Es funktioniert mit verschiedenen Eingangstypen, die über Text hinausgehen, einschließlich Datum, Reichweite und sogar Farbe.

Das obige ist der detaillierte Inhalt vonDatalist dient dazu, Werte vorzuschlagen, ohne Werte durchzusetzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!