HTML Formulier

Status
Niet open voor verdere reacties.

JoniHermans

Nieuwe gebruiker
Lid geworden
19 nov 2017
Berichten
1
Hallo allemaal,

ik moet voor school een HTML formulier maken en ben al redelijk ver gemaakt maar ik zit op dit moment vast met een paar dingen.
Hieronder vindt je de opdracht die ik kreeg:

In een formulier: Contact plaats je de volgende velden: voornaam*, familienaam*, e-mailadres*, telefoonnummer, boodschap*. De velden met een * zijn verplicht in te vullen velden (* = verplicht). Een Verzend-knop vervolledigt het geheel. Wanneer op die knop gedrukt wordt, moet er nagekeken worden of het ingevulde e-mailadres geldig is, en of het telefoonnummer een geldig telefoonnummer is. Die controles gebeuren in HTML, niet in JavaScript. Tot slot worden alle ingevulde gegevens per e-mail naar jou verzonden.

ik heb ondertussen al deze code, maar hetgene wat me niet lukt is de controle op de e-mail en het telefoonnummer:

<!DOCTYPE html>
<html>
<title>FORMULIER</title>
<h1>Contact</h1>
<form method="post" action="mailto:joni.hermans2001@gmail.com">
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Voornaam*:</td>
<td><input name="name" size="30" placeholder="Vul geldige voornaam in" required><br></td>
<label for="name"></label>
</tr>
<tr>
<td>Familienaam*:</td>
<td><input name="name" size="30" placeholder="Vul geldige familienaam in" required><br></td>
<label for="name"></label>
</tr>
<tr>
<td>E-mail*:</td>
<td><input name="Email" size="30" type="email" placeholder="Vul geldig e-mailadres in" required><br></td>
<label for="email"></label>
</tr>
<tr>
<td>Telefoonnummer:</td>
<td><input name="Tel" size="30" placeholder="Vul geldig telefoonnummer in" ><br></td>
<label for="telefoon"></label>
</tr>
<tr>
<td>Boodschap*:</td>
<td>
<input name="Boodschap" size="30" rows="10" cols="60" placeholder="Vul hier je boodschap in" required>
<br></td>
<label for="Boodschap"></label>
</tr>
</table>
</form>

<form method="post" action="mailto:joni.hermans2001@gmail.com">
<input type="submit" value="Verzenden">
</form>
</html>


Zouden jullie me alsjeblieft kunnen helpen het is redelijk dringend want het moet tegen morgenvroeg klaar zijn, alvast bedankt.
 
bekijk ook de volgende lijnen

</table>
-----------------</form>

-----------------<form method="post" action="mailto:joni.hermans2001@gmail.com">
<input type="submit" value="Verzenden">

er zijn enkele tags te veel
 
Volgens mij kan Javascript geen email versturen.
Wel kan je met JS het email programma op de pc openen.
window.open('mailto:naam@example.nl?subject=tekst&body=tekst');

Gewoonlijk wordt een email verstuurd op de server in php
 
de <form method="post" action="mailto:joni.hermans2001@gmail.com"> zal op de locale computer door outlookexpress of door de standaard mailprog worden verstuurd

Maar als je zie bovenstaande en verkort onderaan zal je als je op verzenden van het tweede form het eerste form niet versturen en of gebruiken (het blijft een twijfelachtige uitkomst waar je verplicht je gebruiker een email te hebben)
zie
HTML:
<!DOCTYPE html>
<html>
<title>FORMULIER</title>
<h1>Contact</h1>
<form method="post" action="mailto:joni.hermans2001@gmail.com">
...
</form>

<form method="post" action="mailto:joni.hermans2001@gmail.com">
<input type="submit" value="Verzenden">
</form>
</html>
 
...een e-mail programma bedoelt hij.
 
Tabellen horen niet te worden gebruikt voor de structuur. Het woord "tabel" zegt het eigenlijk al, ze zijn bedoeld voor het weergeven van gegevens in tabelvorm. Hieronder jouw voorbeeld waarin het gaat om het formulier (niet om de tabel). Deze mail methode wordt door website bezoekers niet gewaardeerd omdat meestal het verkeerde mail programma wordt gestart en er popup'jes zijn die waarschuwingen geven over de privacy.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Formulier</title>
</head>
<body>
<h1>Contact</h1>
<form method="post" action="mailto:jouwnaam@example.nl">
<table cellspacing="2" cellpadding="2" border="0">
<tr>
  <td><label for="voornaam">Voornaam *</label></td>
  <td><input type="text" id="voornaam" name="voornaam" size="30" placeholder="Vul geldige voornaam in" required><br></td>
</tr>
<tr>
  <td><label for="familienaam">Familienaam *</label></td>
  <td><input type="text" id="familienaam" name="familienaam" size="30" placeholder="Vul geldige familienaam in" required><br></td>
</tr>
<tr>
  <td><label for="email">E-mail *</label></td>
  <td><input type="email" id="email" name="email" size="30" placeholder="Vul geldig e-mailadres in" required><br></td>
</tr>
<tr>
  <td><label for="telefoon">Telefoonnummer</label></td>
  <td><input type="text" id="telefoon" name="telefoon" size="30" placeholder="Vul geldig telefoonnummer in"><br></td>
</tr>
<tr>
  <td><label for="boodschap">Boodschap *</label></td>
  <td><textarea id="boodschap" name="boodschap" rows="10" cols="60" placeholder="Vul hier je boodschap in" required></textarea><br></td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td><input type="submit" id="verstuur" name="verstuur" size="30" value="Verstuur"><br></td>
</tr>
</table>
</form>
</body>
</html>
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan