COOKIE, SÜTIKEZELÉSA Portál süti (cookie) fájlokat használ, melyeket az Ön gépén tárolja a rendszer. A cookie-k személyek azonosítására nem alkalmasak, szolgáltatásaink biztosításához szükségesek. Az oldal használatával Ön beleegyezik a cookie-k használatába. További információért kérjük, olvassa el Adatvédelmi szabályzatunkat .

HU EN

Beviteli mezők

legend elem

Legend
html
<legend>Legend elem</legend>
css
legend {
     color: #000;
     font-size: 1rem;
     text-transform: uppercase;
     padding: 25px 0 10px 0;
     border-bottom: 1px solid #ccc;
     font-weight: 700;
     display: inline-block;
     margin: 0 0 15px 0;
     line-height:normal;
}

label elem

html
<label for="" class="control-label">Label elem<small>*</small><span>kitöltési javaslat</span></label>
css
.control-label, label {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1rem;
}
label>small, label+small {
  color: #c20029;
  vertical-align: top;
  margin-left: 5px;
}
.control-label>span {
  font-size: .8rem;
  margin-left: 10px;
  text-transform: none;
  font-weight: 400;
  color: #000;
}

E-mail mező

html
<div class="form-group">
    <label class="control-label" for="emailMezo">label<small>*</small><span>valami@valami.hu</span></label>
    <input type="email" class="form-control" id="emailMezo" name="emailMezo" required aria-label="Adja meg az email címét" aria-required="true" autocomplete="email">
</div>
css
.control-label, label {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1rem;
}
label+small, label>small {
  color: #c20029;
  vertical-align: top;
  margin-left: 5px;
}
.control-label>span {
  font-size: .8rem;
  margin-left: 10px;
  text-transform: none;
  font-weight: 400;
  color: #000;
}
.form-control {
  font-weight: 700;
  font-size: .8rem;
  color: #000;
}

jelszó mező

html
<div class="form-group">
    <label class="control-label" for="jelszoMezo">jelszó</label>
    <input id="jelszoMezo" name="jelszoMezo" class="form-control" type="password" aria-label="Adja meg a jelszavát" aria-required="false" autocomplete="current-password">
</div>
css
.control-label, label {
 text-transform: uppercase;
 font-weight: 400;
 font-size: 1rem;
}
label+small, label>small {
 color: #c20029;
 vertical-align: top;
 margin-left: 5px;
}
.control-label>span {
 font-size: .8rem;
 margin-left: 10px;
 text-transform: none;
 font-weight: 400;
 color: #000;
}
.form-control {
 font-weight: 700;
 font-size: .8rem;
 color: #000;
}

normál szöveges mező

html
<div class="form-group">
    <label class="control-label" for="normalMezo">Normál text input<span>kitöltési javaslat</span></label> 
    <input id="normalMezo" name="normalMezo" class="form-control" type="text" aria-label="Leírás szövege" aria-required="false">
</div>
css
.control-label, label {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1rem;
}
label+small, label>small {
  color: #c20029;
  vertical-align: top;
  margin-left: 5px;
}
.control-label>span {
  font-size: .8rem;
  margin-left: 10px;
  text-transform: none;
  font-weight: 400;
  color: #000;
}
.form-control {
  font-weight: 700;
  font-size: .8rem;
  color: #000;
}

szöveges mező tooltippel

html
<div class="form-group">
    <div class="relative clearfix">
        <label for="longName" class="control-label" id="help_01">label<small>*</small><span>kitöltési javaslat</span></label> <a data-placement="top" class="help pull-right" role="tooltip" aria-labelledby="help_01" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Súgó szövege" tabindex="0" aria-label="súgó szövege"><i class="far fa-question-circle" aria-hidden="true"></i></a></div>
   <input type="text" class="form-control" id="longName" name="longName" value="" required aria-required="true" aria-label="Leíró szöveg" autocomplete="on">
