Skip navigation

Az űrlap

konyvtarindex.html

A programkód szinte magáért beszél. Az oldalon léltrehozunk egy űrlapot. A <form> elemben most POST metódussal fogjuk átküldeni az adatokat. Az adatokat a konyvfelvitel.php fájl fogja feldolgozni (ez a fájl nem jelenik meg weboldal formájában, a feladata csak a feldolgozás). Egy újabb attribútummal egészült ki a <form> elem ebben a példába. A accept-charset="utf-8" attribútummal azt adjuk meg, hogy az inputot is UTF-8 kódolásúnak tekintse.

Ahhoz, hogy az űrlapelemek rendezettek legyenek, CSS stílusokat használtunk. Ezen kurzus keretében nem foglalkozunk a CSS tárgyalásával, de az érdeklődők utánanézhetnek a W3School weboldalán.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF8" >
<style>
    label {
        margin: 5px;
        padding: 5px;
        text-align: left;
        display: inline-block;
        min-width: 120px;
    }

    input {
        margin: 5px;
        padding: 5px;
        text-align: left;
        display: inline-flex;
        vertical-align: bottom;
    }
</style>
</HEAD>
<BODY>

<h1>Könyvek felvitele</h1>

<form method="POST" action="konyvfelvitel.php" accept-charset="utf-8">
   
    <label>Könyv száma: </label>
    <input type="text" name="konyvszam" />
    <br>
    <label>Könyv címe: </label>
    <input type="text" name="cim" />
    <br>
    <label>Szerző: </label>
    <input type="text" name="szerzo" />
   <br>
   <label>Kiadó: </label>
   <input type="text" name="kiado" />
   <br>
   <label>Kiadás éve: </label>
   <input type="text" name="ev" />
   <br>
   <input type="submit" value="Elküld" />

</form>

</BODY>
</HTML>

Megjegyzés

Nehéz olyan sokáig használható informatikai tananyagot készíteni, amely a rohamos technológiai változásokat követi. Nem szerettünk volna különböző keretrendszereket használni, inkább csak az alapvető ismeretek átadására szorítkozunk. Másrésztől tisztában vagyunk azzal, hogy a HTML5 jelenti a legmodernebb webes technológiát. Aki a HTML alapokkal tisztában van, és szeretné tudását a HTML5 irányában bővíteni javasoljuk az alábbi weboldalakat: