Formularfelder

    Hallo, ich hab folgendes Problem hab vorher Formularfelder gemacht in der simulation.html und hab den Code validiert wo der Validator mir aber sagte dass 28 Fehler ihn Code seien, wo ich aber keine Fehler gefunden habe. Und außerdem weiß ich auch nicht ob ich richtig vorgehe, denn dass letzte mal als ich ein Formular gemacht habe ist schon wieder 2 Jahre her. Außerdem möchte ich ein Formularfeld wie im Screenshot zu sehen machen, hab schon zahlreiche Seiten durchsucht aber nicht dass passende Formularfeld gefunden. Möchte dass das Formular dann per Email übersandt wird, muss ich eigentlich erst die Formularfelder machen und dann die PHP Datei oder ist dass egal? Möchte dass das Formular mit dem gekennzeichneten Sternen ausgefüllt werden muss und wenn dass Formular mit den * nicht ausgefüllt worden ist, dass es nicht abgesendet werden kann. Meines Wissens ist es besser wenn man es in PHP macht, denn in HTML geht es nur mit Javascripts und wenn einer mal Javascripts nicht aktiviert hat, ist es eigentlich um sonst.


    simulation.html:


    Edit: Code vergessen

    Zitat von "hume"

    Hallo, ich hab folgendes Problem hab vorher Formularfelder gemacht in der simulation.html und hab den Code validiert wo der Validator mir aber sagte dass 28 Fehler ihn Code seien, wo ich aber keine Fehler gefunden habe.


    Du hast dir den Code validieren lassen.. und weißt nicht wo der Fehler liegt?
    Lesen kann Leben retten :P


    Zitat von "W3C-Validator"

    Line 39, Column 50: document type does not allow element "select" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag


    Übersetzen wir mal fix..


    Zitat

    Zeile 39, Spalte 50: Dokument Typ erlaubt nicht das Element "select" an dieser Stelle. Es fehlt ein "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.


    So.. jetzt machst du entweder das, was dir der Validator sagt und packst die ganzen Sachen in einen Tag dieser aufgelisteten Art, oder du änderst den Doctype einfach um :)
    Ich hab einfach den HTML5 Doctype verwendet und mir wurde nur ein Error angezeigt, wegen deinen Sonderzeichen^^ :)

    Zitat von "HTML5 - Doctype"


    <!DOCTYPE html>

    Zitat

    Du hast dir den Code validieren lassen.. und weißt nicht wo der Fehler liegt?
    Lesen kann Leben retten


    Nein, ich meine warum dass ein Fehler sein sollte? Vom Validator.


    Zitat

    So.. jetzt machst du entweder das, was dir der Validator sagt und packst die ganzen Sachen in einen Tag dieser aufgelisteten Art, oder du änderst den Doctype einfach um :)
    Ich hab einfach den HTML5 Doctype verwendet und mir wurde nur ein Error angezeigt, wegen deinen Sonderzeichen^^ :)


    Ja, dass mach ich, den Doctype ändere ich lieber nicht, meines Wissens verwendet fast niemand den HTML 5 Doctype da es mit Browsern noch Probleme gibt oder ist dass nur ein Gerücht und wenn ich HTML Doctype verwenden würde, muss ich dass ja in den anderen HTML Dateien auch ändern oder nicht? Verstehe jetzt nicht warum er bei Sonderzeichen einen Fehler ausgibt...

    Zitat von &quot;hume&quot;


    Nein, ich meine warum dass ein Fehler sein sollte? Vom Validator.


    Weil du wahrscheinlich einen Code geschrieben hast, der nicht den W3C-Normen entspricht. Der Validator prüft nach diesen Normen und wenn er was findet, was nicht richtig ist - ZACK Fehler. In den allermeisten Fällen steht die Lösung in der Fehlermeldung drin,


    Zitat von &quot;hume&quot;

    Verstehe jetzt nicht warum er bei Sonderzeichen einen Fehler ausgibt...


    Wahrscheinlich, weil du sie falsch oder gar nicht maskiert hast.


    LG

    wie ich es verstanden habe, kann es zu Problemen mit HTML5 und den Browsern mit den Neuerungen kommen, nicht aber bei den schon in "alten" funktionierenden Auszeichnungen!?


    Bitte korrigiert mich!


    fG


    Peter

    Zitat

    wie ich es verstanden habe, kann es zu Problemen mit HTML5 und den Browsern mit den Neuerungen kommen, nicht aber bei den schon in "alten" funktionierenden Auszeichnungen!?


    Korrekt...

    Ich sehe kein Problem in der Verwendung des neuen Doctypes von HTML5. Was du einfach vergessen hast, ist die Festsetzung des Zeichensatzes, wahrscheinlich deshalb hat der Validator bei den Sonderzeichen Fehler ausgespuckt. Weitere Fehler war, dass du vergessen hast, den "form"-Tag zu schliessen:


    Code
    <form action="simulation.php">
