nicht angemeldet
Zwei CSS formatierungen für Textarea verwenden
Der Martin
Gunnar Bittersmann
Matthias ApselHallo,
falls jetzt hier doch noch jemand lesen sollte, 'n schönen 4. Advent!
Bin auf Arbeit und habe ein Problem beim anpassen eines Formulars.
Ist eine der Textboxen beim absenden des Formulars leer dann wird diese rot markiert. Das funktioniert!
Nun möchte ich aber über CSS die Boxen unterschiedlich formatieren (Größe,...)
Leider bekomme ich das nicht hin. Ich gehe mal davon aus, das ich nicht 2x "class" verwenden kann. Aber wie kann ich das lösen?
Gruß Mario
<?php
error_reporting(E_ALL ^ E_NOTICE); //localhost keine Notizen mehr, alle anderen Fehler werden aber angezeigt
?>
<html>
<head>
<style type="text/css">
<!--
.text_halb {
background-color:#FFF;
color: #4d4d4d;
border: 1px solid #c4c4c4;
font: 14px Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif;
padding: 8px 12px;
width: 250px;
}
.text_full {
background-color:#FFF;
color: #4d4d4d;
border: 1px solid #c4c4c4;
font: 14px Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif;
padding: 8px 12px;
width: 500px;
}
textarea.error {
border-color: red;
border-style: solid;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
}
-->
</style>
</head>
<body>
<?php
$errorFelder = array();
$error = null;
$felder = array("content_1", "content_2");
// hier startet die ueberpruefung von den Eingabe im Formular
if(isset($_POST['ueberpruefung'])) {
$error = false;
foreach($felder as $feld) {
if(empty($_POST[$feld])) {
$error = true;
$errorFelder[$feld] = true;
}
}
}
//
if($error === false) {
echo "großes textfeld --- ".$_POST['content_1'];
echo "<br>";
echo "kleines textfeld --- ".$_POST['content_2'];
} else {
if($error === true)
echo "<b>Bitte die Rot markierten Felder ausfüllen!</b>";
?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>">
großes textfeld:<br>
<textarea name="content_1" <?php if(isset($errorFelder['content_1'])) echo 'class="error"'; ?>><?php echo htmlentities($_POST['content_1']);?></textarea> <br>
kleines textfeld:<br>
<textarea class="text_halb" name="content_2" <?php if(isset($errorFelder['content_2'])) echo 'class="error"'; ?>><?php echo htmlentities($_POST['content_2']);?></textarea> <br>
<input type="hidden" name="ueberpruefung" value="1">
<input type="submit" name="Tutorial" value="Absenden">
</form>
<?php
}
?>
</body>
</html>
-
Hi,
falls jetzt hier doch noch jemand lesen sollte, 'n schönen 4. Advent!
danke, dir auch - ist für mich ein Tag wie (fast) jeder andere.
Leider bekomme ich das nicht hin. Ich gehe mal davon aus, das ich nicht 2x "class" verwenden kann. Aber wie kann ich das lösen?
Du kannst zumindest nicht zweimal dasselbe Attribut in einem Element notieren. Aber der Wert des class-Attributs darf selbstverständlich mehrere Klassen durch Leerzeichen getrennt enthalten.
Der gepostete PHP-Code erschwert die Hilfe hier übrigens erheblich. Warum postest du nicht einfach den Code, der beim Browser ankommt, wenn du doch offensichtlich ein clientseitiges Problem hast?großes textfeld:<br>
Wozu diese Verstümmelung des 'ß'?
<textarea class="text_halb" name="content_2" <?php if(isset($errorFelder['content_2'])) echo 'class="error"'; ?>><?php echo htmlentities($_POST['content_2']);?></textarea>
Wenn man den PHP-Code mal auflöst, entsteht beispielsweise folgendes Markup:
<textarea class="text_halb" name="content_2" class="error"[textinhalt]</textarea>
Das class-Attribut taucht zweimal auf, das zweite Vorkommen überschreibt das erste. Notiere beide Klassen in _einem_ Attribut, und du bist einen Schritt weiter.
Schönen Sonntag noch,
Martin--
Um mit einem Mann glücklich zu werden, muss eine Frau ihn sehr gut verstehen und ein bisschen lieben.
Um mit einer Frau glücklich zu werden, muss ein Mann sie sehr lieben und darf gar nicht erst versuchen, sie zu verstehen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
@@Der Martin:
nuqneH
Das class-Attribut taucht zweimal auf, das zweite Vorkommen überschreibt das erste.
Nö.
<p class="foo" class="bar">’Tis a test.</p>.foo {background: red} .bar {background: blue}Sowohl Firefox als auch Chrome als auch Opera zeigen roten Hintergrund.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
<p class="foo" class="bar">’Tis a test.</p>.foo {background: red}
.bar {background: blue}
> > Sowohl Firefox als auch Chrome als auch Opera zeigen roten Hintergrund. ... und die entsprechenden Entwicklertools `<p class="foo">’Tis a test.</p>`{:.language-html} Matthias -- 1/z ist kein Blatt Papier. 
-
-
-
@@inspiron:
nuqneH
Bei fehlerhafter/fehlender Eingabe sollte ein Formular gar nicht erst abgeschickt werden.
Für Pflichtfelder gibt es in HTML5 das @required-Attribut. (s.a. Formulare auf der Höhe der Zeit)
Zur Kennzeichnung der fehlerhaften Stellen gibt es in CSS3 die :invalid-Pseudoklasse.
Das gibt dem Nutzer sofort eine Rückmeldung. Das erspart aber nicht die serverseitige Validierung der Nutzereingaben.
<?php
error_reporting(E_ALL ^ E_NOTICE); //localhost keine Notizen mehr, alle anderen Fehler werden aber angezeigt
?>
<html>Kein DOCTYPE?
<head>
<style type="text/css">
<!--Das Auskommentieren von Style-Bereichen (oder Script-Bereichen) ist bestenfalls sinnlos, möglicherweise auch falsch.
font: 14px Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif;
"Nimbus Sans L" oder FreeSans kommen auf Systemen zur Anwendung, die weder Helvetica noch Arial installiert haben. Welche Systeme sollen das sein?
echo "großes textfeld --- ".$_POST['content_1'];
echo "<br>";
echo "kleines textfeld --- ".$_POST['content_2'];Aua. Weiter unten hast du dran gedacht, das mit
htmlspecialchars()zu bearbeiten. Warum hier nicht?Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)-
Hallo,
danke für die Hilfe!@@inspiron:
nuqneH
Bei fehlerhafter/fehlender Eingabe sollte ein Formular gar nicht erst abgeschickt werden.
Das Formular wird auch nicht versendet wenn ein Feld nicht ausgefüllt wird.
Für Pflichtfelder gibt es in HTML5 das @required-Attribut. (s.a. Formulare auf der Höhe der Zeit)
Zur Kennzeichnung der fehlerhaften Stellen gibt es in CSS3 die :invalid-Pseudoklasse.
Tja HTML5 ist neu für mich, damit kenne ich mich noch nicht aus :-(
Nun wollte ich es nicht NEU machen, sondern erst einmal das vorhandene nutzen.Das gibt dem Nutzer sofort eine Rückmeldung. Das erspart aber nicht die serverseitige Validierung der Nutzereingaben.
<?php
error_reporting(E_ALL ^ E_NOTICE); //localhost keine Notizen mehr, alle anderen Fehler werden aber angezeigt
?>
<html>Kein DOCTYPE?
Ich habe hie nur eine Testdatei rein kopiert. Das eigentliche hat natürlich auch ein DOCTYPE!
<head>
<style type="text/css">
<!--Das Auskommentieren von Style-Bereichen (oder Script-Bereichen) ist bestenfalls sinnlos, möglicherweise auch falsch.
Ich wollte jetzt nicht noch extra die style.css rein kopieren. Und das Original Formular ist noch umfangreicher.
font: 14px Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif;"Nimbus Sans L" oder FreeSans kommen auf Systemen zur Anwendung, die weder Helvetica noch Arial installiert haben. Welche Systeme sollen das sein?
Das wurde wohl mal mit einem MAC-Webprogramm erstellt.
echo "großes textfeld --- ".$_POST['content_1'];
echo "<br>";
echo "kleines textfeld --- ".$_POST['content_2'];Aua. Weiter unten hast du dran gedacht, das mit
htmlspecialchars()zu bearbeiten. Warum hier nicht?Wie schon gesagt, ist nur eine Testdatei die local auf meinem Rechner läuft, damit ich nicht im Original fummeln muß.
Qapla'
Die Kollegen wollten eine Markierung der nicht ausgefüllten Pflichtfelder beim absenden des Formulars. Was ja auch jetzt funktioniert.
Nur bekomme ich über CSS die Textboxen nicht formatiert!Gruß
-
Hallo,
als ich hab mir das mal genauer angeschaut. Ist ja wirklich ne Vereinfachung und wenn man es mal gesehen auch nicht so schlimm.
Nur funktioniert "required" bei mir nicht (Safari Version 6.0.2)
Es werden keine Meldung bei nicht ausgefüllter Felder angezeigt.Gruß
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title>HTML5 Layout</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <form action="" method="post"> <div class="outer_frame"> <div class="inner_frame"> <table style="width:580px;"> <tr> <td class="label"> Name </td> <td> <input type="text" class="text_field" placeholder="Name" required="required" /> </td> </tr> <tr> <td> <div class="label">E-Mail</div> </td> <td> <input type="email" class="text_field" placeholder="email@example.com" required="required" /> </td> </tr> <tr> <td class="label"> Geschlecht </td> <td> <select class="select_field"> <option value="m">Männlich</option> <option value="w">Weiblich</option> </select> </td> </tr> <tr> <td class="label" valign="top"> Anliegen </td> <td> <textarea class="textarea" required="required"></textarea> </td> </tr> </table> <div class="button_container"> <button class="submit_btn" type="submit"> Absenden </button> <div style="clear:both;"></div> </div> </div> </div> </form> </body> </html>-
@@inspiron:
nuqneH
Nur funktioniert "required" bei mir nicht (Safari Version 6.0.2)
Die Kennzeichnung mittels
:invalidfunktioniert.Es werden keine Meldung bei nicht ausgefüllter Felder angezeigt.
Das allerdings nicht. Undas Formular wird abgeschickt.
Man kann jedem Apple-Nutzer nur raten, sich einen vernünftigen Browser zu installieren.
Apple, das neue Microsoft.
<td class="label">
Name
</td>
<td>
<input type="text" class="text_field" placeholder="Name" required="required" />
</td>Bei dir fehlt immer der Bezug zwischen Label und Eingabefeld. Also @for für label-Elemente mit Wert der @id des zugehörigen input-Elements.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)-
@@Gunnar Bittersmann:
nuqneH
Es werden keine Meldung bei nicht ausgefüllter Felder angezeigt.
Das allerdings nicht. Undas Formular wird abgeschickt.
Unding, das.
_Und das_ hatten wir schon mal.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry) -
Man kann jedem Apple-Nutzer nur raten, sich einen vernünftigen Browser zu installieren.
Apple, das neue Microsoft.
Hallo,
danke noch einmal für die Hilfe.
Andere Software (Browser) installieren dürfen wir nicht.Ich habe jetzt alle Textboxen gleich groß gemacht, ich wollte zwar zwei verschieden große Textboxen, aber es funktioniert.
Danke, schöne Weihnachten & viele Geschenke! ;-)
textarea { background-color:#FFF; color: #4d4d4d; border: 1px solid #c4c4c4; font: 14px Arial; padding: 8px 12px; height: 100px; width: 400px; } textarea.error { border-color: red; border-style: solid; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; }<li> <label for="input_6" class="text">Textarea 3:</label> <textarea id="input_6" name="input_6" <?php if(isset($errorFelder['input_6'])) echo 'class="error"'; ?>><?php echo htmlentities($_POST['input_6']);?></textarea> </li> <li> <label for="input_7" class="text">Textarea 4:</label> <textarea id="input_7" name="input_7" <?php if(isset($errorFelder['input_7'])) echo 'class="error"'; ?>><?php echo htmlentities($_POST['input_7']);?></textarea> </li>
-
-
-
-