</div>
css
.form-group {
     margin-bottom: 25px;
}
 .relative {
     position: relative;
}
.control-label, label {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1rem;
}
label+small, label>small {
  color: #c20029;
  vertical-align: top;
  margin-left: 5px;
}
.control-label>span {
  font-size: .8rem;
  margin-left: 10px;
  text-transform: none;
  font-weight: 400;
  color: #000;
}
.form-control {
  font-weight: 700;
  font-size: .8rem;
  color: #000;
}
main a.help {
  display: inline-block;
  font-size: 1rem;
}
main a {
  color: #33f;
  font-weight: 700;
  border-bottom: 1px solid transparent;
  padding: 0 0 3px 0;
  -webkit-transition: color .5s ease-out,border-bottom .5s ease-out;
  transition: color .5s ease-out,border-bottom .5s ease-out;
  cursor: pointer;
  outline: 0;
}
main a.help>.far {
  font-weight: 700;
}

hiba esetén

Hiba szöveges leírása
html
<div class="form-group has-error">
	<label class="control-label" for="hibasMezo">Label<span>kitöltési javaslat</span></label>
	<input id="hibasMezo" name="hibasMezo" class="form-control" type="text" aria-label="Leíró szöveg" aria-required="true" aria-invalid="true" aria-describedby="inputHibauzenet" />
	<span class="help-block" id="inputHibauzenet" aria-live="assertive">Hiba szöveges leírása</span>
</div>
css
.form-group {
     margin-bottom: 25px;
}
 .control-label, label {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1rem;
}
label+small, label>small {
  color: #c20029;
  vertical-align: top;
  margin-left: 5px;
}
.control-label>span {
  font-size: .8rem;
  margin-left: 10px;
  text-transform: none;
  font-weight: 400;
  color: #000;
}
.form-control {
  font-weight: 700;
  font-size: .8rem;
  color: #000;
}
.has-error .control-label, .has-error label {
  color: #c20029;
  font-weight: 700;
}
.has-error .form-control {
  border-color: #c20029;
}
.has-error .help-block {
  font-size: .8rem;
  color: #c20029;
  margin-bottom: 0;
}

Tiltott beviteli mező

html
<div class="form-group">
    <label class="control-label" for="tiltottMezo">Disabled input<span>kitöltési javaslat</span></label>
    <input id="tiltottMezo" name="tiltottMezo" class="form-control" disabled="disabled" aria-disabled="true" type="text">
</div>
css
.form-group {
  margin-bottom: 25px;
}
.control-label, label {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1rem;
}
label+small, label>small {
  color: #c20029;
  vertical-align: top;
  margin-left: 5px;
}
.control-label>span {
  font-size: .8rem;
  margin-left: 10px;
  text-transform: none;
  font-weight: 400;
  color: #000;
}
.form-control {
  font-weight: 700;
  font-size: .8rem;
  color: #000;
}

Csak olvasható beviteli mező

html
<div class="form-group">
    <label class="control-label" for="csakolvashatoMezo">Readonly input<span>kitöltési javaslat</span></label> 
    <input id="csakolvashatoMezo" name="csakolvashatoMezo" class="form-control" readonly type="text">
</div>
css
.form-group {
  margin-bottom: 25px;
}
.control-label, label {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1rem;
}
label+small, label>small {
  color: #c20029;
  vertical-align: top;
  margin-left: 5px;
}
.control-label>span {
  font-size: .8rem;
  margin-left: 10px;
  text-transform: none;
  font-weight: 400;
  color: #000;
}
.form-control {
  font-weight: 700;
  font-size: .8rem;
  color: #000;
}

textarea

html
<div class="form-group">
    <label class="control-label" for="szoveg">üzenet szövege<small>*</small><span>kitöltési javaslat</span></label>
    <textarea aria-label="Üzenet szövege" class="form-control" id="szoveg" name="szoveg" rows="5" required aria-required="true" aria-label="Üzenet szövege"></textarea>
</div>
css
.form-group {
  margin-bottom: 25px;
}
.control-label, label {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1rem;
}
label+small, label>small {
  color: #c20029;
  vertical-align: top;
  margin-left: 5px;
}
.control-label>span {
  font-size: .8rem;
  margin-left: 10px;
  text-transform: none;
  font-weight: 400;
  color: #000;
}
.form-control {
  font-weight: 700;
  font-size: .8rem;
  color: #000;
}
textarea.form-control {
  height: auto;
}