cfs525
Neues Mitglied
Hi!
Ich bin noch sehr unerfahren, was die Internet-Programmierung angeht und bin somit bloß Anfänger.
Ich kenne mich mit HTML und CSS aus. Bisher habe ich bloß einige Tabellen gestaltet. Auch arrays habe ich schon angefangen, d.h. arrays in Tabllen eingefügt (mit PHP).
Nun mein Problem: Ich habe vor eine Tabelle für Arbeitszeiten zu machen. Meine Idee ist es nun zwei Eingabefelder zu machen, welche einmal für das Datum und einmal für die Uhrzeit sind. Auf Knopfdruck dann soll die Eingabe automatisch in die Tabelle sortiert werden. Ich habe schon Mal das Optische gemacht (siehe Screenshot). Den Java-Script habe ich aus dem Internet kopiert (=D).
Bitte nur ausführliche und verständliche Antworten (mit Quellcode!).
PS: Wenn ihr Dinge habt die man weglassen oder verbessern kann, könnt ihr mir das gerne schreiben! =)
Mein Code:
<!DOCTYPE html>
<html lang="de">
<head>
<style>
h1 {
text-align: center;
}
body {
font-family: Helvetica, Arial, Geneva, sans-serif;
}
table {
border-collapse: collapse;
width: 17%;
}
th {
height: 20px;
}
td {
height: 10px;
vertical-align: bottom;
}
table, th, td {
border: 2px solid black;
padding: 3px;
text-align: left;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test xD</title>
</head>
<body>
<?php
echo "Datum: ". date('d.m.Y'). "<br><br>";
?>
<p>Datum:</p>
<input type="text" name="datum" title="Datum:" style="color:#888;"
value="TT:MM:JJ" onfocus="inputFocus(this)" onblur="inputBlur(this)" /><br><br>
<script>
function inputFocus(i){
if(i.value==i.defaultValue){ i.value=""; i.style.color="000"; }
}
function inputBlur(i){
if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<p>Uhrzeit:</p>
<input type="text" name="zeit" title="Uhrzeit:" style="color:#888;"
value="SS:MM" onfocus="inputFocus(this)" onblur="inputBlur(this)" /><br><br>
<button type="submit" name="action" value="1">Hinzufügen</button><br><br>
<script>
function inputFocus(i){
if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<table>
<tr>
<th>Datum:</th>
<th>Zeit:</th>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
</table>
</body>
</html>
Ich bin noch sehr unerfahren, was die Internet-Programmierung angeht und bin somit bloß Anfänger.
Ich kenne mich mit HTML und CSS aus. Bisher habe ich bloß einige Tabellen gestaltet. Auch arrays habe ich schon angefangen, d.h. arrays in Tabllen eingefügt (mit PHP).
Nun mein Problem: Ich habe vor eine Tabelle für Arbeitszeiten zu machen. Meine Idee ist es nun zwei Eingabefelder zu machen, welche einmal für das Datum und einmal für die Uhrzeit sind. Auf Knopfdruck dann soll die Eingabe automatisch in die Tabelle sortiert werden. Ich habe schon Mal das Optische gemacht (siehe Screenshot). Den Java-Script habe ich aus dem Internet kopiert (=D).
Bitte nur ausführliche und verständliche Antworten (mit Quellcode!).
PS: Wenn ihr Dinge habt die man weglassen oder verbessern kann, könnt ihr mir das gerne schreiben! =)
Mein Code:
<!DOCTYPE html>
<html lang="de">
<head>
<style>
h1 {
text-align: center;
}
body {
font-family: Helvetica, Arial, Geneva, sans-serif;
}
table {
border-collapse: collapse;
width: 17%;
}
th {
height: 20px;
}
td {
height: 10px;
vertical-align: bottom;
}
table, th, td {
border: 2px solid black;
padding: 3px;
text-align: left;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test xD</title>
</head>
<body>
<?php
echo "Datum: ". date('d.m.Y'). "<br><br>";
?>
<p>Datum:</p>
<input type="text" name="datum" title="Datum:" style="color:#888;"
value="TT:MM:JJ" onfocus="inputFocus(this)" onblur="inputBlur(this)" /><br><br>
<script>
function inputFocus(i){
if(i.value==i.defaultValue){ i.value=""; i.style.color="000"; }
}
function inputBlur(i){
if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<p>Uhrzeit:</p>
<input type="text" name="zeit" title="Uhrzeit:" style="color:#888;"
value="SS:MM" onfocus="inputFocus(this)" onblur="inputBlur(this)" /><br><br>
<button type="submit" name="action" value="1">Hinzufügen</button><br><br>
<script>
function inputFocus(i){
if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<table>
<tr>
<th>Datum:</th>
<th>Zeit:</th>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
</table>
</body>
</html>
