logo   PHP - Input types




Form-taggen og dens input types spiller en meget væsentlig rolle i anvendelsen af PHP, idet det er den vej alle brugerindtastede data kommer ind i programmet og ofte videre ned til databasen.


Input typerne har behov for et "stillads" for at blive vist i den mest hensigtsmæssige opbygning, nemlig lodret over hinanden. Til det er tabeller velegnede og vil blive anvendt efterfølgende heri. En velegnet tabelstruktur er tre kolonner til hhv. betegnelse, * til markering af inddatakrav, og til selve input.feltet.


PHP-koden kan indarbejdes i tabel som vist nedenfor (kun en linie med hver input type):




<form method='post'>
<table>
<tr><td>tekst</td><td><input type='text' name='input-navn' value='<?php echo $variabelnavn'] ?>'/></td></tr>

<tr><td>tekst</td><td colspan="2"><textarea name='input-navn' ROWS='15' COLS='60'> <?php echo $areats_tekst ?> </textarea></td></tr>

<tr><td><input type='submit' name='form-navn' value='Knap tekst' /></td><td></td><td></td></tr>
</table>
</form>


form-navn skal også indsættes i "if (isset ($_POST['form-navn


$variabelnavn = trim ($_POST['input-navn']);
Både input-navn og variabelnavn bør af overskuelighedshensyn være identiske med feltets navn i databasen.


Værdier skal indsættes i value-felterne med almindelige variabelnavne og ikke med $row['array-værdi'].


Nedenfor er vist:

  • Oversigt over den syntaks, der for de enkelte "input types" skal anvendes hhv. i formen, ved udtræk til PHP-variabel og ved validering
  • Eksempel på en tabelstyret form.
  • Etablering af drop-down menu.
  • Anvendelse af "value"-feltet.
  • Form anvendt som knap til link.


Input type
Navn og eksempel		 Input type i form
--------------------
udtræk fra $_POST til variabel
--------------------
validering
--------------------
dynamiske inddata
Button


 <button value="xxx" type="submit">Knap x</button>
<button value="yyy" type="submit">Knap y</button>
--------------------
if (isset($_POST['submit']))
{
}
--------------------
ikke relevant
--------------------
ikke relevant
Checkbox


 <input type="checkbox" name="checkbox1"/>
<input type="checkbox" name="checkbox2" checked="checked" />
--------------------
if (isset($_POST['checkbox1'])){
   $checkbox1 = $_POST['checkbox1'];} /* = on */
else {
   $checkbox1 = 'off';}

if (isset($_POST['checkbox2'])){
   $checkbox2 = $_POST['checkbox2'];} /* = on */
else {
   $checkbox2 = 'off';}
--------------------
Validering næppe relevant
--------------------
?
Color ?
--------------------
?
--------------------
?
--------------------
?
Date
 <input type="date" name="date"/>
--------------------
$date = trim ($_POST['date']);
--------------------
if ($date == "")
{ $fejlbeskeder .= "<p>Dato skal vælges</p>";<br />}
Validering næppe relevant
--------------------
?
DateTime


 <input type="datetime" name="datetime"/>
--------------------
$datetime = trim ($_POST['datetime']);
--------------------
if ($datetime == "") { $fejlbeskeder .= "<p>DatoTid er ikke anført</p> ";} --------------------
?
--------------------
?
Datetime-local
 <input type="datetime-local" name="datetime-local"/>
--------------------
$datetimelocal = $_POST['datetime-local'];
POST-syntaks: aaaa-mm-ddTtt:mm
--------------------
if ($datetimelocal == "") { $fejlbeskeder .= "<p>Lokaltid er ikke anført</p>";}
--------------------
?
Email
 <input type="email" placeholder="mig@eksempel.dk" name="email" />
--------------------
$email = trim ($_POST['email']);
--------------------
Valideringen i browseren er ikke altid god nok. Bruge derfor:
if(!filter_var($email, FILTER_VALIDATE_EMAIL))
{
$fejlbeskeder .= "<p>Der er fejl i E-mail! Du har skrevet: " . $email . "<p />";
}
--------------------
?
File
 se "Form / Post upload billeder"
--------------------
se "Form / Post upload billeder"
--------------------
if (!preg_match("/^[a-zA-Z0-9\-_.]*$/",$file_name))
{
$fejlbeskeder .= "Filnavnet:<br />$file_name<br />indeholder ikke-tilladte tegn.<br />Skal rettes.<br />";
}
--------------------
ikke mulig.
Hidden
 <input type="hidden" name="hidden" value="værdi" />
--------------------
$hidden = trim ($_POST['hidden']);
--------------------
næppe nødvendig
--------------------
?
Image
 <input type="image" src="map.gif" alt="submit" name="submit" />
--------------------
som Submit
--------------------
som Submit
--------------------
som Submit
Month
 <input type="month" name="month" />
--------------------
$month = trim ($_POST['month']);
POST-syntaks: aaaa-mm
--------------------
ikke relevant
--------------------
?
Number
 <input type="number" name="number" min="1920" max="2020" />
--------------------
$number = trim ($_POST['number']);
--------------------
if ($number == "") { $fejlbeskeder .= "<p>Tal ikke anført</p>";}
--------------------
?
Password
 <input type="password" name="password" />
--------------------
$password = trim ($_POST['password']);
--------------------
if ($password == "")
{ $fejlbeskeder .= "Password ikke anført";}
--------------------
?
Radio
Mand Kvinde 		<input type="radio" name="radio" value="mand" /> Mand<input type="radio" name="radio" value="kvinde" checked /> Kvinde
--------------------
if (isset($_POST['radio'])){
$radio = $_POST['radio'];}
--------------------
ikke nødvendig
--------------------
?
Range
 <input type="range" name="range" min="1" max="100" step="5" value="30" />
