CSS és az űrlapok

Szerző: Sallai András
Copyright © Sallai András, 2013, 2020
Licenc: GNU Free Documentation License 1.3
Web: https://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>

Linkek

http://purecss.io (2020)
http://www.webdesignerdepot.com/ (2020)