Form - Versionshistorie

https://holstebro-htx.dk/index.php?action=history&feed=atom&title=Form Form - Versionshistorie 2026-04-19T05:38:53Z Versionshistorie for denne side i Holstebro HTX Wiki MediaWiki 1.45.1 https://holstebro-htx.dk/index.php?title=Form&diff=3443&oldid=prev Bar: /* Mulige elementer i en form */ 2025-11-01T09:20:16Z

<p><span class="autocomment">Mulige elementer i en form</span></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="da"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Ældre version</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen fra 1. nov. 2025, 11:20</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l35">Linje 35:</td> <td colspan="2" class="diff-lineno">Linje 35:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[checkbox]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[checkbox]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[textarea-<del style="font-weight: bold; text-decoration: none;">tag</del>|textarea]]</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[textarea-<ins style="font-weight: bold; text-decoration: none;">Tag</ins>|textarea]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Forms og javascript==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Forms og javascript==</div></td></tr> </table>

Bar https://holstebro-htx.dk/index.php?title=Form&diff=3442&oldid=prev Bar: /* Mulige elementer i en form */ 2025-11-01T09:19:56Z

<p><span class="autocomment">Mulige elementer i en form</span></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="da"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Ældre version</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen fra 1. nov. 2025, 11:19</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l35">Linje 35:</td> <td colspan="2" class="diff-lineno">Linje 35:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[checkbox]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[checkbox]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[textarea|textarea<del style="font-weight: bold; text-decoration: none;">-tag</del>]]</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[textarea<ins style="font-weight: bold; text-decoration: none;">-tag</ins>|textarea]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Forms og javascript==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Forms og javascript==</div></td></tr> </table>

Bar https://holstebro-htx.dk/index.php?title=Form&diff=3441&oldid=prev Bar: /* Mulige elementer i en form */ 2025-11-01T09:19:35Z

<p><span class="autocomment">Mulige elementer i en form</span></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="da"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Ældre version</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen fra 1. nov. 2025, 11:19</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l35">Linje 35:</td> <td colspan="2" class="diff-lineno">Linje 35:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[checkbox]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[checkbox]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[textarea]]</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[textarea<ins style="font-weight: bold; text-decoration: none;">|textarea-tag</ins>]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Forms og javascript==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>==Forms og javascript==</div></td></tr> </table>

Bar https://holstebro-htx.dk/index.php?title=Form&diff=546&oldid=prev Bar med 2. aug. 2022, 09:36 2022-08-02T09:36:32Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="da"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Ældre version</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Versionen fra 2. aug. 2022, 11:36</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l61">Linje 61:</td> <td colspan="2" class="diff-lineno">Linje 61:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Det der validerer (tjekker om det er i orden) formen er funktionen validate() der kan se ud som følger:</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Det der validerer (tjekker om det er i orden) formen er funktionen validate() der kan se ud som følger:</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><source lang=<del style="font-weight: bold; text-decoration: none;">'</del>javaScript<del style="font-weight: bold; text-decoration: none;">'</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><source lang=<ins style="font-weight: bold; text-decoration: none;">"</ins>javaScript<ins style="font-weight: bold; text-decoration: none;">"</ins>></div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>function validate(form) {</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>function validate(form) {</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> // parameteren form er sendt ved hjælp af this nede i formen, så man kan </div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> // parameteren form er sendt ved hjælp af this nede i formen, så man kan </div></td></tr> </table>

Bar https://holstebro-htx.dk/index.php?title=Form&diff=544&oldid=prev Bar: Oprettede siden med "==Det oprindelige formål med en Form== I sin grundform var HTML ikke aktivt, så man kunne ikke ændre på noget, men man kunne indsende værdier til en server. Disse værdier skulle samles i en form og sendes med en submit knap til det der var angivet i formen. Man kan godt have flere forskellige forms i en side, og det er kun det der ligger i den aktuelle form der sendes til serveren. ==Den grundlæggende Form== I sin grundform kan en form se således ud: <pr..." 2022-08-02T09:34:47Z