...
</form>


    So sieht das Grundgerüst bei HTML5 aus:


    Zitat

    Ich sehe kein Problem in der Verwendung des neuen Doctypes von HTML5. Was du einfach vergessen hast, ist die Festsetzung des Zeichensatzes, wahrscheinlich deshalb hat der Validator bei den Sonderzeichen Fehler ausgespuckt. Weitere Fehler war, dass du vergessen hast, den "form"-Tag zu schliessen:


    Muss ich dann die anderen HTML Dateien auch mit dem HTML Doctypes 5 verwenden oder darf ich da den alten verwenden oder müssen alle Dateien denn gleichen Doctypes tragen? Weiteres wenn ich den Doctypes 5 verwende muss ich nicht dann die neuen Elemente von HTML verwendet oder ist dass jeden selbst überlassen?


    Code
    <link rel="stylesheet" type="text/css" href="#" />
<link rel="shortcut icon" type="image/x-icon" href="#" />


    Gehört dass auch noch zu HTML5? Der Aufbau verwirrt mich ein wenig. Ich hätte gemeint dass shortcut icon ist für dass Favicon da? Ist dass möglich dass ich auch alle Fehler behebe mit dem Doctype XHTML 1.0Strict (derzeit verwendet)


    Ich hätte gemeint der Aufbau von Doctypes von HTML5 ist so?

    HTML
    <!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>


    Hab mal ein wenig ausgebessert und die Tags geschlossen und nun festgestellt dass statt dass es weniger Fehler werden immer mehr Fehler kommen ^^ Poste mal den Code, hab keinen Überblick mehr...


    Ich habe mir den Code einmal angeschaut und ich meine, dass du unbedingt mehr Wert auf eine sauberere Darstellung legen musst. Und das gesamte Formular kann nicht funktionieren. Wie ich sehe, gehört das ganze Formular in eine Nachricht. Da kann es nicht sein, dass du mehrere "form"-Tags hast. Und ich rate Dir dich einmal genau mit Formularen zu beschäftigen, denn es ist ein relativ schwieriges Thema. Vor allem spielen folgende Elemente im Zusammenhang mit dem Design und der Technik eine wichtige Rolle, also besonders darauf ein Auge werfen:


      fieldset


      legend


      label


      for


      id

    Zitat

    Ich habe mir den Code einmal angeschaut und ich meine, dass du unbedingt mehr Wert auf eine sauberere Darstellung legen musst. Und das gesamte Formular kann nicht funktionieren. Wie ich sehe, gehört das ganze Formular in eine Nachricht. Da kann es nicht sein, dass du mehrere "form"-Tags hast. Und ich rate Dir dich einmal genau mit Formularen zu beschäftigen, denn es ist ein relativ schwieriges Thema. Vor allem spielen folgende Elemente im Zusammenhang mit dem Design und der Technik eine wichtige Rolle, also besonders darauf ein Auge werfen:


    fieldset
    legend
    label
    for
    id


    Zum Thema Formular kannst du eine Seite empfehlen?

    Mit dem HTML 5 Doctype definierst du das Dokument lediglich als HTML 5 Dokument. Da in HTML 5 Eigenschaften aus XHTML und HTML 4 zusammenfließen, kann man damit Fehler vermeiden, die in dem einen Doctype erlaubt sind und in dem anderen nicht. Trotzdem sollte man wissen, was den HTML 5 Doctype ausmacht. Das findet man heraus beim W3C oder auf einer anderen seriösen Seite, wo sich jemand die Mühe gemacht hat, das ganze so aufzubereiten dass man es besser versteht. Da muss man ein bisschen suchen, solche Seiten gibt es aber. Wenn man den HTML 5 Doctype verwendet heißt das aber NICHT, dass man neue Elemente wie canvas oder video verwenden MUSS. Mit der Interpretation dieser Elemente haben manche Browser noch Probleme, aber eigentlich alle aktuellen Browser können die Regeln des HTML 5 Doctypes umsetzen.


    Der Doctype selbst sieht so aus:

    Code
    <!DOCTYPE html>


    Vorteil: Leicht zu merken. Das ganze kommt in die erste Zeile des Dokuments (es sei denn man startet noch eine Session oder so..).
    Das HTML-Grundgerüst sieht genauso aus wie immer:


    HTML
    <html>
