_ 1.10 Formulär

Uppgiften introducerar till formulär som används för att sända information från användaren till webbplatsen.

__ Uppgift

Fyll på med minst ett formulär totalt i passande HTML-dokuments område (inget ska göras i §index.html§). Formuläret ska ha minst:

- Ett textfält för avsändarens namn
- Ett textfält för avsändarens epostadress
- Ett textfält för avsändarens hemsida (eller FB-sida, Twitter-sida osv)
- En checkbox för om användaren vill ha svar
- Två radio-knappar där användaren kan välja att få en kopia på utsänt meddelande eller inte
- En lista för användaren ska kunna välja ämne på meddelandet
- Ett fält för uppladdning av fil (file upload)
- En textarea för själva meddelandet

Man ska alltså använda följande taggar markerade med fet stil (eventuella övriga är frivilliga):

- £§form§£
- Enrads textbox:
-- £§input type="text"§£
-- £§input type="email"§£
-- §input type="password"§
-- £§input type="url"§£
-- §input type="number"§ med attribution §min§, §max§ oct §step§
-- §input type="range"§ med attribution §min§, §max§ oct §step§
-- §input type="datetime-local"§
-- §input type="date"§
-- §input type="month"§
-- §input type="week"§
-- §input type="time"§
- Flerrads textbox:
-- £§textarea§£
- Checkbox:
-- £§input type="checkbox"§£
- Radio-knapp:
-- £§input type="radio"§£
- Lista:
-- £§select§£ med §optgroup§ och £§option§£
- Fält för uppladdning av fil:
-- £§input type="file"§£
- Knapp:
-- £§input type="submit"§£
-- §input type="image"§
-- §input type="reset"§
-- §input type="button"§

Använd taggarna £§fieldset§£, £§legend§£, £§label§£ och attributen £§placeholder§£ och £§autofocus§£ för att få det snyggt och väl beskrivet.

Lägg till förslag till input till en enrads textbox med taggen £§datalist§£.

Lägg till validering med attributet £§required§£ och använd £§pattern§£ med reguljära uttryck för att validera några av kontrollerna. Informera användaren med attributet £§title§£ om vad som gäller.

Formuläret ska sända informationen via metoden £§post§£ till webbprogrammet på:

§
https://people.dsv.su.se/~pierre/i/05_ass/ip3/1/1.10/example.php
§

Notera att svaret från webbprogrammet enbart ekar tillbaka namn och värde på det som sänts och att formatet är på §text/plain§. Detta PHP-webbprogram har följande kod:

§
<?php

header('Content-type: text/plain');

// Print POST variables
foreach ($_POST as $key=>$val ) {
  echo "\n" . $key . " = " . $val;
}

// Print GET variables
foreach ($_GET as $key=>$val ) {
  echo "\n" . $key . " = " . $val;
}

echo "\n\n";

echo "File data:\n";

// Check filesize
if ($_FILES["file"]["size"] > 10000000) {
  header('Content-Type: text/plain');
  echo("File is to big!");
} else {
  // Everything is ok
  // Upload file
  if(!move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name'])) {
    die('Error uploading file');
  }
  
  $file = "uploads/" . $_FILES['file']['name'];
  $mimetype = $_FILES["file"]["type"];
  $file_size = $_FILES["file"]["type"];
		
  header('Content-Type: text/plain');
  echo "Name: " . $_FILES["file"]["name"] . "\n";
  echo "Type: " . $_FILES["file"]["type"] . "\n";
  echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb\n";		
}

// Ta bort filen
if ($_FILES["file"]) {
  $file = "uploads/" . $_FILES['file']['name'];
  unlink($file);
}
	
?>
§

Man kan (frivilligt) kopiera och eventuellt modifiera denna kod och spara den på sitt egna DSV/Linux-konto. Se sidan [Kursmaterial/ Koppla till DSV, 03_material/docs/dsv/ip3.txt] under Webben.

Varje HTML-dokument ska följa kraven under sidan [Krav, 05_ass/requirements/ip3.txt].

__ Exempel

Inget exempel ges.

__ Tips

För att uppladdning av fil ska fungera så måste £§form§£-taggen ha ett speciellt attribut §enctype="multipart/form-data"§, exempelvis:

§
<form method="post" enctype="multipart/form-data" action="https://people.dsv.su.se/~pierre/i/05_ass/ip3/1/1.10/example.php">
§

Notera att detta webbprogram förväntar sig att filen heter §file§:

§
<input type="file" name="file">
§

Observera att kontroll av indata till ett formulär enbart är till för att underlätta för användaren, inte för att kontrollera att indatat är säkert för programmet på webbserversidan, eftersom det är mycket lätt att kringgå sådana kontroller.

Även taggen §output§ kan vara användbar när man arbetar med formulär.

__ Hjälp

~ 05_ass/help/01.txt

>
[Klicka här för hjälp, helper.dsv@gmail.com, Webbutv I: 1.10 Formulär: http://people.dsv.su.se/~pierre/i/i.cgi?href=05_ass/ip3/1.10.txt] ½===system_tutoring_message===½
<

~ 05_ass/help/02.txt