Hoe maak je een formulier in HTML?

HTML-formulieren worden gebruikt om interactieve webpagina’s te maken, zodat de gebruiker informatie aan de server kan verstrekken. Dit kan in de vorm zijn van tekstvelden, selectievakjes, radioknoppenetc.

Hier zijn de stappen om een basic HTML-formulier te maken:

1. Begin met de openingstag `

`. Deze tag definieert waar het formulier begint en eindigt.

1. Het formulier moet een `action`-attribuut hebben, dat het URL van de pagina definieert waar de informatie van het formulier naartoe wordt gestuurd wanneer het is verzonden. Bijvoorbeeld: ``.

1. Het formulier moet een `method`-attribuut hebben dat de HTTP-methode definieert die wordt gebruikt om de gegevens te verzenden. `GET` en `POST` zijn de meest gebruikte methoden. Bijvoorbeeld: ``.

1. Voeg vervolgens uw formuliervelden toe. Dit kunnen invoervelden zijn (bv. ``), tekstgebieden (bv. ``), selectievakjes (checkboxes), radioknoppen (radiobuttons), enz.</p> <p>Hier is een voorbeeld van een eenvoudig formulier:</p> <p>```<br /> <form action="/submit_form.php" method="post"> <label for="fname">Voornaam:</label><br /> <input type="text" id="fname" name="fname" value=""><br /> <label for="lname">Achternaam:</label><br /> <input type="text" id="lname" name="lname" value=""><br /> <input type="submit" value="Verzenden"><br /> </form><br /> ```</p> <p>In dit voorbeeld wordt het formulier verzonden naar de pagina “submit\_form.php” op de server wanneer de gebruiker op de knop “Verzenden” klikt. Het heeft twee velden: “Voornaam” en “Achternaam”. De labels zijn gekoppeld aan de velden met behulp van het “for”-attribuut in de `<label>`-tag en het “id”-attribuut in de `<input>`-tag.</p> <p>1. Voeg een afsluitende `</form>`-tag aan het eind toe om het einde van het formulier aan te geven.</p> <p>Let op: het daadwerkelijke verzenden en verwerken van de gegevens is een serverzijde functie en gaat verder dan de scope van <span class="caps">HTML</span>. Hiervoor zul je een serverzijdige scripttaal zoals <span class="caps">PHP</span>, Python, Node.js, etc. moeten gebruiken.</p></div> <br><a title="Genereer eenvoudig artikelen om uw SEO te optimaliseren" href="https://infinityseo.io"> <div style="font-family:monospace;font-size:14px;text-align:center"> <img alt="Genereer eenvoudig artikelen om uw SEO te optimaliseren" src="https://dinogeek.me/images/ad-seo.png"> <br> Genereer eenvoudig artikelen om uw SEO te optimaliseren </div> </a><br><br> <br><br><br> <div style="font-family:monospace;font-size:14px;text-align:center">DinoGeek biedt eenvoudige artikelen over complexe technologieën <br><br> Wilt u in dit artikel worden geciteerd? Het is heel eenvoudig, neem contact met ons op via dino@eiki.fr <br><br></div> <div style="font-family:monospace;font-size:14px;text-align:center"><a title="Index CSS Category" href="https://dinogeek.me/NL/CSS/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">CSS</a> | <a title="Index NodeJS Category" href="https://dinogeek.me/NL/NodeJS/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">NodeJS</a> | <a title="Index DNS Category" href="https://dinogeek.me/NL/DNS/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">DNS</a> | <a title="Index DMARC Category" href="https://dinogeek.me/NL/DMARC/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">DMARC</a> | <a title="Index MAPI Category" href="https://dinogeek.me/NL/MAPI/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">MAPI</a> | <a title="Index NNTP Category" href="https://dinogeek.me/NL/NNTP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">NNTP</a> | <a title="Index htaccess Category" href="https://dinogeek.me/NL/htaccess/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">htaccess</a> | <a title="Index PHP Category" href="https://dinogeek.me/NL/PHP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">PHP</a> | <a title="Index HTTPS Category" href="https://dinogeek.me/NL/HTTPS/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">HTTPS</a> | <a title="Index Drupal Category" href="https://dinogeek.me/NL/Drupal/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">Drupal</a> | <a title="Index WEB3 Category" href="https://dinogeek.me/NL/WEB3/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">WEB3</a> | <a title="Index LLM Category" href="https://dinogeek.me/NL/LLM/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">LLM</a> | <a title="Index Wordpress Category" href="https://dinogeek.me/NL/Wordpress/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">Wordpress</a> | <a title="Index TLD Category" href="https://dinogeek.me/NL/TLD/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">TLD</a> | <a title="Index Domeinnaam Category" href="https://dinogeek.me/NL/Domeinnaam/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">Domeinnaam</a> | <a title="Index IMAP Category" href="https://dinogeek.me/NL/IMAP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">IMAP</a> | <a title="Index TCP Category" href="https://dinogeek.me/NL/TCP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">TCP</a> | <a title="Index NFT Category" href="https://dinogeek.me/NL/NFT/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">NFT</a> | <a title="Index MariaDB Category" href="https://dinogeek.me/NL/MariaDB/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">MariaDB</a> | <a title="Index FTP Category" href="https://dinogeek.me/NL/FTP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">FTP</a> | <a title="Index Zigbee Category" href="https://dinogeek.me/NL/Zigbee/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">Zigbee</a> | <a title="Index NMAP Category" href="https://dinogeek.me/NL/NMAP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">NMAP</a> | <a title="Index SNMP Category" href="https://dinogeek.me/NL/SNMP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">SNMP</a> | <a title="Index SEO Category" href="https://dinogeek.me/NL/SEO/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">SEO</a> | <a title="Index E-Mail Category" href="https://dinogeek.me/NL/E-Mail/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">E-Mail</a> | <a title="Index LXC Category" href="https://dinogeek.me/NL/LXC/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">LXC</a> | <a title="Index HTTP Category" href="https://dinogeek.me/NL/HTTP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">HTTP</a> | <a title="Index MangoDB Category" href="https://dinogeek.me/NL/MangoDB/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">MangoDB</a> | <a title="Index SFTP Category" href="https://dinogeek.me/NL/SFTP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">SFTP</a> | <a title="Index RAG Category" href="https://dinogeek.me/NL/RAG/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">RAG</a> | <a title="Index SSH Category" href="https://dinogeek.me/NL/SSH/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">SSH</a> | <a title="Index HTML Category" href="https://dinogeek.me/NL/HTML/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">HTML</a> | <a title="Index ChatGPT API Category" href="https://dinogeek.me/NL/ChatGPT-API/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">ChatGPT API</a> | <a title="Index OSPF Category" href="https://dinogeek.me/NL/OSPF/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">OSPF</a> | <a title="Index JavaScript Category" href="https://dinogeek.me/NL/JavaScript/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">JavaScript</a> | <a title="Index Docker Category" href="https://dinogeek.me/NL/Docker/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">Docker</a> | <a title="Index OpenVZ Category" href="https://dinogeek.me/NL/OpenVZ/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">OpenVZ</a> | <a title="Index ChatGPT Category" href="https://dinogeek.me/NL/ChatGPT/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">ChatGPT</a> | <a title="Index VPS Category" href="https://dinogeek.me/NL/VPS/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">VPS</a> | <a title="Index ZIMBRA Category" href="https://dinogeek.me/NL/ZIMBRA/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">ZIMBRA</a> | <a title="Index SPF Category" href="https://dinogeek.me/NL/SPF/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">SPF</a> | <a title="Index UDP Category" href="https://dinogeek.me/NL/UDP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">UDP</a> | <a title="Index Joomla Category" href="https://dinogeek.me/NL/Joomla/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">Joomla</a> | <a title="Index IPV6 Category" href="https://dinogeek.me/NL/IPV6/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">IPV6</a> | <a title="Index BGP Category" href="https://dinogeek.me/NL/BGP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">BGP</a> | <a title="Index Django Category" href="https://dinogeek.me/NL/Django/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">Django</a> | <a title="Index Reactjs Category" href="https://dinogeek.me/NL/Reactjs/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">Reactjs</a> | <a title="Index DKIM Category" href="https://dinogeek.me/NL/DKIM/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">DKIM</a> | <a title="Index VMWare Category" href="https://dinogeek.me/NL/VMWare/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">VMWare</a> | <a title="Index RSYNC Category" href="https://dinogeek.me/NL/RSYNC/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">RSYNC</a> | <a title="Index Python Category" href="https://dinogeek.me/NL/Python/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">Python</a> | <a title="Index TFTP Category" href="https://dinogeek.me/NL/TFTP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">TFTP</a> | <a title="Index Webdav Category" href="https://dinogeek.me/NL/Webdav/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">Webdav</a> | <a title="Index FAAS Category" href="https://dinogeek.me/NL/FAAS/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">FAAS</a> | <a title="Index Apache Category" href="https://dinogeek.me/NL/Apache/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">Apache</a> | <a title="Index IPV4 Category" href="https://dinogeek.me/NL/IPV4/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">IPV4</a> | <a title="Index LDAP Category" href="https://dinogeek.me/NL/LDAP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">LDAP</a> | <a title="Index POP3 Category" href="https://dinogeek.me/NL/POP3/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">POP3</a> | <a title="Index SMTP Category" href="https://dinogeek.me/NL/SMTP/" style="font-family:monospace;text-align:center;font-size:14px;line-height:200%">SMTP</a><br><br><div style="text-align:center">| <a href="https://rapidapi.com/juleshenri/api/whispers-of-love" style="font-family:monospace;text-align:center;font-size:14px;">Whispers of love (API)</a> | <a href="https://10squette.com/" style="font-family:monospace;text-align:center;font-size:14px;">Déclaration d'Amour</a> | </div></div> <br><br><br> <div class ="sharethis-inline-share-buttons"></div><br><br><br> <div style="text-align:center"><a href="https://dinogeek.me/cgu.html" style="font-family:monospace;font-size:10px;text-align:center">Juridische Vermelding / Algemene Gebruiksvoorwaarden</a></div> <script type="text/javascript"> (function(window, document, dataLayerName, id) { window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script'); function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString()}document.cookie=a+"="+b+d+"; path=/"} var isStgDebug=(window.location.href.match("stg_debug")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1); var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):""; tags.async=!0,tags.src="https://10squette.containers.piwik.pro/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts); !function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]); })(window, document, 'dataLayer', '76416025-fa2e-47a5-855b-d1916c3dc071'); </script> </body> </html>