<head>
</head>
<body>
</body>
</html>


    Dazu gehören normalerweise IMMER auch eine Zeile für den Titel und ein Stylesheet-Link, dazu die entsprechenden meta-Tags die Sprache, Zeichensatz etc. festlegen.
    Bei den meisten Seiten gibt es noch ein Favicon, also gehört der Link normalerweise auch rein. Ist aber kein MUSS, sieht nur besser aus, speziell wenn irgendwas als Lesezeichen abgespeichert wird oder so. Ebenso ist der Stylesheet-Link kein MUSS, gibt ja auch Leute, die ohne Stylesheets arbeiten.. Wers gern schwarz-weiß-blau mag.. ;)


    Nur um mal eine Grundlage zu schaffen, bevor jetzt hier dazu auch noch Fragen aufkommen.


    hume: Natürlich solltest du den Doctype auf allen Seiten gleich haben.
    Und jetzt nochmal eine Sache bei der es ums Prinzip geht:


    Der Sinn ist es, dass man sich einen Dokumententypen auswählt, mit dem man arbeiten möchte. Der Sinn ist NICHT, dass man einen Code schreibt, dann guckt welcher Doctype die wenigsten Fehler produziert und dann probiert diese Fehler auszumerzen. Wenn also der liebe hume mit den Validator-Fehlern kommt und die erste Antwort sagt ihm (sinngemäß): "Nimm den HTML5 Doctype, dann hast du weniger Fehler" dann ist das eher KONTRAPRODUKTIV, weil dann lernt er nie den Unterschied und WARUM der Validator ihm da eigentlich Fehler ausspuckt. Ich bezweifle stark, dass er nochmal geguckt hat, wo denn mit dem vorherigen Doctype seine Fehler waren. Nur mal so als Anregung.


    Gruß
    Laura

    Zitat

    hume: Natürlich solltest du den Doctype auf allen Seiten gleich haben.


    Also bleibt sich dass im Prinzip gleich welchen Doctype ich verwende? Ob jetzt HTML5 oder den meinen XHTML 1.0 Strict?
    Wenn ich also HTML5 verwenden würde, kann ich auch die alten Befehle noch nutzen, versteh ich dass richtig und ist dass eigentlich dann richtig? Ich komme nochmal auf dass Formular zurück, ist der Aufbau von <!-- m --><a class="postlink" href="http://www.html-seminar.de/formulare.htm">http://www.html-seminar.de/formulare.htm</a><!-- m --> immer gleich bezüglich <form action="" method="" target=""> und geschlossener Tag dann </form>


    Bei SELFHTML ist mir aufgefallen dass <p> </p> benutzt wurde, ist dass eigentlich richtig? <p> </p> hätte ich gemeint ist nur dazu da einen Text auszuzeichnen.


    Ist es so richtig?

    Code
    <form action="" method="" target="">
select name="form" size="3">
      <option>Heino</option>
      <option>Michael Jackson</option>
      <option>Tom Waits</option>
      <option>Nina Hagen</option>
      <option>Marianne Rosenberg</option>
    </select>
