piątek, 2020-11-27

Podstawowe style CSS dla formularza

Przy wykorzystaniu domyślnych stylów przeglądarki formularz nie wygląda zbyt dobrze. W materiale skupiono się nad sposobem uzyskania czytelnej struktury jego elementów. Prezentowane rozwiązania nie wyczerpują tematu.

Przykład 1

Wpisz imię: Wpisz nazwisko:

Kod HTML:

<form action="" class="test-form">
  <label for="fimie">Wpisz imię:</label>
  <input id="fimie" type="text">
  <label for="fnazwisko">Wpisz nazwisko:</label>
  <input id="fnazwisko" type="text">
  <input type="submit" value="Zapisz">
</form>

Dla elementu input typu submit znacznik label nie powinien być stosowany, do oznaczenia jego przeznaczenia służy atrybut value.

Kod CSS:

.test-form input {
  display:block;
  margin-bottom:10px;
  margin-top:5px;
}

Kluczowe znaczenie ma własność display:block elementu input.

Przykład 2

• Wpisz imię:
• Wpisz nazwisko:

Formularz w drugim przykładzie otrzymał strukturę poprzez zastosowanie listy. Pod względem semantycznym języka lista jest niezłym rozwiązaniem, formularz można rozumieć jako listę pól do wypełnienia. Na pewno jest to lepsza opcja niż np. akapit (znacznik p). Zastosowanie jakiejś struktury powoduje, że nawet wobec braku stylów CSS i dużego rozmiaru formularz jest nadal dość czytelny.

Kod HTML:

<form action="#" class="test-form">
<ul>
  <li>
    <label for="fimie">Wpisz imię: </label>
    <input id="fimie" type="text">
  </li>
  <li>
    <label for="fnazwisko">Wpisz nazwisko: </label>
    <input id="fnazwisko" type="text">
  </li>
  <li>
    <input type="submit" value="Zapisz">
  </li>
</ul>
</form>

Kod CSS:

.test-form {
  width:400px;
}
.test-form label{
  display:block;
  float:left;
  width:50%;
  text-align: right;
  margin-right: 1%;
}
.test-form ul, .test-form li{
  list-style-type:none;
  margin: 0;
  padding: 0;
}
.test-form li {
  margin-bottom: 5px;
}
.test-form input[type="submit"]{
  margin-left: 51%;
}

Kluczowym elementem w prezentowanym rozwiązaniu są własności display:block, float:left oraz szerokość nadane dla elementów label. W przypadku wystąpienia w formularzu innych kontrolek, etykiet umieszczonych z prawej strony kod CSS będzie wymagał pewnych modyfikacji, jednak wykorzystanie własności float i szerokości do pozycjonowania elementów formularza sprawdza się di dziś od kilkunastu lat. Metoda ta była bardzo popularna pośród twórców stron internetowych, obecnie elementy pływające można zastąpić innymi rozwiązaniami.

Ostatni input (typu submit) nie ma etykiety i dlatego musi otrzymać dodatkowe style. Zastosowanie marginesu z lewej strony pozwala zastąpić brakujący zmacznik label. Wartość 51 otrzymano sumując szerokość elementu label (50) oraz jego marginesu z prawej strony (1).

Przykład 3

• Wpisz imię:
• Wpisz nazwisko:

W prezentowanym rozwiązaniu wykorzystano kod HTML z poprzedniego przykładu.

Przez wiele lat do rozmieszczania elementów formularza (i nie tylko) wykorzystywano tabele. Obecnie dostępna jest własność display: table i jej pokrewne, dlatego stary pomysł można wykorzystać bez stosowania jakichkolwiek znaczników związanych z tabelą. W prezentowanym rozwiązaniu elementem wyświetlanym tak jak tabela stała się lista (ul). Po nadaniu jej elementom li własności display: table-row (wiersze tabeli) oraz dołączeniu do pól formularza (input) i ch etykiet (label) własności table-cell (komórki tabeli) zamierzony efekt jest już prawie osiągnięty. Poprawki wymaga jedynie ostatni input (typu submit), który nie ma etykiety.

Zapis .test-form li:last-child odwołuje się do ostatniego elementu listy zawartej w formularzu. Zapis :before oznacza pseudoelement wstawiany na początku danego elementu. W przykładzie na początku ostatniego elementu listy wstawiono zawartość wyświetlaną jak komórka tabeli (display: table-cell) z „pustą” zawartością (content:''). W efekcie uzupełniono brakujący element label.

.test-form ul {
  display: table;
}

.test-form li {
  display: table-row;
  
}
.test-form label, .test-form input {
  display: table-cell;
  margin-bottom:5px;
  padding-right:5px;
}
.test-form label{
  text-align:right;
}
.test-form li:last-child:before {
  display: table-cell;
  content: '';
}

Przykład 4

Wpisz imię: Wpisz nazwisko:

Kod HTML z ostatniego wykorzystuje alternatywną metodę nadawania etykiet i nie zawiera listy. Do otoczenia elementu input typu submit zastosowano znacznik div. Elementy span pozwolą w łatwy sposób nadać style CSS dla formularza.

<form action="" class="test-form">
  <label><span>Wpisz imię:</span><input type="text"></label>
  <label><span>Wpisz nazwisko:</span><input type="text"></label>
  <div><input type="submit" value="Zapisz"></div>
</form>
<style>

Po analizie prezentowanego kodu CSS i poprzedniego przykładu okaże się, że główna idea rozwiązania nie uległa żadnej zmianie. Tym razem rolę „tabeli” odegrał znacznik form.

.test-form {
  display: table;
}

.test-form label, .test-form div {
  display: table-row;
}

.test-form span, .test-form input {
  display: table-cell;
  margin-bottom:5px;
  padding-right:5px;
}

.test-form span{
  text-align:right;
}

.test-form div:before {
  display: table-cell;
  content: '';
}