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="form-label">Label elem<small>*</small></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;
}

E-mail mező

html
<div class="form-group">
    <label for="emailMezo" class="form-label">E-mail<small>*</small></label>
    <input type="email" class="form-control" id="emailMezo" name="emailMezo" placeholder="Email"  required aria-label="Adja meg az email címét" aria-required="true" autocomplete="email">
</div>
css
input.form-control {
     padding: 6px;
     font-size: 0.8rem;
}
 .form-control {
     font-weight: 700;
     outline:none;
}

jelszó mező

html
<div class="form-group">
    <label class="form-label" for="jelszoMezo">jelszó</label>
    <input id="jelszoMezo" name="jelszoMezo" class="form-control" type="password" placeholder="Password" aria-label="Adja meg a jelszavát" aria-required="false" autocomplete="current-password">
</div>
css
.form-group {
     margin-bottom: 25px;
}
 .control-label, label {
     text-transform: uppercase;
     font-weight: 400;
     font-size: 1rem;
}
input.form-control, 
textarea.form-control {
     padding: 6px;
     font-size: 0.8rem;
}

normál szöveges mező

html
<div class="form-group">
    <label class="form-label" for="normalMezo">Normál text input</label> 
    <input id="normalMezo" name="normalMezo" class="form-control" type="text" placeholder="szöveg" aria-label="Leírás szövege" aria-required="false">
</div>
css
.form-group {
     margin-bottom: 25px;
}
 .control-label, label {
     text-transform: uppercase;
     font-weight: 400;
}
input.form-control,
textarea.form-control {
     padding: 6px;
}
input.form-control:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
	border-color: #50B5E6;
}

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></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" placeholder="" 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: #D82937;
}
 main a.help {
     display: inline-block;
     font-size: 1rem;
}
 input.form-control, textarea.form-control {
     padding: 6px;
}
 .form-control {
     font-weight: 700;
     font-size: 0.8rem;
}

hiba esetén

Hiba szöveges leírása
html
<div class="form-group has-error">
	<label class="form-label" for="hibasMezo">Label</label>
	<input id="hibasMezo" name="hibasMezo" class="form-control" type="text" placeholder="példa szöveg" 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;
}
input.form-control,
textarea.form-control {
     padding: 6px;
     font-size: 0.8rem;
}
 .has-error label {
     color: #c20029;
     font-weight: 700;
}
 .has-error .form-control {
     border-color: #c20029;
}
 span.help-block {
     font-size: 0.8rem;
}

Tiltott beviteli mező

html
<div class="form-group">
    <label class="form-label" for="tiltottMezo">Disabled input</label>
    <input id="tiltottMezo" name="tiltottMezo" class="form-control" disabled="disabled" aria-disabled="true" type="text" placeholder="szöveg">
</div>
css
.form-group {
     margin-bottom: 25px;
}
 .control-label, label {
     text-transform: uppercase;
     font-weight: 400;
     font-size: 1rem;
}
 input.form-control, textarea.form-control {
     padding: 6px;
     font-size: 0.8rem;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
     background-color: #f2f2f2;
}

Csak olvasható beviteli mező

html
<div class="form-group">
    <label class="form-label" for="csakolvashatoMezo">Readonly input</label> 
    <input id="csakolvashatoMezo" name="csakolvashatoMezo" class="form-control" readonly type="text" placeholder="szöveg">
</div>
css
.form-group {
     margin-bottom: 25px;
}
 .control-label, label {
     text-transform: uppercase;
     font-weight: 400;
     font-size: 1rem;
}
input.form-control,
textarea.form-control {
     padding: 6px;
     font-size: 0.8rem;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
     background-color: #f2f2f2;
}

textarea

html
<div class="form-group">
    <label class="text-uppercase control-label" for="szoveg">üzenet szövege<small>*</small></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;
}
 textarea.form-control {
     padding: 6px;
     font-size: 0.8rem;
}