Activitat 2. Formularis HTML
Salta a la navegació
Salta a la cerca
Contingut
Enunciat
Crea una pàgina web en HTML que contingui un formulari amb els següents camps d'informació
- Nom, amb un control de tipus text obligatori i amb autofocus.
- Correu electrònic, amb un control de tipus correu electrònic obligatori.
- URL, amb un control de tipus URL que mostri l'ajuda "Escriu la URL de la teva pàgina web personal".
- Data, amb un control de tipus date.
- Temps, amb un control de tipus time.
- Data i hora, amb un control de tipus datetime.
- Mes, amb un control de tipus month.
- Setmana, amb un control de tipus week.
- Número, amb un control de tipus number que limiti l'entrada a un valor entre -10 i 10.
- Telèfon, amb un control de tipus tel.
- Paraula de recerca, amb un control de tipus search.
- Color favorit, amb un control de tipus color.
- Un botó d'enviament.
A més, has de tenir en compte els següents requisits:
- El títol de la pàgina ha de ser Formulari de prova d'HTML5.
- El mètode d'enviament del formulari ha de ser GET.
- La destinació de l'enviament del formulari ha de ser el Punt 2.
Afegirem una destinació a l’enviament del formulari a la pàgina "resultat.php"
En aquesta pàgina mostrarem el nom i correu electrònic enviat des del formulari.
- Nota: per recuperar valors enviats des d’altres pàgines hem de fer servir el mètode PHP depenent de com s’envien en orígen.
$variable= $_GET["valor"];
- o bé
$variable= $_POST["valor"];
Solució
Formulari
<!DOCTYPE html> <html> <head> <title>Formulari de prova de HTML5</title> </head> <body> <form method="GET" action="resultat.php"> <p>Nom: <input type="text" name="nom" value="" autofocus="" required/></p> <p>Correu electrònic: <input type="email" name="email" value="" required/></p> <p>Web personal: <input type="url" name="web" value="" /></p> <p>Data: <input type="date" name="data" value="" /></p> <p>Hora: <input type="time" name="hora" value="" /></p> <p>Data i hora: <input type="datetime" name="datahora" value="" /></p> <p>Mes: <input type="month" name="mes" value="" /></p> <p>Setmana: <input type="week" name="setmana" value="" /></p> <p>Número entre -10 i 10: <input type="number" min="-10" max="10" name="numero" value="" /></p> <p>Telèfon: <input type="tel" name="telefon" value="" /></p> <p>Paraula clau: <input type="search" name="recerca" value="" /></p> <p>Color preferit: <input type="color" name="color" value="" /></p> <p><button type="submit">ENVIA</button></p> </form> </body> </html>
Resultat
<?php $nom = $_GET["nom"]; $email = $_GET["email"]; echo "El teu nom és " . $nom . ", i el teu correu és " . $email; ?>