--------------------
$range = trim ($_POST['range']);
--------------------
ikke nødvendig
--------------------
?
Reset
Overførsel ikke relevant, da kun anvendes indenfor formen baseret på intern JavaScript kode.
Search
 Anvendes som Text
--------------------
?
Submit

 Name udgør link mellem form og $_POST-arrayen.
<input type="submit" name="submit" value="Submit" />
--------------------
if (isset($_POST['submit']))
{
}
--------------------
Anvendes ikke
--------------------
?
Tel

 <input type="tel" name="tel"/>
--------------------
$tel = trim ($_POST['tel']);
--------------------
International validering ikke praktisk mulig. Danske validering kan skabe problemer.
if ($tel == "")
{ $fejlbeskeder .= "Telefonnummer er ikke anført";}
--------------------
?
Text
Når feltet må være tomt

 <input type ="text" name="texta" />
--------------------
$texta = trim ($_POST['texta']);
--------------------
ingen validering
--------------------
value="<?php echo $texta ?/>
Text
Når feltet ikke må være tomt
 <input type ="text" name="textb" />
--------------------
$textb = trim ($_POST['textb']);
--------------------
if ($textb == "")
{ $fejlbeskeder .= "<p>Tekstb må ikke være tom</p> ";<br />}
--------------------
value="<?php echo $texta ?/>
Text
Når feltet skal være et heltal
 ?
--------------------
?
--------------------
?
--------------------
?
Text
Når feltet skal være et beløb med 2 decimaler
 ?
--------------------
?
--------------------
?
--------------------
?
Time
 <input type="time" name="time"/>
--------------------
$time= trim ($_POST['time']);
--------------------
if ($time == "") { $fejlbeskeder .= "<p>Tidspunkt ikke anført</p>";}
--------------------
?
URL
 EI, Firefox og Opera kræver alle start med 'protokol://'. De validerer den dog ikke.
PHP-filter... validerer ikke protokollen.
Chrome synes ikke at kunne submitte URL-data.
<input type="url" name="url" />
--------------------
$url = trim ($_POST['url']);
--------------------
if(!filter_var($url, FILTER_VALIDATE_URL))
{
$fejlbeskeder .= "<p>Der er fejl i den internetadresse du har skrevet</p><br />"; }
--------------------
?
Textarea
 <textarea id="tekstarea" name="textarea" ROWS="3" COLS="25">Indsæt tekst</textarea>
--------------------
$textarea = trim ($_POST['textarea']);
--------------------
if ($textarea == "")
{ $fejlbeskeder .= "textarea == blank ";}
--------------------
<?php echo $kont_besked ?>
Select
 se om Drop-down menu nedenfor
--------------------
if (isset($_POST['fgrf_id'])) {$fgrf_id = $_POST['fgrf_id'];} else { $fgrf_id ="";}
--------------------
if ($fgrf_id == "") { $fejlbeskeder .= "<p>Der er ikke selekteret nogen fotograf.</p>";}
--------------------
?




Tabelbaseret form


En tabelbaseret form med ekstra mellemrum og plads til "skal-udfyldes stjerne" mellem tekst og datafelt, samt med plads til vejledning, kan opbygges således:


<form action="" method="post">
<table>

<tr><td>Tekst</td><td class="tdbred"></td><td><input type ="text" name="text" /></td><td>Vejledn.</td></tr>

<tr><td><input type="submit" name="formpost" value="FormPost" /></td><td></td><td class="tdbred"></td><td></td></tr>

</table>
</form>




Drop down menu


En drop-down menu til et form-felt opbygges således:


Select af en enkelt record (placeret i PreForm modulet):

$query = "SELECT * FROM tabelx";
$result = mysqli_query($db_link,$query);
$antal = mysqli_num_rows ($result);


Tabelrække med indlejret opbygning af drop-down menu (tabelx_id anvendes som link og tabelx_navn vises i drop-down menuen):

echo '<tr><td>Tekst</td><td></td><td>';
echo '<select id="filter" name="tabelx_id">';
echo '<option value="0">Vælg tabelemne</option>'; //indlægges som første menupunkt og vises derfor som default. Kan med value="0" fravælges i validering.
while ($row = mysqli_fetch_assoc ($result))
{
echo '<option value=" '. $row[tabelx_id] .' "> '. $row[tabelx_navn] .' </option>';
}
echo '</select>';
echo '</td></tr>';




Value feltet


Value-feltet knyttet til den enkelte input type kan under opbygningen af en form anvendes på 5 forskellige måder. (De 2 sidste kan kombineres):


  • Anvendelse nødvendig
    I disse 5 input types er det af hensyn til funktionaliteten nødvendigt at anvende deres value-felt: Button, Hidden, Radio, Range, Submit.
  • Udelades
    Ved de øvrige input types kan feltet udelades i opbygningen. Når der under indtastning bliver tilført data til det bliver det automatisk etableret.
  • Faste data
    Der kan indsættes faste data i feltet ved at oprette det og indsætte de relevante data.
  • Dynamiske default inddata
    Default data fra et databaseudtræk kan indsættes ved at oprette value feltet og tilføre data til den indsatte variabel.
  • Dynamiske inddata ved fejl
    Har brugeren foranlediget en fejlindtastning, kan den oprindelige indtastning vises igen ved at oprette value-feltet og overføre POST-variabler dertil.




Billeder som knapper


 <form>
<input type="image" name="submit" src="/.../.../right.gif" border="0" alt="Submit" />
</form>
<button type="submit">
<img src="/.../.../right.gif" />
</button>
<style>
.button { background:none; }
<style>

<button type="submit" name="submit" class="button"><img src="/.../.../right.gif" /></button>




















x
x