Implementieren des Float-Label-Formularmusters

Um das Verständnis und die Wartbarkeit des Codes zu verbessern, setzen wir den von uns hinzugefügten oder entfernten Klassen JavaScript mit 'js' voran. Lassen Sie uns diese Klasse zu unserem Stylesheet hinzufügen und alle Nachkommen ausblenden Etikette Elemente aus der Sicht. Erinnern Sie sich, wie wir das benutzen würden Opazität Regel? Hier verwenden wir es, um das zu verbergen Elemente:

 .js-hide-label label Deckkraft: 0; oben: 1.5em

Hinweis: Das Opazität Diese Eigenschaft wird in allen modernen Browsern unterstützt. IE8 wird es nicht erkennen, aber das ist in Ordnung, weil IE8 auch keine Platzhalterattribute unterstützt. Daher führen wir kein JavaScript aus, um die Klasse in IE8 anzuwenden. Win-Win!

Ein Hinweis zu Übergängen

Wenn Sie genau hinschauen, zeigt das Interaktionsdesign von Matt, dass die Beschriftungen des Formularfelds nicht nur erscheinen und verschwinden, sondern auch mit ein wenig Auf- und Abbewegung. Da unsere Etikettenelemente absolut positioniert sind, kann der Browser diesen Effekt ändern, wenn wir eine Klasse hinzufügen, die ihre obere Position (oder links, rechts oder unten) ändert. Alles, was wir tun müssen, ist, dem Label selbst eine Übergangseigenschaft hinzuzufügen.

Gehen wir zu unserem zurück Etikette Element in der CSS und fügen Sie eine Übergangseigenschaft für die oben und Opazität Eigenschaften:

 label -webkit-transition: .333s erleichtern die Oberseite, .333s verringern die Deckkraft; Übergang: .333s Nach oben, .333s Nachgiebigkeit; 

Auf diese Weise können die Etiketten nicht nur glatt erscheinen und verschwinden, sondern auch, wenn sie vollständig undurchsichtig oder transparent werden.

Sie sollten jetzt etwas Ähnliches haben, wenn Sie die Seite laden (natürlich in einem modernen Browser)..

Entfernen der Markierungsfarbe

Wie bereits erwähnt, werden Klassen hinzugefügt und entfernt

 .js-unhighlight-label label color: # 999

Ereignis-Listener hinzufügen

Jetzt haben wir ein Formular, das schrittweise erweitert wird und für einige JavaScript-Interaktionen (in modernen Browsern) bereit ist, wenn der Benutzer mit dem Formular zu interagieren beginnt.

