Stylizowanie elementów formularza

workshop: #26c6-form-elems.html

Mini-warsztat CSS: obsługa formularzy

Przykłady drobnych rozwiązań przeznaczonych do wspomagania formularzy.

Przygotowanie

Wykonuj krok po kroku przykłady obserwując działanie poszczególnych reguł.

Przygotuj formularz złożony z nastepujących pól (nie zapomnij o atrybucie FOR dla znacznika LABEL):

Identyfikator wpisu: etykieta + pole tekstowe (zablokowane)
Nazwisko osoby: etykieta + pole tekstowe (w drugim kroku wymagane)
Imię osoby: etykieta + pole tekstowe (w drugim kroku wymagane)
Miasto zamieszkania: etykieta + pole tekstowe
Klasa osoby: etykieta + pole wyboru typu SELECT
Płeć osoby: etykieta + dwa pola wyboru typu RADIO
Zgody: etykieta + pola wyboru typu CHECKBOX + etykieta
Przycisk: wyślij typu SUBMIT + drugi przycisk (w ostatnim kroku, zablokowany)

WAŻNE!!! Wysyłając wykonane zadanie należy wskazać używaną przeglądarkę internetową oraz dodać komentarz odnosnie reguł, które nie działały.

1 Formularz z polami edytowalnymi i zablokowanymi

label {
  display: inline-block;
  min-width: 6rem;
  padding-right: .5rem;
  text-align: right;
}
input, button {
  border: solid 1px #808080;
  border-radius: 7px;
  display: inline-block;
  padding: .4rem .6rem;
  margin-right: 5rem;
}
label, input { margin-bottom: .5rem; }
input:disabled,
.locked[type="submit"], [type="submit"]:disabled {
  background-color: #e5e8e7;
  color: #808080;
}
button, input[type="submit"] { font-weight: 800; }
[type="submit"] {
  background-color: blue;
  color: white;
}
.locked[type="submit"], [type="submit"]:disabled { font-weight: normal; }
[type="submit"]::after { content: "Prześlij"; }
[type="submit"]:disabled::after { content: "Uzupełnij"; }

2 Formularz z polami wymaganymi oraz aktywnymi i nieaktywnymi

Dla pól Naziwsko oraz Imię dodaj atrybut required wraz z odpowiednią regułą CSS dodającą znak * za kontrolką INPUT

Po dopisaniu reguł dla formularza przetestuj działanie pseudo-klasy :focus poprzez uaktywnienie pola Nazwisko wklikując się myszą, a następnie używając przycisku TAB nawiguj do następnych pól.

.step:not(.stp1) input::after {
  content: "*";
  color: red;
  display: block;
}
.step:not(.stp1) input:valid {
  background-color: rgba(0,255,0,0.3);
  border-color: green;
}
.step:not(.stp1) input:invalid {
  background-color: rgba(255,0,0,0.3);
  border-color: red;
  box-shadow: rgba(255,0,0,0.3) 0px 0px 1.5px 1px;
}
input:focus, .step:not(.stp1) input:focus {
  background-color: rgba(255,220,0,0.5);
  border-color: rgb(255,215,0);
}

3 Formularz z polami do wyboru lub zaznaczenia

/* HTML */
<label>Klasa</label>
<select name="klasa">
  <option value="1dt5">1DT5</option>
  <option value="1pt4">1PT4</option>
  <option value="1pt5">1PT5</option>
</select>
<label>Płeć</label>
<input type="radio" name="pl" value="m" id="plm" />
  <label for="plm">Mężczyzna</label>
<input type="radio" name="pl" value="k" id="plk" />
  <label for="plk">Kobieta</label>
  <label id="agree">Zgody</label>
<input type="checkbox" id="rules0" />
  <label for="rules0">Znam i Akcaeptuję
  postanowienia rugulaminu</label>
/* CSS **********************/
label + select { margin-right: 16rem;}
[type="checkbox"] + label,
[type="radio"] + label { margin-right: 8rem;}
#agree + [type="checkbox"],
#agree + [type="checkbox"] + label { margin-right: .5rem;}
[type="checkbox"], [type="radio"],
select { border: solid 2px purple; }
[type="checkbox"], [type="radio"], option {
  background-color: yellow;
  color: #808080;
}

4 Formularz z polami ukrywanymi i zastępowanymi przez CSS

Dodaj drugi przycisk wysłania formularza zaraz za pierwszym, dodaj mu atrybut disabled oraz dopisz właściwe reguły, które bez akceptacji regulaminu nie pozwolą wysłać formularza. Przeanalizuj reguły i dopasuje je do każdego elementu.

/* HTML *** dodaj LUB zmień kod */
<select size="3" name="klasa">
<button type="submit" class="send"></button>
<button type="submit" class="send" disabled></button>
/* CSS **********************/
[type="radio"] + label { text-align: center; }
:checked, :checked + label {
	background-color: rgba(0,255,0,0.3);
	border: solid 2px green;
}
:checked {	border-radius: 7px 0 0 7px;	}
:checked + label { border-radius: 0 7px 7px 0; }

.stp4 #rules, .stp4 [type="radio"] { display: none; }
.stp4 #rules + label::before,
.stp4 [type="radio"] + label::before {
	color: black;
	display: inline-block;
	border: solid 2px #808080;
	border-radius: 5px;
	font-size: .8rem;
	font-weight: 800;
	line-height: .8rem;
	margin: 0 .5rem;
	text-align: center;
	height: 0.8rem;
	width: 0.8rem;
	vertical-align: top;
}
.stp4 [type="radio"] + label::before {	border-radius: 50%; }
.stp4 #rules:checked + label::before { content: "\02713"; }
.stp4 [type="radio"]:checked + label::before { content: "\02022"; }
.stp8 [type="radio"]:checked + label::before { content: "\029BF"; }
.stp4 form:invalid [type="submit"],
.stp4 #rules:not(:checked) ~ [type="submit"] { display: none; }
.stp4 form:invalid [type="submit"],
.stp4 #rules:not(:checked) ~ [type="submit"] +[type="submit"]:disabled
{ display: initial; }
.stp4 form:valid [type="submit"],
.stp4 #rules:checked ~ [type="submit"] { display: initial; }
.stp4 form:valid [type="submit"],
.stp4 #rules:checked ~ [type="submit"] + [type="submit"]:disabled
{ display: none; }

Zasoby lekcji

Przygotowanie