4
HTML Formular Zwischenspeicher
Hallo Forum,
ich habe mir ein kleines Formular erstellt, was Ansicht nicht das Problem war.
Das Formular beinhaltet
Name
Adresse
Telefonnummer
Problembeschreibung
...
sowie einen Reset Button und einen Zwischenspeicher/ Copy Button.
im Moment hat der Zwischenspeicher Button >>> eine Reset Funktion
Mir geht es generell um den Zwischenspeicher Button.
Ziel ist es, die eingegeben Formularinhalte in den Zwischenspeicher in einem sauberen Format hinzubekommen --> damit ich den Inhalt via paste im sauben Format wo anders einfügen kann.
Könnt Ihr mir da weiterhelfen?
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test 0.1</title>
<style type="text/css">
<!--
.Stil1 {
font-size: large;
font-weight: bold;
color: #000099;
font-family: Calibri;
}
.Stil2 {font-size: xx-large}
.Stil3 {
color: #0000CC;
font-family: Calibri;
}
.Stil10 {
font-size: 12px
}
.Stil12 {font-family: Calibri; font-size: 12px; }
.Stil13 {font-size: 10px}
-->
</style>
</head>
<body>
<form action="" method="get" name="Störungsmeldung">
<table width="594" border="1">
<tr>
<td colspan="2" bgcolor="#FF6600"><div align="center" class="Stil1">
<p class="Stil2">Test 0.1</p>
</div></td>
</tr>
<tr>
<td width="284"><span class="Stil12">
<label>Kundennummer * </label>
</span></td>
<td width="294"><input name="1" type="text" id="1" /></td>
</tr>
<tr>
<td><span class="Stil12">
<label>Vor - und Nachname *</label>
</span></td>
<td><input name="3" type="text" id="3" /></td>
</tr>
<tr>
<td><span class="Stil12">
<label>Straße | Hausnummer *</label>
</span></td>
<td><input name="4" type="text" id="4" /></td>
</tr>
<tr>
<td><span class="Stil12">
<label>PLZ | Ort *</label>
</span></td>
<td><input name="5" type="text" id="5" /></td>
</tr>
<tr>
<td><span class="Stil12">
<label>gültige Rückruf -Telefonnummer *</label>
</span></td>
<td><input name="6" type="number" id="6" /></td>
</tr>
<tr>
</select></td>
</tr>
<tr>
<td><span class="Stil12">
<label>genaue Problembeshreibung *</label>
</span></td>
<td><span class="Stil12">
<textarea name="8" id="8" cols="45" rows="5"></textarea>
</span></td>
</tr>
<tr>
<td><INPUT type=reset onclick=clearform() value="Zwischenspeicher"></td>
<td><input type=reset onclick=clearform() value="Eingabe reseten"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
</table>
<p> </p>
</form>
</body>
</html>
ich habe mir ein kleines Formular erstellt, was Ansicht nicht das Problem war.
Das Formular beinhaltet
Name
Adresse
Telefonnummer
Problembeschreibung
...
sowie einen Reset Button und einen Zwischenspeicher/ Copy Button.
im Moment hat der Zwischenspeicher Button >>> eine Reset Funktion
Mir geht es generell um den Zwischenspeicher Button.
Ziel ist es, die eingegeben Formularinhalte in den Zwischenspeicher in einem sauberen Format hinzubekommen --> damit ich den Inhalt via paste im sauben Format wo anders einfügen kann.
Könnt Ihr mir da weiterhelfen?
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test 0.1</title>
<style type="text/css">
<!--
.Stil1 {
font-size: large;
font-weight: bold;
color: #000099;
font-family: Calibri;
}
.Stil2 {font-size: xx-large}
.Stil3 {
color: #0000CC;
font-family: Calibri;
}
.Stil10 {
font-size: 12px
}
.Stil12 {font-family: Calibri; font-size: 12px; }
.Stil13 {font-size: 10px}
-->
</style>
</head>
<body>
<form action="" method="get" name="Störungsmeldung">
<table width="594" border="1">
<tr>
<td colspan="2" bgcolor="#FF6600"><div align="center" class="Stil1">
<p class="Stil2">Test 0.1</p>
</div></td>
</tr>
<tr>
<td width="284"><span class="Stil12">
<label>Kundennummer * </label>
</span></td>
<td width="294"><input name="1" type="text" id="1" /></td>
</tr>
<tr>
<td><span class="Stil12">
<label>Vor - und Nachname *</label>
</span></td>
<td><input name="3" type="text" id="3" /></td>
</tr>
<tr>
<td><span class="Stil12">
<label>Straße | Hausnummer *</label>
</span></td>
<td><input name="4" type="text" id="4" /></td>
</tr>
<tr>
<td><span class="Stil12">
<label>PLZ | Ort *</label>
</span></td>
<td><input name="5" type="text" id="5" /></td>
</tr>
<tr>
<td><span class="Stil12">
<label>gültige Rückruf -Telefonnummer *</label>
</span></td>
<td><input name="6" type="number" id="6" /></td>
</tr>
<tr>
</select></td>
</tr>
<tr>
<td><span class="Stil12">
<label>genaue Problembeshreibung *</label>
</span></td>
<td><span class="Stil12">
<textarea name="8" id="8" cols="45" rows="5"></textarea>
</span></td>
</tr>
<tr>
<td><INPUT type=reset onclick=clearform() value="Zwischenspeicher"></td>
<td><input type=reset onclick=clearform() value="Eingabe reseten"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
</table>
<p> </p>
</form>
</body>
</html>
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 2911528853
Url: https://administrator.de/contentid/2911528853
Printed on: April 25, 2024 at 14:04 o'clock
4 Comments
Latest comment
Moin.
Bitte in Zukunft den Code nicht als Text einstellen.
Speziell (Zwischenspeicher) Browserspeicher: https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage
Generell Webformulare: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare
Gruß
JoeToe
Bitte in Zukunft den Code nicht als Text einstellen.
Speziell (Zwischenspeicher) Browserspeicher: https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage
Generell Webformulare: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare
Gruß
JoeToe
Moin,
Den reset-Button kannst du ersatzlos entfallen lassen, der ist unnötig und sorgt nur für Frust beim Benutzer wenn er versehentlich da drauf klickt - falls er das Formular nicht abschicken will kann er die Seite auch einfach neu laden oder einfach schließen.
Der andere Button wäre gerne ein richtiger <button> mit type=button - solche Buttons sind dafür gedacht Javascript-Aktionen auszulösen (idealerweise sind sie bei deaktiviertem Javascript auch garnicht zu sehen).
Das ganze geht nur mit Javascript wie sieht es da mit den Kenntnissen bei dir aus? Zum Beschreiben der Zwischenablage z.B. gibt es Clipboard.writeText() - was du aber unter einem sauberen Format verstehst, weiß ich nicht (grundsätzlich lässt sich per Javascript aber ein beliebiger String mit den Werten aus dem Formular zusammenbauen).
Zum restliche Code noch ein paar Hinweise:
Doctype ist veraltet, verwende einfach <!DOCTYPE html> und gibt in <html> die verwendete Sprache an (xmlns kann weg).
einfach nur <style>, type-Attribut und Kommentar entfallen ersatzlos.
Schlechter Name - verwende Klassennamen die die Funktion beschreiben, nicht das Aussehen - außerdem können auch td-Elemente ein class-Attribut haben, ein extra <span> ist da nicht nötig. Außerdem: Pixel sind fast immer die falsche Einheit, verwende em (oder rem) und bei der Schriftart musst du noch eine generische Schriftfamilie (z.B. sans-serif) angeben, nicht jeder hat Calibri als Schriftart (ich z.B. nicht).
Es fehlt noch die Angabe des Viewports.
das action-Attribut darf nicht leer sein (in HTML(5), im veralteten xhtml ist es richtig), als Methode ist post besser und es gibt keinen Grund Umlaute zu verstümmeln - als Wert von name-Attributen würde ich Umlaute aber ganz vermeiden.
Das label-Element braucht noch ein for-Attribut mit (hier) 1 als Wert (identisch mit dem id-Attribut des dazugehörigen input-Elements sonst kann der Browser Beschriftung und Feld nicht zuordnen. Als id- und name-Attribut würde ich aber sprechende Namen verwenden, das macht den Code lesbarer und vereinfacht die Verarbeitung der Daten da klar ist was in welchem Element steckt.
Gruß
Tobias
Zitat von @Waicodrei:
Das Formular beinhaltet […]
sowie einen Reset Button und einen Zwischenspeicher/ Copy Button.
Das Formular beinhaltet […]
sowie einen Reset Button und einen Zwischenspeicher/ Copy Button.
Den reset-Button kannst du ersatzlos entfallen lassen, der ist unnötig und sorgt nur für Frust beim Benutzer wenn er versehentlich da drauf klickt - falls er das Formular nicht abschicken will kann er die Seite auch einfach neu laden oder einfach schließen.
Der andere Button wäre gerne ein richtiger <button> mit type=button - solche Buttons sind dafür gedacht Javascript-Aktionen auszulösen (idealerweise sind sie bei deaktiviertem Javascript auch garnicht zu sehen).
Ziel ist es, die eingegeben Formularinhalte in den Zwischenspeicher in einem sauberen Format hinzubekommen --> damit ich den Inhalt via paste im sauben Format wo anders einfügen kann.
Das ganze geht nur mit Javascript wie sieht es da mit den Kenntnissen bei dir aus? Zum Beschreiben der Zwischenablage z.B. gibt es Clipboard.writeText() - was du aber unter einem sauberen Format verstehst, weiß ich nicht (grundsätzlich lässt sich per Javascript aber ein beliebiger String mit den Werten aus dem Formular zusammenbauen).
Zum restliche Code noch ein paar Hinweise:
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
Doctype ist veraltet, verwende einfach <!DOCTYPE html> und gibt in <html> die verwendete Sprache an (xmlns kann weg).
<style type="text/css">
<!--
<!--
einfach nur <style>, type-Attribut und Kommentar entfallen ersatzlos.
.Stil1 {
Schlechter Name - verwende Klassennamen die die Funktion beschreiben, nicht das Aussehen - außerdem können auch td-Elemente ein class-Attribut haben, ein extra <span> ist da nicht nötig. Außerdem: Pixel sind fast immer die falsche Einheit, verwende em (oder rem) und bei der Schriftart musst du noch eine generische Schriftfamilie (z.B. sans-serif) angeben, nicht jeder hat Calibri als Schriftart (ich z.B. nicht).
</head>
Es fehlt noch die Angabe des Viewports.
<form action="" method="get" name="Störungsmeldung">
das action-Attribut darf nicht leer sein (in HTML(5), im veralteten xhtml ist es richtig), als Methode ist post besser und es gibt keinen Grund Umlaute zu verstümmeln - als Wert von name-Attributen würde ich Umlaute aber ganz vermeiden.
<table width="594" border="1">
<tr>
<td colspan="2" bgcolor="#FF6600"><div align="center" class="Stil1">
bis auf colspan und class (letzteres dann aber für td) gehören alle Attribute weg und durch CSS ersetzt. Die Tabelle ist auch eher falsch - Layouttabellen sind nicht mehr nötig seit es flex und grid zum Anordnen von Elementen gibt.<tr>
<td colspan="2" bgcolor="#FF6600"><div align="center" class="Stil1">
<td width="284"><span class="Stil12">
<label>Kundennummer * </label>
</span></td>
<td width="294"><input name="1" type="text" id="1" /></td>
<label>Kundennummer * </label>
</span></td>
<td width="294"><input name="1" type="text" id="1" /></td>
Das label-Element braucht noch ein for-Attribut mit (hier) 1 als Wert (identisch mit dem id-Attribut des dazugehörigen input-Elements sonst kann der Browser Beschriftung und Feld nicht zuordnen. Als id- und name-Attribut würde ich aber sprechende Namen verwenden, das macht den Code lesbarer und vereinfacht die Verarbeitung der Daten da klar ist was in welchem Element steckt.
Gruß
Tobias
Hallo Tobias,
ich habe dieses mit ein altes Programm erstellt, Dreamweaver CS3, demzufolge ist die Zeichengebung so alt. Fit bin ich in der Materie definitiv nicht. Diese Verbesserungen kann ich gern demnächst versuchen, aber im Vorfeld ist mir nur der Zwischenspeicher wichtig. Vielen Dank VG
ich habe dieses mit ein altes Programm erstellt, Dreamweaver CS3, demzufolge ist die Zeichengebung so alt. Fit bin ich in der Materie definitiv nicht. Diese Verbesserungen kann ich gern demnächst versuchen, aber im Vorfeld ist mir nur der Zwischenspeicher wichtig. Vielen Dank VG
Moin,
Wie gesagt, dafür brauchst du Javascript, wobei ich mir nicht ganz sicher bin was du vor hast: willst du die Daten im Browser speichern? In dem Fall brauchst du den von JoeToe verlinkte Web-Storage. Wenn du die Daten in die Zwischenablage kopieren willst, brauchst du das von mir verlinkte writeText(). Wobei sich da die Frage stellt warum man die Daten nicht gleich dahin schreibt wo sie hin sollen - vielleicht erläuterst du mal etwas ausführlicher was du eigentlich genau vor hast.
Zitat von @Waicodrei:
Diese Verbesserungen kann ich gern demnächst versuchen, aber im Vorfeld ist mir nur der Zwischenspeicher wichtig.
Diese Verbesserungen kann ich gern demnächst versuchen, aber im Vorfeld ist mir nur der Zwischenspeicher wichtig.
Wie gesagt, dafür brauchst du Javascript, wobei ich mir nicht ganz sicher bin was du vor hast: willst du die Daten im Browser speichern? In dem Fall brauchst du den von JoeToe verlinkte Web-Storage. Wenn du die Daten in die Zwischenablage kopieren willst, brauchst du das von mir verlinkte writeText(). Wobei sich da die Frage stellt warum man die Daten nicht gleich dahin schreibt wo sie hin sollen - vielleicht erläuterst du mal etwas ausführlicher was du eigentlich genau vor hast.