Innerhalb des Platzhalters ob Aussage, die wir oben geschrieben haben, fangen wir an, unsere hinzuzufügen und zu entfernen js- Unterricht im richtigen Moment. Zuerst wählen wir unsere Formularelemente aus und fügen einen Ereignis-Listener im hinzu verwischen, Fokus, und keyup Ereignisse (wir verwenden keyup eher, als Taste nach unten oder Tastendruck da diese Ereignisse vorzeitig feuern werden):

 $ ('. form li'). find ('input, textarea'). on ('keyup blur focus', function (e) // Zwischenspeichern unserer Selektoren var $ this = $ (this), $ parent = $ this.) .parent (); // Klassen hinzufügen oder entfernen, wenn (e.type == 'keyup') // hier Schlüsselcode else if (e.type == 'blur') // hier Code verwischen else if (e.type == 'focus') // Fokuscode hier);

Hier ist eine kurze Erklärung, was wir hier machen:

• Wir wählen alle Listenelemente aus, die Teil unseres Formulars sind $ ('. form li'). Dann finden wir in dieser Auswahl alles und </code> Felder <code>.find ('Eingabe, Textbereich')</code>. Dadurch wird sichergestellt, dass die letzte Eingabe in unserem Markup (die Schaltfläche "Senden") nicht in unserer Auswahl enthalten ist.</li> <li>Wir haben die ausgewählten Selektoren zwischengespeichert. Dies ist eine gute Aufführungspraxis. Wenn Sie dem Variablennamen das vorangestellte '$' voranstellen, wissen wir, dass diese bestimmte Variable ein jQuery-Objekt ist.</li> <li>Wir haben das kombiniert <code>verwischen</code>, <code>Fokus</code>, und <code>keyup</code> Ereignisse und überprüfen Sie einfach den Ereignistyp mit <code>e-Typ</code> um zu bestimmen, welche Klassen wir zu bestimmten Zeitpunkten hinzufügen oder entfernen werden.</li> </ul> <h3>Kodierung ein <code>keyup</code> </h3> <p>Nach den Interaktionsregeln, die wir zu Beginn aufgestellt haben und die dem Entwurf von Matt entsprechen, beginnt der Benutzer mit der Texteingabe (<strong>nicht</strong> Wenn sie sich auf das Feld konzentrieren, möchten wir das Etikett zeigen.</p> <p>Also mit der <code>keyup</code> Jedes Mal, wenn der Benutzer ein Zeichen eingibt, können wir überprüfen, ob das Eingabefeld leer ist (dieser Code geht hinein) <code>if (e.type == 'keyup')</code>:</p> <pre> if ($ this.val () == ") $ parent.addClass ('js-hide-label'); else $ parent.removeClass ('js-hide-label');</pre> <p>Beachten Sie, dass unsere Logik so funktioniert:</p> <ul> <li>Wenn der Wert der Eingabe <strong>ist leer</strong>, Verstecken Sie das Label, indem Sie die Klasse 'js-hide-label' hinzufügen.</li> <li>Andernfalls (der Wert der Eingabe <strong>ist nicht leer</strong>), zeigen Sie das Label an, indem Sie die Klasse 'js-hide-label' entfernen.</li> </ul> <p>Sie sollten jetzt etwas haben, das auf diese Weise funktioniert, wenn Sie Text in ein Eingabefeld eingeben oder löschen:</p> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_2.gif"><br> <h3>Kodierung ein <code>verwischen</code> </h3> <p>Gemäß unseren Interaktionsregeln wissen wir (wieder), dass ein Benutzer den Fokus von einem Eingabefeld zum nächsten verschiebt (<code>verwischen</code> Ereignis), sollten wir die Farbe des hervorheben <code><label></code> Element abhängig davon, ob der Benutzer tatsächlich etwas in das Feld eingegeben hat.</p> <p>In der <code>else if (e.type == 'verwischen')</code>, Wir werden den folgenden Code hinzufügen:</p> <pre> if ($ this.val () == ") $ parent.addClass ('js-hide-label'); else $ parent.removeClass ('js-hide-label'). addClass ('js-unhighlight.) -Etikette'); </pre> <p>Beachten Sie, dass unsere Logik so funktioniert:</p> <ul> <li>Wenn der Wert der Eingabe <strong>war leer</strong> Wenn der Benutzer den Fokus entfernt hat, blenden Sie die Beschriftung aus, indem Sie die <code>js-hide-label</code> Klasse.</li> <li>Andernfalls (der Wert der Eingabe <strong>war nicht leer</strong> Wenn der Benutzer den Fokus entfernt hat), zeigen Sie das Etikett an, indem Sie die Klasse entfernen <code>js-hide-label</code> und heben Sie die Farbe der Beschriftung herab, indem Sie die Klasse 'js-unhighlight-label' hinzufügen.</li> </ul> <p>Sie sollten jetzt etwas haben, das die Farbe der Beschriftung herabsetzt, wenn Sie den Fokus entfernen, wie folgt:</p> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_3.gif"><br> <h3>Kodierung ein <code>Fokus</code> </h3> <p>Als letztes müssen wir eine kleine Logik hinzufügen, wenn ein Benutzer sich auf eine Eingabe konzentriert. Befolgen Sie unsere Interaktionsregeln und verwenden Sie das folgende JavaScript im <code>else if (e.type == 'Fokus')</code> Sektion:</p> <pre> if ($ this.val ()! == ") $ parent.removeClass ('js-unhighlight-label');</pre> <p>Unsere Logik funktioniert so:</p> <ul> <li>Wenn der Wert der Eingabe <strong>ist nicht leer</strong>, Entfernen Sie die Klasse 'js-unhighlight-label' der übergeordneten Klasse.</li> </ul> <p>Wenn ein Benutzer sich nun auf ein Formularfeld konzentriert, wird das Etikett mit der Markierungsfarbe hervorgehoben, wenn es nicht leer ist:</p> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_4.gif"><br> <hr> <h2>Bonuspunkte</h2> <p>Wir können noch viel mehr mit diesem Formular machen, einschließlich der Validierung auf Client- und Serverseite. Wir könnten auch einige weitere Klassen erstellen, um gültige und ungültige Feldwerte zu gestalten. Zum Beispiel könnten wir Stile zu einer Klasse von 'js-error' hinzufügen, die auf die übergeordnete Klasse angewendet werden <code><li></code> Element, wenn der Wert der Eingabe wie folgt ungültig ist:</p> <pre> .js-error border-color: # f13b3b! important; / * alle Fälle überschreiben * / .js-error + li border-top-color: # f13b3b; .js-error label color: # f13b3b; </pre> <p>Diese Arten von Validierungsstilen könnten dazu führen, dass unser Formular in etwa wie folgt aussieht:</p> <img src="//accentsconagua.com/img/images_16/implementing-the-float-label-form-pattern_10.png"><br> <p>Dieses Tutorial sollte jedoch zeigen, wie wir ein barrierefreies, progressiv verbessertes Formular erstellen können, das das Design von Matt nachahmt. Und ich muss sagen, ich denke, wir haben es gut gemacht.</p> <p>Fühlen Sie sich frei, dieses Formular zu kopieren, zu modifizieren oder zu verbessern!</p> <hr> <h2>Nützliche Links</h2> <ul> <li>http://floatlabel.com</li> <li> @floatlabel auf Twitter; Beispiele in freier Wildbahn</li> <li>Brad Frosts Gedanken zum Float Label Pattern </li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Web-Design</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/import-and-archive-your-tweets-with-wordpress.html">Importieren und archivieren Sie Ihre Tweets mit WordPress</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_12/import-and-archive-your-tweets-with-wordpress_15.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/code/implementing-the-eu-cookie-law-into-your-wordpress-site.html">Umsetzung des EU-Cookie-Gesetzes in Ihre WordPress-Site</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_13/implementing-the-eu-cookie-law-into-your-wordpress-site_4.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Suche..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>