HTML Anfänger: Kontaktformular

Moin,

hab zwei Fragen zu meinem Kontaktformular

1.) Ich prüfe meine Felder mit PHP ob der User etwas eingegeben hat, dieses mache ich beim Namen so:

  
$fehler = array();  
  
if(empty($_POST['name'])){  
	$fehler[] = "Bitte geben Sie Ihren Namen an";  
}  

Wie mache ich das nun bei einem Select Feld? Mein HTML sieht so aus

  
<label for="betreff">Bereich wählen: *</label>  
<select name="betreff" id="betreff">  
<option value="0" selected="selected">-- Bite wählen</option>  
<option value="Test 1">Test 1</option>  
<option value="Test 2">Test 2</option>  
</select>  

Prüfen ob in POST etwas vorhanden ist brauch ich ja nicht, da IMMER etwas drin steht nämlich "Bitte wählen" Ich möchte gerne dass der User etwas auswählt und nicht "Bitte wählen" ausgewählt hat.

Dass ein User die Felder mit dem Firebug z.B. manipulieren kann, lassen wir jetzt mal außen vor, das würde zu weit gehen, dann müsste ich ja auch noch prüfen ob die Werte in diesem Fall "Test 1" und "Test 2" irgendwo in einem Array stehen.

Meine Frage Nummer 2:
Wie kann ich es erreichen dass ich das Formular mit einer Tastenkombination abschicken kann z.B. mit STRG + ENTER

  1. Hallo,

    <label for="betreff">Bereich wählen: *</label>

    <select name="betreff" id="betreff">
    <option value="0" selected="selected">-- Bite wählen</option>
    <option value="Test 1">Test 1</option>
    <option value="Test 2">Test 2</option>
    </select>

    
    >   
    > Prüfen ob in POST etwas vorhanden ist brauch ich ja nicht, da IMMER etwas drin steht nämlich "Bitte wählen" Ich möchte gerne dass der User etwas auswählt und nicht "Bitte wählen" ausgewählt hat.  
      
    dann tu doch genau das - prüfe, ob der übergebene Wert ungleich "-- Bite wählen" ist. Den Schreibfehler habe ich absichtlich mitkopiert. ;-)  
      
    
    > Meine Frage Nummer 2:  
    > Wie kann ich es erreichen dass ich das Formular mit einer Tastenkombination abschicken kann z.B. mit STRG + ENTER  
      
    Normalerweise brauchst du da gar nichts zu tun. Das Absenden eines Formulars durch Drücken der Enter-Taste ist das übliche Verhalten, das die Browser von sich aus unterstützen (wenn man es nicht absichtlich unterdrückt). Und es ist auch das Verhalten, das die meisten Nutzer erwarten; es ist daher nicht sinnvoll, das auf irgendeine andere Taste oder Tastenkombination "umzubiegen".  
      
    So long,  
     Martin  
    
    -- 
    Ein Snob ist ein Mensch, der sich auf ein Stachelschwein setzt, ohne eine Miene zu verziehen - nur weil ihm jemand gesagt hat, das sei ein Designersessel.  
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    
    1. dann tu doch genau das - prüfe, ob der übergebene Wert ungleich "-- Bite wählen" ist. Den Schreibfehler habe ich absichtlich mitkopiert. ;-)

      Wollte es so machen

      [code lang=php]
      if($_POST['betreff'] != "Bitte wählen") {
      $errors[] = "Bitte ein Betreff wählen";
      }
      [/code

      Nun kommt die Meldung wenn ich etwas "richtiges" gewählt habe. Wenn ich Bitte wählen stehen lasse, dann kommt keine Fehlermeldung.

      Eigentlich stimmt != oder? Hab es hier nachgelesen.

      1. Aloha ;)

        dann tu doch genau das - prüfe, ob der übergebene Wert ungleich "-- Bite wählen" ist. Den Schreibfehler habe ich absichtlich mitkopiert. ;-)

        geht hier imho so nicht... Grund siehe unten (Optionstext ≠ value).

        Eigentlich stimmt != oder? Hab es hier nachgelesen.

        Ja, das stimmt schon. != bedeutet eben ungleich... Nur logisch hakt dein Codebeispiel. Auf deutsch sagt dein Code: Wenn der User etwas anderes ausgewählt hat als "Bitte wählen", dann spucke einen Fehler aus. Das ist sicher NICHT das was du wolltest, sondern genau das Gegenteil davon.

        Aber auch deine Erwartungshaltung, was den übergebenen Wert angeht, stimmt nicht ;)

        Wenn du einem <select> bzw. seinen <option> einen value="..." mitgibst, dann macht das Formular genau das was es soll - nämlich als Wert den value des gewählten Eintrags (option) weiterreichen. Und nicht etwa den Beschreibungstext in option: <option>...</option>

        Dein Code müsste also vielmehr so aussehen:

        if($_POST['betreff'] == "0") {  
            $errors[] = "Bitte einen Betreff wählen!";  
        }
        

        Ich war so frei, das Ausrufezeichen und den Dativ ihrer Bestimmung zukommen zu lassen :D

        Und Bezug nehmend auf eine ähnliche Fragestellung von Yadgar neulich wäre es sicherlich noch besser,

        if($_POST['betreff'] == "0") {  
            $errors['betreff'] = "Bitte einen Betreff wählen!";  
        }
        

        zu wählen. Warum, das darfst du gerne selber in genanntem Thread nachlesen - ein Tipp: Es hat mit benutzerfreundlicher Eingabeaufforderung zu tun. ;)

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
        1. Hallo,

          dann tu doch genau das - prüfe, ob der übergebene Wert ungleich "-- Bite wählen" ist. Den Schreibfehler habe ich absichtlich mitkopiert. ;-)
          geht hier imho so nicht... Grund siehe unten (Optionstext ≠ value).

          hast recht, ich hatte übersehen, dass für den unerwünschten Fall eben doch ein value angegeben war. Lässt man das weg, ist der übertragene Wert nämlich tatsächlich der Inhalt des option-Elements.

          Ciao,
           Martin

          --
          "Hier steht, deutsche Wissenschaftler hätten es im Experiment geschafft, die Lichtgeschwindigkeit auf wenige Zentimeter pro Sekunde zu verringern." - "Toll. Steht da auch, wie sie es gemacht haben?" - "Sie haben den Lichtstrahl durch eine Behörde geleitet."
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        2. Hallo,

          Und Bezug nehmend auf eine ähnliche Fragestellung von Yadgar neulich wäre es sicherlich noch besser,

          if($_POST['betreff'] == "0") {

          $errors['betreff'] = "Bitte einen Betreff wählen!";
          }

            
          Sorry hab deine Nachricht erst jetzt gesehen. Ich habe mir auch schon überlegt ob es nicht besser ist die Felder die ein Fehler enthalten einfach rot zu markieren oder dahinter noch ein X zu setzten. Ich glaube es ist besser wie auch im Artikel geschrieben wurde. Mal schauen ob ich hier viel umbauen muss.
          
  2. @@HTML Anfänger:

    nuqneH

    1.) Ich prüfe meine Felder mit PHP ob der User etwas eingegeben hat, dieses mache ich beim Namen so:

    Dieses machst du hoffentlich nicht nur serverseitig, sondern auch schon clientseitig.

    Eingabefeld als Pflichtfeld mit required-Attribut:

    <input name="name" required>  
    
    

    bzw. polyglott

    <input name="name" required="required"/>  
    
    

    Wird versucht, das Formular abzuschicken, ohne dass das Feld ausgefüllt wurde, zeigt der Browser eine entsprechende Meldung an.*

    Mit der Pseudoklasse :invalid lässt sich das leere Eingabefeld auch hervorheben. Allerdings wirkt diese auch schon anfangs; man will den Nutzern aber nicht suggerieren, sie hätten etwas falsch gemacht, wenn sie noch gar nichts gemacht haben.

    Prüfen ob in POST etwas vorhanden ist brauch ich ja nicht, da IMMER etwas drin steht nämlich "Bitte wählen"

    Das könnte man durchaus für einen Designfehler halten, die Aufforderung als Option zu haben. Allerdings möchte man auch nicht unbedingt eine der „richtigen“ Optionen als Default haben.

    Mit dem disabled-Attribut erreicht man, dass die Aufforderung nicht wieder ausgewählt werden kann, wenn man schon eine „richtige“ Option gewählt hat.

    Wenn die Aufforderung nicht "0", sondern "" als Wert hat, lässt sich auch hier wieder required sinnvoll verwenden:

    <select name="betreff" id="betreff" required>  
      <option value="" selected="selected" disabled>-- Bite wählen</option>  
      <option value="Test 1">Test 1</option>  
      <option value="Test 2">Test 2</option>  
    </select>
    

    Bite ein Bitt.

    Qapla'

    * Safari missachtet die Spec und schickt ein invalides Formular trotzdem ab. Ist der Fehler inzwischen korrigiert? Hab noch keine Lust, auf Yosemite umzusteigen.

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Guten Morgen,

      Dieses machst du hoffentlich nicht nur serverseitig, sondern auch schon clientseitig.

      Eingabefeld als Pflichtfeld mit required-Attribut:

      <input name="name" required>

      
      > bzw. polyglott  
      > ~~~html
      
      <input name="name" required="required"/>  
      
      > 
      
      

      Wird versucht, das Formular abzuschicken, ohne dass das Feld ausgefüllt wurde, zeigt der Browser eine entsprechende Meldung an.*

      dieses wollte ich so umsetzten, hätte mir erstmal die Arbeit mit PHP gespart, als ich dann aber die Fehlermeldungen gesehen habe, habe ich es wieder raus genommen. Ich kann mir jetzt schon denken was von dir / euch kommt, das kommt vom Betriebsystem und der User nimmt das so hin, aber es sollte schon etwas zum Design passen. Diese "hässliche" Meldungen machen alles kapput.

      1. Tach!

        dieses wollte ich so umsetzten, hätte mir erstmal die Arbeit mit PHP gespart, als ich dann aber die Fehlermeldungen gesehen habe, habe ich es wieder raus genommen. Ich kann mir jetzt schon denken was von dir / euch kommt, das kommt vom Betriebsystem und der User nimmt das so hin, aber es sollte schon etwas zum Design passen. Diese "hässliche" Meldungen machen alles kapput.

        Dem Formular ein novalidate geben und dann mit Javascript auswerten wäre eine Alternative (HTML5 Constraint Validation API). Aber das macht noch mehr Arbeit.

        dedlfix.

        1. Aloha ;)

          Naja - ganz altmodisch gehts ja auch. Da das validieren der Eingabe vor dem Abschicken eine reine Komfortfunktion ist, kann man tatsächlich guten Gewissens Javascript dafür nutzen. Wenn man nicht auf die Möglichkeiten von HTML5 zurückgreifen möchte, kann man den Submit-Button zur Laufzeit per JavaScript durch einen normalen Button ersetzen, der zunächst eine JavaScript-basierte Prüfroutine anlaufen lässt welche nur bei fehlerfreier Eingabe das Formular übermittelt.

          User mit deaktiviertem Javascript oder bewusste Manipulationen werden danach wie gehabt vom serverseitigen Prüfmechanismus abgefangen.

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
          ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
          1. Tach!

            Wenn man nicht auf die Möglichkeiten von HTML5 zurückgreifen möchte, kann man den Submit-Button zur Laufzeit per JavaScript durch einen normalen Button ersetzen, der zunächst eine JavaScript-basierte Prüfroutine anlaufen lässt welche nur bei fehlerfreier Eingabe das Formular übermittelt.

            Nicht so kompliziert, ins onsubmit des Formulars reinhängen, reicht doch auch schon.

            User mit deaktiviertem Javascript oder bewusste Manipulationen werden danach wie gehabt vom serverseitigen Prüfmechanismus abgefangen.

            Der muss sowieso stattfinden.

            dedlfix.

            1. Aloha ;)

              Nicht so kompliziert, ins onsubmit des Formulars reinhängen, reicht doch auch schon.

              Hmm, ich bin da aktuell nicht 100% in der Materie... Kann ich denn mit einer Funktion in onsubmit die Übertragung im Fehlerfall noch abbrechen bevor sie rausgeht?

              Grüße,

              RIDER

              --
              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
              ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
              1. Tach!

                Nicht so kompliziert, ins onsubmit des Formulars reinhängen, reicht doch auch schon.
                Hmm, ich bin da aktuell nicht 100% in der Materie... Kann ich denn mit einer Funktion in onsubmit die Übertragung im Fehlerfall noch abbrechen bevor sie rausgeht?

                Ja, das geht schon seit es Javascript gibt. Man kann die Default-Behandlung unterbinden. Früher, als man das noch als Text in das onxxx-Attribut reinschrieb, gab man return false; zurück, heute ruft man event.preventDefault() auf.

                dedlfix.

  3. Guten Abend,

    ich dachte mit HTML5 wird automatisch geprüft ob ich z.B. eine Zahl eingegeben habe. Mein Feld habe ich so gestaltet

      
    <input type="tel" name="telefon" id="telefon" required>  
    
    

    Ich kann auch "iiiiii" schreiben und abschicken, es wird akzeptiert. Möchte dort aber nur Zahlen und maximal ein - oder / haben. Oder ist dieses nicht sinnvoll?

    1. @@HTML Anfänger:

      nuqneH

      Ich kann auch "iiiiii" schreiben und abschicken, es wird akzeptiert. Möchte dort aber nur Zahlen

      Du meinst Ziffern.

      und maximal ein - oder / haben.

      +, (, ) und Leerzeichen hast du vergessen.

      Oder ist dieses nicht sinnvoll?

      Nicht sinnvoll.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. Hallo,

        +, (, ) und Leerzeichen hast du vergessen.

        Oder ist dieses nicht sinnvoll?

        Nicht sinnvoll.

        ok ich werde es nicht prüfen, wer dort Müll rein schreibt bekommt einfach keine Antwort :D Ich hoffe es wird nicht von Idioten ausgenutzt.