Programmera i PHP/Formulärelement och PHP

Från Wikibooks
Hoppa till navigering Hoppa till sök


När man lägger till ett element i ett formulär fyller man alltid i "type". Det är det värdet som avgör vilken sorts typ av formulärelement som används. Det finns totalt nio olika typer:

  • textrutor
  • lösenordsrutor
  • radioknappar
  • kryssrutor
  • kommandoknappar
  • bildknapp
  • återställningsknapp
  • gömt fält
  • filöverföring

Textruta[redigera]

Textrutan är som standard 20 tecken lång. Den är endast en enda textrad. Den skrivs som: <input type="text" name="namn">

Man kan även skriva:

<input type="text" name="namn" value="Skriv namnet här" Size=50>

Då syns 50 tecken istället för 20 och det står "Skriv namnet här" i textrutan från början.

Lösenordsruta[redigera]

Lösenordsrutan är exakt likadan som textrutan med den skillnaden att den visar upp stjärnor istället för bokstäver när någon skriver i den. Det värdet man läser av är "current value".

<input type="password" name="namn">

Radioknappar[redigera]

Radioknapparna är speciella då endast en radioknapp i ett set kan vara fylld. Här är ett exempel på hur man skapar radioknappar:

<fieldset>
 <legend> Vilken skola går du på?</legend>
 <input type=radio name=skola value="small" checked> Lilla skolan 
<input type=radio name=skola value="medium"> Mellanskolan
<input type=radio name=skola value="large"> Stora skolan
</fieldset>

Det som är viktigt att komma ihåg är att de måste ha exakt samma namn, bara då uppnår du effekten att endast en i gruppen kan vara markerad. När det gäller radioknappar bör alltid en vara förvald, i det här fallet är Lilla skolan förvald genom att det står "checked" i taggen.

Hur läser PHP radioknapparna?[redigera]

Anta att ovanstående knappar finns i ett formulär som skickas in med en submitknapp om heter Submit:

<?PHP
if (isset($_POST['Submit'])) {
$selected_radio = $_POST['skola'];

if ($selected_radio == 'small') {
   echo ('Liten');
   }
else if ($selected_radio == 'medium') {
   echo ('Mellan');
   }
else{
  echo ('Stor');
  }
}
?>

Kryssrutor[redigera]

Kryssrutor fungerar precis som radioknappar men mer än en kan vara ikryssad samtidigt.

<fieldset>
 <legend> Vilken skola går du på?</legend>
 <input type=checkbox name=skola value="small" checked> Lilla skolan 
<input type=checkbox name=skola value="medium"> Mellanskolan
<input type=checkbox name=skola value="large"> Stora skolan
</fieldset>

Rutan för Lilla skolan är ikryssad i förväg, precis som för radioknappen. Alla bör ha samma namn. Då skickas informationen till servern i form av en array och man kan lätt läsa av vilka rutor som är ikryssade och vilka som är tomma.

Hur läser PHP kryssrutorna?[redigera]

Anta att du har en enda kryssruta, för enkelhetens skull. Då kan det se ut så här:

<form action="checkbox-form.php" method="post">
   Behöver du en rullstol??
   <input type="checkbox" name="formWheelchair" value="Yes" />
   <input type="submit" name="formSubmit" value="Submit" />
</form>

Är rutan ikryssad har formwheelchair värdet yes annars saknar den värde. Den kan inte ha no.

Det kan vi läsa av med det här scriptet:

<?php
if(isset($_POST['formWheelchair']) && 
  $_POST['formWheelchair'] == 'Yes') 
{
   echo "En rullstol kommer att finnas tillgänglig för er.";
}
else
{
   echo "Ingen rullstol kommer att finnas tillgänglig.";
}    
?>

Allt gott och väl så långt, men om det är så att vi har flera alternativ som samtliga kan vara ikryssade? Då måste vi skicka kryssrutornas värden som en Array till PHP och det sker genom att vi lägger till[].

