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
Label*
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ő
label*
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ő
jelszó
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ő
label
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
Label 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ő
label
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ő
label
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
label*
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;
}