Das neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.

Text Field

Textfelder werden in Formularen verwendet. Die Textfelder von mdui bieten Funktionen wie Zeichenzähler und Formularvalidierung.

Kann mit dem Grid-Layoutsystem für das Formularlayout verwendet werden.

Verwendung

Wird nach dem Laden der Seite automatisch initialisiert. Bei dynamisch generierten Textfeldern muss mdui.mutation() zur Initialisierung aufgerufen werden.

Farbe

Verwendet die Akzentfarbe.

Stil

Einzeiliges Textfeld

Dies ist ein einfaches Beispiel für ein Textfeld:

Beispiel

<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" placeholder="User Name"/>
</div>

Festes Label

Beispiel

<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text"/>
</div>

Schwebendes Label

Beispiel

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" />
</div>

Deaktivierter Zustand

Fügen Sie das Attribut disabled zum Element .mdui-textfield-input hinzu, um das Textfeld zu deaktivieren.

Beispiel

<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" disabled placeholder="User Name"/>
</div>

<!-- Festes Label -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text" disabled />
</div>

<!-- Schwebendes Label -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" disabled />
</div>

Mehrzeiliges Textfeld

Ersetzen Sie den input-Tag eines einzeiligen Textfelds durch einen textarea-Tag, um ein mehrzeiliges Textfeld zu erhalten. Mehrzeilige Textfelder passen ihre Höhe automatisch an den Inhalt an.

Beispiel

<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" placeholder="Description"></textarea>
</div>

<!-- Festes Label -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Schwebendes Label -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Deaktivierter Zustand -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Disabled</label>
  <textarea class="mdui-textfield-input" disabled></textarea>
</div>

Wenn Sie das Attribut rows zur textarea hinzufügen, bleibt die Höhe des Textfelds fest.

Beispiel

<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" rows="4" placeholder="Message"></textarea>
</div>

Mit Hilfetext

Durch Hinzufügen des Elements <div class="mdui-textfield-helper"></div> am Ende innerhalb von <div class="mdui-textfield"></div> können Sie einen Hilfetext hinzufügen.

Beispiel

<div class="mdui-textfield">
  <input type="email" class="mdui-textfield-input" placeholder="Email" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

Mit Icon

Beispiel

<div class="mdui-textfield">
  <i class="mdui-icon material-icons">email</i>
  <input class="mdui-textfield-input" type="email" placeholder="Email"/>
</div>

<!-- Festes Label -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">account_circle</i>
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

<!-- Schwebendes Label, mehrzeiliges Textfeld -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <i class="mdui-icon material-icons">textsms</i>
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Deaktivierter Zustand -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">lock</i>
  <input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>

Ausklappbares Textfeld

Beispiel

<div class="mdui-textfield mdui-textfield-expandable">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

<div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

Funktionen

Formularvalidierung

mdui verwendet HTML5 für die Formularvalidierung. Durch Hinzufügen des Elements <div class="mdui-textfield-error"></div> am Ende innerhalb von <div class="mdui-textfield"></div> können Sie Fehlermeldungen hinzufügen.

Wenn sowohl Fehlermeldungen als auch Hilfetexte enthalten sind, muss das Hilfetext-Element nach dem Fehlermeldungs-Element platziert werden.

Beispiel

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" required />
  <div class="mdui-textfield-error">Benutzername darf nicht leer sein</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" required />
  <div class="mdui-textfield-error">Ungültiges E-Mail-Format</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Password</label>
  <input
    class="mdui-textfield-input"
    type="text"
    pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$$"
    required
  />
  <div class="mdui-textfield-error">Das Passwort muss mindestens 6 Zeichen lang sein und Groß- und Kleinschreibung enthalten</div>
  <div class="mdui-textfield-helper">Bitte geben Sie ein Passwort mit mindestens 6 Zeichen sowie Groß- und Kleinschreibung ein</div>
</div>

Neben der HTML5-Validierung kann auch JavaScript zur Validierung verwendet werden.

Fügen Sie die Klasse .mdui-textfield-invalid zu Textfeldern hinzu, die die Validierung nicht bestehen, und entfernen Sie sie, wenn die Validierung erfolgreich war.

Beispiel

<div class="mdui-textfield mdui-textfield-invalid">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-error">Benutzername existiert bereits</div>
</div>

Zeichenzähler

Durch Hinzufügen des Attributs maxlength="" zum input-Element können Sie die Länge des eingegebenen Texts begrenzen. mdui fügt automatisch einen Echtzeit-Zeichenzähler in der unteren rechten Ecke des Textfelds hinzu.

Beispiel

<div class="mdui-textfield">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" maxlength="20" />
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" maxlength="60" />
  <div class="mdui-textfield-error">Ungültiges E-Mail-Format</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input" maxlength="140"></textarea>
</div>

Dynamisch generierte Textfelder

Wenn Ihr Textfeld dynamisch generiert wird, muss mdui.mutation() zur Initialisierung aufgerufen werden.

Wenn Sie den Inhalt des Textfelds dynamisch ändern, müssen Sie die Methode mdui.updateTextFields() aufrufen, um das Textfeld neu zu initialisieren. Als Parameter können Sie einen CSS-Selektor mit der Klasse .mdui-textfield, ein DOM-Element oder ein Array von DOM-Elementen übergeben, um nur die angegebenen Textfelder neu zu initialisieren. Wenn kein Parameter übergeben wird, werden alle Textfelder auf der Seite neu initialisiert.

CSS-Klassenliste

Klassenname	Beschreibung
`.mdui-textfield`	Definiert ein Textfeld.
`.mdui-textfield-floating-label`	Definiert ein Textfeld mit schwebendem Label.
`.mdui-textfield-label`	Definiert das Label des Textfelds.
`.mdui-textfield-input`	Definiert das Eingabefeld des Textfelds.
`.mdui-textfield-error`	Definiert die Fehlermeldung der Formularvalidierung.
`.mdui-textfield-helper`	Definiert den Hilfetext des Textfelds.

Expansion Panel

Auswahl-Steuerelemente

Text Field

Verwendung

Farbe

Verwandte Themen

Stil

Einzeiliges Textfeld

Festes Label

Schwebendes Label

Deaktivierter Zustand

Mehrzeiliges Textfeld

Mit Hilfetext

Mit Icon

Ausklappbares Textfeld

Funktionen

Formularvalidierung

Zeichenzähler

Dynamisch generierte Textfelder

CSS-Klassenliste