zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Formulare: leere Pflichtfelder

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.01.2013, 14:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.06.2007
Beiträge: 14
FuryDE befindet sich auf einem aufstrebenden Ast
Standard Formulare: leere Pflichtfelder

Hallo,

ich arbeite zum ersten mal mit den HTML-5-Features für Formulare. Die Eingabefelder sollen unterschiedlich dargestellt werden, je nach dem, ob es ein Pflichtfeld ist, oder nicht. Und Wenn es ein Pflichtfeld ist, dann soll angezeigt werden, ob es gültig oder ungültig gefüllt oder ganz leer ist.

Dazu benutze ich die Pseudo-Klassen :required, :invalid und :valid:
HTML-Code:
input:required,
textarea:required {
	background: transparent url(../images/basics/input_required.png) right center no-repeat;
}

input:required:valid,
textarea:required:valid {
	background: transparent url(../images/basics/input_validated.png) right center no-repeat;
}
input:required:invalid {
	background: transparent url(../images/basics/input_invalid.png) right center no-repeat;
}
Das funktioniert ganz gut, bis auf ein Problem: leere Pflichtfelder werden als :invalid selektiert (was im Grunde ja auch richtig ist). Ich möchte aber leere Pflichtfelder anders markieren als gefüllte, ungültige Pflichtfelder. Mit :empty habe ich schon herumexperimentiert, das greift bei Eingabefeldern aber nicht.

Hat jemand eine Idee, wie ich das in CSS angehen kann/muss?

Danke im Voraus
Martin
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.01.2013, 15:09
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Schreibe doch einfach etwas rein dass du beim anklicken gelöscht wird.
ist der Text zB. "*notwendig" enthalten dann diese Farbe ansonsten deine Regelung
PHP-Code:
<input type="text" name="q" size="20" id="yourname" value="*notwendig" onblur="if(this.value=='') this.value='*notwendig';" onfocus="if(this.value=='*notwendig') this.value='';"/> 
MfG
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.01.2013, 16:10
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von gabischatz Beitrag anzeigen
Schreibe doch einfach etwas rein dass du beim anklicken gelöscht wird.
ist der Text zB. "*notwendig" enthalten dann diese Farbe ansonsten deine Regelung
PHP-Code:
<input type="text" name="q" size="20" id="yourname" value="*notwendig" onblur="if(this.value=='') this.value='*notwendig';" onfocus="if(this.value=='*notwendig') this.value='';"/> 
MfG
"*notwendig" ist aber ein Inhalt des Feldes. Wenn er jetzt einfach abfragt, ob das Feld gefüllt ist, würde es ja abgeschickt werden.

Die Problematik, die du beschreibst kannst du leider nur mit JavaScript lösen indem einem Feld, das leer ist. Eine Klasse hinzugefügt wird. dann könntest du CSS-Regeln wie z.B. "input.empty:required:invalid" nutzen

Ein anderer Weg ist mir gerade nicht bekannt.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #4 (permalink)  
Alt 02.01.2013, 16:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.06.2007
Beiträge: 14
FuryDE befindet sich auf einem aufstrebenden Ast
Standard

JS wollte ich eigentlich gerade vermeiden, aber fürchte auch, dass sich das nicht anders darstellen lässt.

Apropos darstellen. Die erste Lösung von gabischatz fällt aus. Es geht mir ja darum, dass ein entsprechendes Icon als Hintergrundbild im Eingabefeld erscheint. Vorgabetext werde ich evtl. sowieso zusätzlich noch haben. Sei es als Standardwert (mit value) oder als Beispielwert (dann mit placeholder).
Mit Zitat antworten
  #5 (permalink)  
Alt 02.01.2013, 17:00
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Dein Vorhaben wird mit den aktuellen HTML/CSS-Mitteln nicht ohne JS klappen, denn:

Zitat:
Zitat von FuryDE Beitrag anzeigen
ungültig gefüllt oder ganz leer
Diese Unterscheidung gibt es nicht - z.B. ist type="email" mit dem Attribut required ungültig solange es leer ist, aber natürlich auch wenn eine syntaktisch nicht korrekte E-Mail-Adresse drinsteht.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Geändert von heiko_rs (02.01.2013 um 17:47 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 02.01.2013, 17:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.06.2007
Beiträge: 14
FuryDE befindet sich auf einem aufstrebenden Ast
Standard

Ja, so ist es. Das meinte ich mit "was im Grunde ja auch richtig ist". Es ist aus Benutzerführungssicht aber angenehmer, den Benutzer nicht gleich das leere Formular mit lauter "Fehlericons" anzuzeigen, sondern lieber mit dem freundlicheren Hinweis, er möge die Pflichtfelder ausfüllen.

Also werde ich JS zu Hilfe nehmen.

Danke für euren Input.
Mit Zitat antworten
  #7 (permalink)  
Alt 03.01.2013, 12:11
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Prüfst du die Felder mit JS vor dem versenden ?oder prüfst du die Felder mit php auf dem Server?
Mit Letzterem kannst du die Ausgabe beeinflussen ohne das du JS nutzt.
Mit Zitat antworten
  #8 (permalink)  
Alt 03.01.2013, 15:00
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

PHP ist hierbei natürlich eh Pflicht, denn andernfalls wird u.U. ein leeres Formular abgeschickt. Ich verstand sein Vorhaben nur so, dass direkt während des Ausfüllens (d.h. vorm Abschicken) reagiert wird, genauso wie die HTML5/CSS3-Variante es eben auch tut, nur dass er diese eben um eine Unterscheidung zwischen ungültig ausgefüllt und leer erweitern will (und das geht eben nur per JS).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Antwort

Stichwörter
css, form, validation, validierung

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Komplexe Formulare: Aufbau, Sicherheit etc. David Serveradministration und serverseitige Scripte 2 23.02.2011 14:19
Cakephp's Formulare zentrieren hailander CSS 1 28.09.2010 00:37
Formularfeld für mehrere Formulare nutzen? derMatze (X)HTML 4 02.09.2009 19:54
Leere Tabellenzeilen verstecken? akb CSS 2 29.10.2006 17:37
Pflichtfelder barrierefrei markieren Xavier Barrierefreiheit 15 24.06.2006 01:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:19 Uhr.