<p>Oprettede siden med "==Det oprindelige formål med en Form== I sin grundform var HTML ikke aktivt, så man kunne ikke ændre på noget, men man kunne indsende værdier til en server. Disse værdier skulle samles i en form og sendes med en <a href="/index.php/Submit_knap" title="Submit knap">submit knap</a> til det der var angivet i formen. Man kan godt have flere forskellige forms i en side, og det er kun det der ligger i den aktuelle form der sendes til serveren. ==Den grundlæggende Form== I sin grundform kan en form se således ud: <pr..."</p> <p><b>Ny side</b></p><div>==Det oprindelige formål med en Form==<br /> I sin grundform var HTML ikke aktivt, så man kunne ikke ændre på noget, men man kunne indsende værdier til en server. Disse værdier skulle samles i en form og sendes med en [[submit knap]] til det der var angivet i formen.<br /> <br /> Man kan godt have flere forskellige forms i en side, og det er kun det der ligger i den aktuelle form der sendes til serveren.<br /> <br /> ==Den grundlæggende Form==<br /> I sin grundform kan en form se således ud:<br /> <br /> <pre><br /> <form name="mening" action="test_form.php" method="get"><br /> Skriv din mening om politik: <input type="text" name="bruger_mening" /><br /> <input type="submit" value="Indsend din Mening" /><br /> </form><br /> </pre><br /> <br /> Formen defineres som objekt af <form> </form>, og egenskaberne siger noget om hvad der skal ske med formen:<br /> <br /> action angiver hvor det der sendes skal sendes hen (her er det til den server fomen ligger på, og til en side der hedder test_form.php), som skal kunne modtage det sendte.<br /> <br /> method angiver hvilken form det sendes på (get eller post), som betyder noget for hvad man kan se i det sendte, når man sender.<br /> <br /> [[input text]] feltet definerer det felt hvor der skal indtastes noget (her er det brugerens mening)<br /> <br /> [[submit knap]]pen er den knap der aktiverer afsendelsen af formen.<br /> <br /> ==Mulige elementer i en form==<br /> [[input text]]<br /> <br /> [[input password]]<br /> <br /> [[select]] med [[option]]s der former en [[dropdown]] menu<br /> <br /> [[radio button]]<br /> <br /> [[checkbox]]<br /> <br /> [[textarea]]<br /> <br /> ==Forms og javascript==<br /> Det man typisk kan med [[javaScript]] i en form er at man kan gøre noget ved værdierne i formen inden de sendes til serveren, og man kan blokere indsendelsen af formen (nok det mest brugte af javascript til forms) - det vil man gøre ud fra en validering af formens indhold.<br /> <br /> ===Eksempel med validering af form===<br /> Ideen med at validere en form er at man kan tjekke om brugeren har indtastet noget fornuftigt inden der sendes til serveren.<br /> <br /> Dette tjek kan spare serveren for en del belastning (at der ikke skal svares på henvendelser der alligevel ikke har noget formål), og det kan give en bedre brugeroplevelse (at man ikke skal udfylde en hel masse igen, hvis man har glemt et felt).<br /> <br /> Teknikken er at man fanger [[events|eventen]] onSubmit med javascript, og returnerer false, hvis den ikke skal sendes.<br /> <br /> Formen kan opbygges som følger:<br /> <br /> <source lang='html4strict'><br /> <form action="" onSubmit="return validate(this)" method="get"><br /> <p>Indtast en tekst på mere end 3 tegn:<br /> <input type="text" name="tekst" /></p><br /> <p><br /> <input type="submit" value="send til denne side" /><br /> </p><br /> </form><br /> </source><br /> <br /> Det der validerer (tjekker om det er i orden) formen er funktionen validate() der kan se ud som følger:<br /> <br /> <source lang='javaScript'><br /> function validate(form) {<br /> // parameteren form er sendt ved hjælp af this nede i formen, så man kan <br /> // henvende sig til felterne ved hjælp af name-egenskaberne<br /> var tekst = form.tekst.value;<br /> if (tekst.length < 3) {<br /> alert("Der skal indtastes mindst 3 tegn");<br /> // Her sendes formen ikke<br /> return false;<br /> }<br /> // Her bliver formen sendt (der er indtastet 3 eller flere tegn<br /> return true;<br /> }<br /> </source><br /> <br /> En ekstra lille krølle i eksemplet er at man via javascript kan fange det der er sendt, ved at læse i URL-linien, og finde frem til det der er indtastet ved:<br /> <br /> <source lang='javaScript'><br /> if (location.href.indexOf("?") > 0) { <br /> var href = location.href.split("?");<br /> var tekst = href[1].split("=");<br /> alert("Ud af " + location.href + "kan man finde\nDet indtastede som: " + tekst[1]);<br /> }<br /> </source><br /> <br /> Eksemplet kan findes i en [[Media:js_form.zip|ZIP-fil]].<br /> <br /> {{webcode}}<br /> <br /> {{webdesign}}<br /> [[kategori:javascript_input]]</div>

Bar