</form>
    Zitat von &quot;hume&quot;


    Bei SELFHTML ist mir aufgefallen dass <p> </p> benutzt wurde, ist dass eigentlich richtig? <p> </p> hätte ich gemeint ist nur dazu da einen Text auszuzeichnen.


    Falsch.


    <p> steht für paragraph, das bedeutet Absatzt.
    Mit <p></p> zeichnest du einen Absatzt aus, das kann, muss aber nicht unbedingt Text sein.


    Gruss
    Elroy

    Zitat

    <p> steht für paragraph, das bedeutet Absatzt.
    Mit <p></p> zeichnest du einen Absatzt aus, das kann, muss aber nicht unbedingt Text sein.


    OK, jetzt weiß ich auch wieder was neues. Hab mal mit dem Formular von vorne nochmal angefangen (derzeit mit einem Feld :D dass ich weiß was nicht stimmt) Verstehe aber nicht warum mir der Validator schon wieder Fehler auspuckt. Der Aufbau ist meiner Meinung eigentlich richtig, es wurden auch alle Tags geschlossen. Wenn ich falsch liege, korrigiert mich dann bitte.


    ..man sehe sich noch mal die Fehler die der Validator ausspuckt an:

    • Line 39, Column 3: unclosed start-tag requires SHORTTAG YES
      <fieldset>
      The construct <foo<bar> is valid in HTML (it is an example of the rather obscure “Shorttags” feature) but its use is not recommended. In most cases, this is a typo that you will want to fix. If you really want to use shorttags, be aware that they are not well implemented by browsers.

      • Anschauung des Quellcodes in Zeile 39, Spalte 3:
        Code
        <form class="form" action="mailto:huml@bhkwpartner.de" method="post" enctype="text/plain" 
  <fieldset>
  <select name="form" size="2">
      • Da der Fehler nicht direkt in Zeile 39, Spalte 3 zu finden ist schaut man sich den Code vorher genauer an..

        Code
        <form class="form" action="mailto:huml@bhkwpartner.de" method="post" enctype="text/plain"


      • am ende fehlt ein >. Für den Browser sieht das wie vom Validator beschrieben nach einer art <foo<bar> aus :) Richtig:
        Code
        <form class="form" action="mailto:huml@bhkwpartner.de" method="post" enctype="text/plain">


    • Line 43, Column 64: document type does not allow element "option" here
      <option value="Gewerbe(B&auml;cker,Metzger etc.)">
      The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).


      One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

      • Kurz und Schmerzlos:
        Man beendet Tags, die man nicht noch mal extra schließen muss mit einem /> .
        (Beispiel für andere Art: <strong> muss man z.B. wieder mit dem selben Tag schließen, wie man ihn begonnen hat (<strong>{Text}</strong>).)
        Code
        So nicht:
  <option value="Gewerbe(B&auml;cker,Metzger etc.)">




So muss es sein:
  <option value="Gewerbe(B&auml;cker,Metzger etc.)" />


    • Und schon haben wir in dem wir die Meldungen des Validators gelesen haben einen Validen Code.

    Ja, jetzt ist der Code valide, folgendes Problem ich hab mir mal den Quellentext von html-seminar.de unter Formulare angeschaut, da ich ein Auswahlfenster brauche und hab dass dann entsprechend korrigiert, also nicht so angepasst wie auf der Seite zu sehen ist sondern nur den Aufbau des Auswahlfensters nun folgendes Problem auf der html-seminar.de Seite wird dass Auswahlfenster richtig angezeigt und man kann auch auswählen, ich hab es genau so übernommen und natürlich dann die Felder verändert, aber bei mir wird dass Feld sehr groß angezeigt obwohl size""> Hab auch mal einige Screenshots angehängt.


    Code dann korrigiert:


    Dann gib doch anstelle von size="" eine kleine Angabe an?
    Vielleicht interpretiert dein Browser das á la "Nimm dir soviel wie du brauchst"?


    Ansonsten definiere select über CSS.
    So kannst du ihm z.B. anstelle von size eine feste Breite geben :)

    Code
    /* Das ist nur ein Beispiel! */
select.Test {
     width: 200px;
     height: auto;
     padding: 0.35em;
     margin: 0.25em auto;
     ...
}
    Zitat von &quot;Sarkkan&quot;

    Dann gib doch anstelle von size="" eine kleine Angabe an?
    Vielleicht interpretiert dein Browser das á la "Nimm dir soviel wie du brauchst"?


    Nicht nur vielleicht, sondern ganz bestimmt. Wenn du NICHTS angibst, kann der Browser ja auch nicht wissen, wie breit du es denn haben möchtest.


    Zitat von &quot;hume&quot;


    Wenn wir schonmal dabei sind: Das <p> hier sollte eigentlich kein <p> sein, sondern etwas anderes, und es sollte auch woanders stehen.
    Falls du nicht weißt, was ich meine, solltest du dir die Formulare nochmal angucken. html-seminar.de und SelfHTML helfen weiter ;)


    LG

    Zitat

    Nicht nur vielleicht, sondern ganz bestimmt. Wenn du NICHTS angibst, kann der Browser ja auch nicht wissen, wie breit du es denn haben möchtest.


    Ja, hab ich gemacht, die Breite stimmt die Größe passt nun auch, hab mir dass mal mit <p> </p> angeschaut und nun müsste es normal passen. Code ist valide. Ein kleines Problem gibt es noch dass Auswahlfenster wird zwar angezeigt aber der Inhalt nicht???


    simulation.html:


    design.css

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden