Inline elemek

A HTML-ben található elemek közül amelyek nem tartoznak a blokk elemek közé, azokat, néhány kivétellel, az inline elemek közé soroljuk.

Az Inline elemek abban különböznek a blokk elemektől, hogy a szélességben elfoglalt méretük, akkora amekkora a bennük levő tartalom mérete, így ha két inline elemet írunk egymás után, akkor azok egymás mellé fognak kerülni, amíg a két elem összmérete kisebb, mint a rendelkezésre álló hely mérete. Pl:

a. Inline elemek amikor a méretük kisebb, mint a rendelkezésre álló szélesség:

Inline elem 1 Inline elem 2

    <span>Inline elem 1</span>
    <span>Inline elem 2</span>


        

b. Inline elemek amikor a méretük nagyobb, mint a rendelkezésre álló szélesség:

Inline elem 2 Ebben az inline elemben akkora tartalom van, hogy a másik inline elem nem fér be melléje, ezért új sorba kerül, remélhetőleg, de ha nem, akkor picit össze kell nyomjuk a böngészőt.

    <span>
        Ebben az inline elemben akkora tartalom van, hogy a másik inline elem nem fér be melléje,
        ezért új sorba kerül, remélhetőleg, de ha nem, akkor picit össze kell nyomjuk a böngészőt.
    </span>
    <span>Inline elem 2</span>


        

A HTML-ben található gyakran használt inline elemek a következők: span, label, a, table, form, input, select, textarea, stb.

Az inline elemek belsejébe csak inline elemeket szabad írni!
Ami még fontos, hogy az "a" elem belsejébe írt label tag esetében amikor rákattintunk a linkre, az "a" tag nem fog átírányitani minket a megadott címre!

    <label>
        <a href="">
            Wannacode.<span>com</span>
        </a>
    </label>


        

Az elemek egymásba ágyazásának nincs limitálása, akárhány elemet egymásba írhatunk.

Az inline elemek leírása

1. Az input elem

Ez az elem egy multifunkciós elem, a szerepe, hogy az oldalon megjelenítsünk szövegmezőt, bepipálható négyzetet (checkbox), vagy kiválasztható gombokat (radio).

Ennek az elemnek nincs záró párja. Egy kötelező tulajdonsága van, a type, ennek segítségével mondhatjuk meg, hogy milyen elemet szeretnénk kirakni. Értékei lehetnek: text (szövegmező), checkbox (bepipálható négyzet), radio (kiválasztható gomb), button (gomb), image (egy kép), file (fájl kiválasztó). Kép esetében még fontos megadni az src tulajdonság értékét, amely a képhez vezető címet kell tartalmazza, text, checkbox, button és radio esetében a value-t. Gomb esetében a value értéke jelenik meg a gombbon, szövegmező esetében az lesz beírva a szövegmezőbe.

Szövegmező:

Checkbox:

Radio:

Gomb:

    // Szövegmező
    <input type="text" value="ez egy szövegdoboz" />

    // Bepipálható négyzet
    <input type="checkbox" value="1" />

    // kiválasztható gomb
    <input type="radio" value="1" />

    // Gomb
    <input type="button" value="Ez egy gomb" />


        

2. A select elem

Ennek az elemnek a segítségével megjeleníthetünk az oldalon egy legördülő listát, amelyből kiválaszthatunk egy vagy több elemet. Használata egyszerű: egy select tag-ba annyi option tagot írunk, ahány kiválasztható elemet szeretnénk beletenni. Minden option tagnak meg kell határozni a value tulajdonságát, ez alapján tudjuk, hogy melyik van/volt kiválasztva. A value értéke lehet bármi: szám, szöveg, stb.

    <select>
        <option value="">Választható szöveg 1</option>
        <option value="1">Választható szöveg 2</option>
        <option value="2">Választható szöveg 3</option>
        <option value="3">Választható szöveg 4</option>
    </select>


        

3. A textarea elem

Ennek az elemnek a segítségével megjeleníthetünk egy szövegdobozt, amelybe akármekkora szöveget írhatunk. Két fontos tulajdonsága van, hogy hány sornyi és hány karakternyi helyet foglaljon el. Ezeket a rows és a cols tulajdonságok segítségével állíthatjuk be. Szövegdoboz esetén a szöveget nem a value tulajdonságban kell megadni, hanem a nyitó és a záró tag között.

    <textarea rows="4" cols="20">Ide jön a szöveg</textarea>


        

