< CSS

CSS és az űrlapok

Szerző: Sallai András

Copyright © Sallai András, 2013

Licenc: GNU Free Documentation License 1.3

Web: http://szit.hu

A label elem szélességének meghatározása

label { display: inline-block; width: 80px; }

Helyőrző

<style> .pure { display: inline; } </style> <div class="pure"> <input type="text" name="vnev" placeholder="Vezetéknév"> </div> <div class="pure"> <input type="text" name="knev" placeholder="Keresztnév"> </div>

Beléptető

<form id="egy"> <label for="user">Felhasználónév:</label> <input type="text" name="user" /><br /> <label for="pass">Jelszó:</label> <input type="password" name="pass" /><br /> <input type="submit" value="Bejelentkezés" /> <form>
form#egy label { width: 200px; display: inline-block; }

Az input elemek tördelése a br elem mellett lehet div elemmel vagy p elemmel. Ez utóbbiról tudni kell, hogy nagyobb távolságot hagy a kettő között.

Beléptető vizuális elemekkel

Űrlapok számára létrehozott vizuális elem a fieldset és a legend.

#urlap { text-align: center; } form { background-color: #996600; padding: 15px; display: inline-block; border-radius: 5px; } fieldset { border-style: none; background-color: orange; border-radius: 5px; } legend { color:white; background-color: blue; font-family: sans-serif; border-style: none; border-radius: 5px; text-align: center; padding: 3px; } form#egy label { display: inline-block; width: 100px; text-align: left; }
<div id="urlap"> <form id="egy"> <fieldset> <legend>Azonosítás</legend> <label for="user">Felhasználónév: </label> <input type="text" name="user" required /><br> <label for="pass">Jelszó: </label> <input type="password" name="pass" ><br> <div> <input type="submit" value="Bejelentkezés" /> </div> </fieldset> </form> </div>

Link

http://purecss.io