Dynamische Webseiten

Virtueller Campus Projekt, PHBern

StartseiteJavaScriptCSSJSPPHPMySQLDrucken

Schriftgrösse: kleiner - zurücksetzen - grösser

Gestalten von Formularfelder

Folgende Beispiele funktionieren leider nur unbefriedigend im Internet Explorer:-( Sie entsprechen aber alle dem Cascading Style Sheets, level 2 Standard! Browser der Mozilla Familie (Mozilla, Netscape, Camino, ect.) unterstützen alle diesen Standard.

<html>
<head>


<style type="text/css">

input {
    font: normal 16px Comic Sans MS,Arial,Helfetica,sans-serif;
    color: black;
    border: 1px solid blue;
    background-color: #CCC;
}

input:focus {
    background-color: #99CCCC;
    color: red;
}
</style>

</head>

<body>
<form name="form1" method="post" action="">
<table>
<tr>
    <td>Name:</td><td><input type="text" name="textfield"></td>
</tr>
<tr>
    <td>Vorname:</td><td><input type="text" name="textfield"></td>
</tr>
<tr>
    <td>email:</td><td><input type="text" name="textfield"></td>
</tr>
</table>
</form>
</body>
</html>

Beispiel zeigen

CSS Online Bearbeiten

<html>
<head>

<style type="text/css">

textarea, input {
    font: normal 16px Comic Sans MS,Arial,Helfetica,sans-serif;
    color: #000;
    border: 1px solid #FF6600;
    background-color: #FFF;
}

textarea:focus, input:focus {
    background-color: FF9900;
    color: #FFF;
}

input.button {
color: #000;
background-color: FF6600;
border-color: FF6600;
border-style: outset;
margin: 2em 0em 0em 0em;
padding: 0em 0.5em 0em 0.5em;
border-width: 2;
}

input.button:hover {
    background-color: FF9900;
}

input.button:active {
border-style: inset;
}
</style>

</head>

<body>
<form name="form1" method="post" action="">
<table>
<tr>
    <td>Name:</td><td><input type="text" name="name"></td>
</tr>
<tr>
    <td>Vorname:</td><td><input type="text" name="vorname"></td>
</tr>
<tr>
    <td>email:</td><td><input type="text" name="email"></td>
</tr>
<tr>
    <td>Kommentar:</td><td><textarea name="Kommentar"></textarea></td>
</tr>
<tr>
    <td>&nbsp;</td><td><input class="button" type="submit" name="Submit" value="Abschicken"></td>
</tr>
</table>
</form>
</body>
</html>

Beispiel zeigen

CSS Online Bearbeiten