4. A label elem:

A label elem egy szövegmegjelenítő elem, melyet címkeként szoktak használni más mezők mellett, pl. egy bepipálható kis négyzet (checkbox) mellett, vagy egy szövegmező mellett. Használata:

    <label>Wannacode.com</label>


        

Van egy fontos tulajdonsága, amit akkor szoktunk beállítani amikor címkeként használjuk, ez a for, mellyel be tudjuk állítani, hogy melyik elemnek a cimkéje, ez esetben ha rákattintunk a label szövegére, olyan lesz, mintha az adott elemre kattintottunk volna. Ehhez a "for" tulajdonságnak meg kell adjuk az adott elem id-jét az alábbi módon:
 

    <input type="checkbox" id="test_checkbox_1" />
    <label for="test_checkbox_1">Wannacode.com</label>


        

5. A span elem

Szintén szövegmegjelenítő elem, bár inkább akkor szokás használni, amikor egy szövegben ki akarunk emelni egy másikat, pl. amikor a Wannacode.com szövegben a .com-t szeretnénk másképp írni, kisebb betűvel, más színnel, más betűtípussal, stb.

Használata egyszerű:

    <span>Wannacode.com</span>

    // vagy

    <label>
        Wannacode.
        <span>com</span>
    </label>


        

6. Az a (hivatkozás) elem

Ez az elem egy hivatkozás (link) megjelenítő elem, melynek a szerepe az, hogy ha rákattintunk a szövegre, akkor a böngészőnk elvigyen a weboldalon belül egy másik oldalra, vagy egy teljesen új weboldalra is akár.
Egy db. kötelező tulajdonsága van, a href, melynek az értéke kell legyen az új cím ahova megyünk kattintás esetén. Üresen hagyás esetén az oldal újratöltödik.

    <a href="Ide jön a cím, pl: http://www.wannacode.com">
        Hivatkozáshoz megjelenítendő szöveg amire kattintsunk
    </a>


        

A hivatkozások esetében még van egy fontos tulajdonság, a target, ennek segítségével állíthatjuk be, hogy az új cím amerre megyünk új ablakban nyiljon meg vagy az aktuális ablakban. Értékei lehetnek: _blank (új ablakban), _parent (a szülő ablakában), _self (aktuális ablakban, ez az alap), _top.

    <a href="" target="_blank">
        Hivatkozáshoz megjelenítendő szöveg amire kattintsunk
    </a>


        

7. A table elem

Ennek az elemnek a segítségével megjeleníthetünk egy táblázatot az oldalon, vagy egy táblázat szerű elrendezést. A táblázatot soronként, a sorokat oszlopokként kell felépítenünk. Egy sor kitevéséhez a tr (table row) tagot használjuk, egy oszlop kitevéséhez a td tagot.

    <table>
        <tr>
            <td>Oszlop 1</td>
            <td>Oszlop 2</td>
            <td>Oszlop 3</td>
        </tr>
        <tr>
            <td>Sor 1</td>
            <td>Sor 1</td>
            <td>Sor 1</td>
        </tr>
        <tr>
            <td>Sor 2</td>
            <td>Sor 2</td>
            <td>Sor 2</td>
        </tr>
    </table>


        

8. A form elem

A form elem használata lehetővé teszi számunkra, hogy az inputok, szövegdobozok értékeit (value-jait) el tudjuk küldeni a weboldal számára, pl. amikor bejelentkezünk egy weboldalon. Az elküldéshez szükségünk van egy input elemre, melynek a type értéke egyenlő submit-al. Használata egyszerű, minden amit el szeretnénk küldeni, azt betesszük egy nyitó és záró form tag közé:

    <form>
        <label for="test_text_1">Szövegmező 1</label>
        <input type="text" id="test_text_1" />

        <label for="test_checkbox_2">Checkbox 1</label>
        <input type="checkbox" id="test_checkbox_2" />

        <br />
        <input type="submit" value="Adatok küldése" />
    </form>


        

Két kötelező tulajdonságot kell beállítanunk, az action-t mely meghatározza azt a címet, ahova küldjük az adatokat és a method-t, hogy milyen formában küldjük, látható (GET) vagy láthatatlan (POST).