Meine Seite

wolf

So ich hätte gerne mal ein bisschen Feedback zu meiner eigenen Seite

Schaut doch mal drauf und gebt ein kommentar: http://wolf.wolfgang-m.de/

Danke

DerUser

Schlicht gehalten und Responsive Design find ich Klasse

Wenn du den Browser ganz small ziehst ensteht ein vertikaler Scrollbalken, wird wohl an irgendwelchen Abständen liegen ?!

Was mir noch unter Impressum bei deiner Anschrift aufgefallen, die Verlinkung darunter "Contact me" ist schlecht sichtbar!

Das Formular mit Kontaktfunktion find ich bisschen öde.

Ansonsten tolle schlichte responsive Page

wolf

Zitat von DerUser

Wenn du den Browser ganz small ziehst ensteht ein vertikaler Scrollbalken, wird wohl an irgendwelchen Abständen liegen ?!

Oh ja das liegt am rsponsiv.. da sind wohl boxen auf 100% und die innerhalb auch auf 100% oder die äußere ohne wert, das macht interessanterweise Problemchen, werde ich mal bei Gelegenheit versuchen zu beheben --> To do List

Zitat von DerUser

Was mir noch unter Impressum bei deiner Anschrift aufgefallen, die Verlinkung darunter "Contact me" ist schlecht sichtbar!

ooops, nicht drauf geachtet --> To do List

Zitat von DerUser

Das Formular mit Kontaktfunktion find ich bisschen öde.

Da hast du Recht Aber das passt mir eh noch nicht, wo wir gerade dabei sind, kann mir jemand n Ansatz machen um die input Felder mit Js zu überprüfen?

Danke für deine Rückmeldung :))

cottton

probier mal bissl mit box shadow rum.
macht echt spass. man kann sich dabei aber auch ganz schön verspielen
bsp/test: http://jsfiddle.net/nqfVS/

wolf

wird gemacht chef

Aber eigentlich sollte ich Mathe lernen

Basi

Ich kann und ich werde, arbeite dich mal durch und frag wenn Fragen zu fragen sind

HTML

<!DOCTYPE html>
<html>
<head>
  <script>
  function checkInput(){
    var ret = true;
    var name = document.getElementById("name");
    var mail = document.getElementById("mail");
    var text = document.getElementById("text");




    // prüfe namen
    if(name.value == "") {
      document.getElementById("errorMsgName").innerText = "Bitte ausfüllen";
      ret = false;
    } else {
      document.getElementById("errorMsgName").innerText = "";
    }




    // prüfe mail
    if(mail.value == "") {
      document.getElementById("errorMsgMail").innerText = "Bitte ausfüllen";
      ret = false;
    } else {
      document.getElementById("errorMsgMail").innerText = "";
    }




   // prüfe text
    if(text.value == "") {
      document.getElementById("errorMsgText").innerText = "Bitte ausfüllen";
      ret = false;
    } else {
      document.getElementById("errorMsgText").innerText = "";
    }




    return ret;
  }
  </script>
</head>
<body>
  <form action="dateiname" method="get">
    <label for="name">Name: <span id="errorMsgName"></span></label>
    <input type="text" name="name" id="name" />
    <label for="mail">E-Mail: <span id="errorMsgMail"></span></label>
    <input type="text" name="mail" id="mail" />
    <label for="text">Text: <span id="errorMsgText"></span></label>
    <textarea name="text" id="text"></textarea>
    <input type="submit" value="Senden" onclick="return checkInput()" />
  </form>
</body>
</html>

Alles anzeigen

wolf

Ok, ich glaube ich verstehe die Funktion
Mit Js kenn ich mich nicht so aus, gibts die Möglichkeit danach zu suchen ob ein @ in der Mail Adresse vorhanden ist? Sorry zu faul zu googlen

cottton

gibts einiges.
https://www.google.de/search?client=opera&q=javascrip+validate+email&sourceid=opera&ie=UTF-8&oe=UTF-8#q=javascript+validate+email&safe=off&spell=1

@Basiii
btw - was hat es für nen Vorteil, wenn man die Felder client seitig checkt?
Man spart die Requests, klar. Aber sonst hab ich nie nen Grund gefunden das nicht Serverseitig only zu machen.

wolf

Schau mal hier: http://jsfiddle.net/4j2p4/

Ich bin grad zu blöd :o

Und einfach nur der request wegen.. man könnte sie ja noch zusätzlich via php prüfen um gaaaanz sicher zu gehen

Basi

Um E-Mails zu prüfen "einfach" reguläre Ausdrücke:

JavaScript

var re = new RegExp("[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?");
  if(re.test(mail.value) == false){
    document.getElementById("errorMsgMail").innerText = "Eingabe ungültig";
    ret = false;
  } else {
    document.getElementById("errorMsgMail").innerText = "";
  }

@cotton

Zitat von wolf

[...] kann mir jemand n Ansatz machen um die input Felder mit Js zu überprüfen?

Darum der Code, schlussendlich geht es dabei aber um Komfort für den Benutzer, dieser muss sich nämlich nicht mit hin- und hernavigieren im Browser rumärgern und spart sich Abfragen vom Browser ob Daten neu gesendet werden sollen.

Selbstverständlich und IMMER müssen die Daten mit PHP geprüft und gefiltert werden

wolf

Dankeschön Basiii
hat ein bischen gedauert bis ich es so modifiziert hab das es geht aber läuft

DerUser

Des javascript werde ich mir auch mal ansehen

wolf Was issn mit deinem Formular passiert

wolf

ich hab es ohne style stehen gelassen, jetzt passt es wieder
So dubble Post

Also ihr könnt ja noch stylische tips zu meinem Formular geben .. http://wolf.wolfgang-m.de/kontakt.php

Hier der Code ..
http://jsfiddle.net/wolfwortmann/5HZ7j/

Danke Basiii

cottton

zieh mal an deiner textarea das feld größer.
Man kann es bis über den rand zeiehen.
Hab ich bei mit damit gelöst:

CSS

resize: vertical;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

und ich persönlich würde bei den links ect die zeit fürs ein/aus blenden verkürzen.
Das dauert so lange bis sich da was tut. Fühlt sich an, als ob da was "nicht hinterherkommt"

edit:
und
vertical-align: top;
auf die beschriftungen evtl
"message" hängt "unten ab"

wolf

Vielen Dank, alles Top!

Von wem kam den gerade diese geniale E-Mail? "123"

DerUser

Ich wollte noch was zum Responsive Design anmerken, wenn du da grün und 100 hast dann ist es optimal...

http://developers.google.com/speed/pagespee…olfgang-m.de%2F
stimmt ja gar nicht ganz was ich schrieb, 91/100 bei Mobilem Test und 97/100 bei Desktop Test

Jetzt mitmachen!