Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie füge ich mithilfe von CSS automatisch ein erforderliches Feld-Sternchen zu Formulareingaben hinzu?

Mary-Kate Olsen
Freigeben: 2024-11-03 06:28:02
Original
215 Leute haben es durchsucht

How to Automatically Add a Required Field Asterisk to Form Inputs Using CSS?

Methode zum automatischen Anhängen eines „Pflichtfeld“-Sternchens an Formulareingaben mithilfe von CSS

Es ist möglich, zur Kennzeichnung automatisch ein Sternchen (*) anzuhängen erforderliche Formulareingaben, ohne dass ein zusätzliches Markup eingefügt werden muss. Ein Ansatz besteht darin, das CSS-Pseudoelement :after zu nutzen, um das Sternchen nach den Eingabeelementen einzufügen.

Bei diesem Ansatz wird das Sternchen jedoch nach dem Elementinhalt eingefügt, was es unmöglich macht, das gewünschte Ergebnis zu erzielen dass das Sternchen direkt nach dem Element selbst erscheint.

Um diese Einschränkung zu überwinden und eine Lösung zu erhalten, die die gewünschte Flexibilität und Funktionalität bietet, sollten Sie den folgenden Ansatz in Betracht ziehen:

CSS:

<code class="css">.required:after {
    content: " *";
    color: red;
}</code>
Nach dem Login kopieren

HTML:

<code class="html"><label class="required">Name:</label>
<input type="text"></code>
Nach dem Login kopieren

Bei diesem Ansatz wird das :after-Pseudoelement auf die .required-Klasse angewendet, der es zugewiesen ist das Label-Element. Dadurch wird sichergestellt, dass das Sternchen nach der Beschriftung erscheint, was die gewünschte Position ist, um anzuzeigen, dass das Feld erforderlich ist.

Diese Lösung bietet die folgenden Vorteile:

  • Flexibilität bei der Steuerung der Position des Sternchens relativ zur Formulareingabe.
  • Möglichkeit, seltsame Fälle zu behandeln, in denen das Formularlayout verhindert, dass das Sternchen an der Standardposition angezeigt wird.
  • Funktioniert gut mit der Validierung, die das Formular überprüft oder hervorhebt unvollständige Steuerelemente.

Durch die Verwendung dieser Technik können Sie automatisch ein erforderliches Feld-Sternchen hinzufügen, um Eingaben zu bilden, während gleichzeitig die Flexibilität gewahrt bleibt und zusätzliches Markup vermieden wird.

Das obige ist der detaillierte Inhalt vonWie füge ich mithilfe von CSS automatisch ein erforderliches Feld-Sternchen zu Formulareingaben hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage