szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:css|< CSS]]

====== CSS és az űrlapok ======

  * **Szerző:** Sallai András
  * Copyright (c) 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 =====


<code css>
label {
	display: inline-block;
	width: 80px;
}
</code>



<html>
<style>
label {
	display: inline-block;
	width: 80px;
}
</code>

</style>

<form action="insert.php" method="post">

<label>Név</label><input type="text" name="nev" id="nev"><br>
<label>Település</label><input type="text" name="telepules" id="telepules"><br>
<label>Lakcím</label><input type="text" name="lakcim" id="lakcim"><br>
<label>Születés</label><input type="text" name="szuletes" id="szuletes"><br>
<label>Fizetés</label><input type="text" name="fizetes" id="fizetes"><br>
<label>Juttatás</label><input type="text" name="juttatas" id="juttatas"><br>
<label>Kocsi</label><input type="text" name="kocsi" id="kocsi"><br>
</form>

</html>



===== Helyőrző =====

<code html>
<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>
</code>


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


<div class="pure">
<input type="text" name="" placeholder="Keresztnév">
</div>
</html>

===== Beléptető =====

<code html>
<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>
</code>

<code css>
form#egy label {
    width: 200px;
    display: inline-block;
}
</code>

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.


<code css>
#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;
}
</code>

<code html>
<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>
</code>


===== Linkek =====

  * http://purecss.io (2020)
  * [[http://www.webdesignerdepot.com/2013/03/how-to-make-your-contact-forms-mobile-friendly/|http://www.webdesignerdepot.com/]] (2020)