Vart vill du resa?
<input type="checkbox" name="Plats[]" value="A" />Tomelilla
<input type="checkbox" name="Plats[]" value="B" />Blomstermåla
<input type="checkbox" name="Plats[]" value="C" />Avesta
<input type="checkbox" name="Plats[]" value="D" />Örkelljunga
<input type="checkbox" name="Plats[]" value="E" />Mellansel
<input type="submit" name="formSubmit" value="Submit" />

Observera att samtliga kryssrutor har samma namn som avslutas med hakparenteser.

Scriptet som läser av dem kan se ut så här: <?php

  $aPlats = $_POST['Plats'];
 if(empty($aPlats)) //Inget ikryssat
 {
   echo("Du valde inget resmål.");
 } 
 else
 {
   $N = count($aPlats); //$N är antal ikryssade rutor
   echo("Du valde $N resmål: "); 
   for($i=0; $i < $N; $i++)
   {
     echo($aPlats[$i] . " "); //Valda resmål skrivs inte ut
                              //Utan bokstäverna A-E skrivs ut beroende på om de kryssats i.
    //Skriv t.ex. if ($aPlats[$i]=='A') {echo ('Blomstermåla')}; osv. för att resmålen skall synas
   }
 }
?>

Kommandoknapp[redigera]

Man måste ha en knapp för att kunna skicka resultatet i formuläret till servern:

<input type="submit" name=spara value="OK">

Value är det som står på knappen.

Hur läser PHP av kommandoknappen?[redigera]

Enklast;

if (isset($_POST['spara'])) {
echo 'Du har klickat på knappen spara med texten OK';
}

Bildknapp[redigera]

Det går att göra vilken bild som helst till en knapp, t.ex:

<input type="image" name=myImgButton src="test.jpg" width=50 height=20>

Återställningsknapp[redigera]

Fungerar som de andra knapparna men återställer alla värdena i formuläret till default:

<input type="reset" name=reset value="Ångra">

Gömt fält[redigera]

Ibland vill man inte visa ett visst värde för användarna. Det är halvhemligt, men det räcker med att användaren väljer att "visa källa" för att texten skall bli synlig.

<input type="hidden" name="Language" value="Svenska">

Filöverföring[redigera]

Filöverföringen måste kopplas till ettscript på servern som tar emot filen. Själva elementet i formuläret ser ut så här:

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

Läs mer:http://www.w3schools.com/php/php_file_upload.asp

Andra typer[redigera]

Det finns andra element som är intressanta. Det ena är textfält. Det används istället för "text" om man vill kunna skriva flera rader.


Textarea[redigera]

<textarea name="Kommentar" cols=40 rows=10>
En texruta med 40 tecken i bredd  och 10 synliga rader.
</textarea> 

Flervalsruta[redigera]

Ibland vill man kunna välja fler saker från en lista. Då kan man enklast skapa en flervvalslista.

   <select namn="En Drop-Down lista">
       <option>Alternativ 1</option>
       <option>Alternativ 2</option>
       <option>Alternativ 3</option>
       <option>Alternativ 4</option>
       <option>Alternativ 5</option>
       <option>Alternativ 6</option>
       <option>Osv ...</option>
   </select>

Som standard syns bara ett enda alternativ. Om man vill kunna visa upp flera alternativ skriver man t.ex.

  <select namn="En Drop-Down lista" size=3>

Då visas de tre första av de olika laternativen upp och man får dra i en list för att se resten. Vill man att användaren skal kunna välja fler än ett alternativ kan man sriva:

  <select multiple namn="En Drop-Down lista" size=6>

Då blir det en enda lång lista som syns där man kan klicka i flera val samtidigt. Skriver man däremot:

  <select multiple namn="En Drop-Down lista" size=1>

Får man en drop-down meny där man kan välja flera alternativ även om det bara är ett som syns.

Man kan bara välja flera alternativ om control-tangenten hålls nedtryckt vid valen.