Darmowy kurs projektowania UI/UX
Dowiedz się, jak tworzyć wyjątkowe projekty, czytając mój nowy samouczek.
Rozpocznij naukęFormularze
Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.
Prawie każdy projekt potrzebuje formularza. W tej lekcji stworzymy formularz kontaktowy i ogólnie przyjrzymy się bliżej formularzom.
Podstawowe pole wprowadzania danych
Podstawowy przykład pola wprowadzania danych składa się z elementu input o określonym identyfikatorze
ID oraz elementu label połączonego poprzez to ID z inputem. Oba elementy są zawinięte w klasę .form-outline, która zapewnia wygląd w stylu material design.
<div class="form-outline">
<input type="text" id="inputBasicExample" class="form-control" />
<label class="form-label" for="inputBasicExample">Example label</label>
</div>
Rozmiary
Ustaw wysokości za pomocą klas takich jak .form-control-lg oraz
.form-control-sm.
<div class="form-outline">
<input type="text" id="formControlLg" class="form-control form-control-lg" />
<label class="form-label" for="formControlLg">Form control lg</label>
</div>
<div class="form-outline">
<input type="text" id="formControlDefault" class="form-control" />
<label class="form-label" for="formControlDefault">Form control default</label>
</div>
<div class="form-outline">
<input type="text" id="formControlSm" class="form-control form-control-sm" />
<label class="form-label" for="formControlSm">Form control sm</label>
</div>
Wyłączone (Disabled)
Dodaj atrybut logiczny disabled do elementu input, aby nadać mu wyblakły wygląd i wyłączyć zdarzenia wskaźnika.
<div class="form-outline mb-3">
<input
class="form-control"
id="formControlDisabled"
type="text"
placeholder="Disabled input"
aria-label="disabled input example"
disabled
/>
<label class="form-label" for="formControlDisabled">Disabled</label>
</div>
Formularze
Każda grupa pól input powinna znajdować się w elemencie <form>. MDB nie dostarcza domyślnego stylowania dla elementu
<form> , ale istnieją pewne potężne funkcje przeglądarki, które są dostarczane domyślnie.
Ponieważ MDB stosuje display: block i width: 100% do prawie wszystkich naszych formularzy kontrolnych, formularze domyślnie układają się pionowo. Dodatkowe klasy mogą być używane do zróżnicowania tego układu dla każdego formularza z osobna.
Formularz logowania
Podstawowy przykład prostego formularza logowania z polami input (adres e-mail i hasło), polem wyboru (checkbox) oraz przyciskiem do przesyłania (submit).
Pole wyboru (checkbox) i odnośnik "zapomniałem hasła" są umieszczone w linii za pomocą układu siatki dwukolumnowej.
<form>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form1Example1" class="form-control" />
<label class="form-label" for="form1Example1">Email address</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4">
<input type="password" id="form1Example2" class="form-control" />
<label class="form-label" for="form1Example2">Password</label>
</div>
<!-- 2 column grid layout for inline styling -->
<div class="row mb-4">
<div class="col d-flex justify-content-center">
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
<label class="form-check-label" for="form1Example3"> Remember me </label>
</div>
</div>
<div class="col">
<!-- Simple link -->
<a href="#!">Forgot password?</a>
</div>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
Formularz rejestracji
Typowy formularz rejestracji z dodatkowymi przyciskami rejestracji.
<form>
<!-- 2 column grid layout with text inputs for the first and last names -->
<div class="row mb-4">
<div class="col">
<div class="form-outline">
<input type="text" id="form3Example1" class="form-control" />
<label class="form-label" for="form3Example1">First name</label>
</div>
</div>
<div class="col">
<div class="form-outline">
<input type="text" id="form3Example2" class="form-control" />
<label class="form-label" for="form3Example2">Last name</label>
</div>
</div>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form3Example3" class="form-control" />
<label class="form-label" for="form3Example3">Email address</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4">
<input type="password" id="form3Example4" class="form-control" />
<label class="form-label" for="form3Example4">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example33" checked />
<label class="form-check-label" for="form2Example33">
Subscribe to our newsletter
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4">Sign up</button>
<!-- Register buttons -->
<div class="text-center">
<p>or sign up with:</p>
<button type="button" class="btn btn-secondary btn-floating mx-1">
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" class="btn btn-secondary btn-floating mx-1">
<i class="fab fa-google"></i>
</button>
<button type="button" class="btn btn-secondary btn-floating mx-1">
<i class="fab fa-twitter"></i>
</button>
<button type="button" class="btn btn-secondary btn-floating mx-1">
<i class="fab fa-github"></i>
</button>
</div>
</form>
Formularz kontaktowy
Klasyczny formularz kontaktowy z textarea(polem na wiadomość).
<form>
<!-- Name input -->
<div class="form-outline mb-4">
<input type="text" id="form4Example1" class="form-control" />
<label class="form-label" for="form4Example1">Name</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form4Example2" class="form-control" />
<label class="form-label" for="form4Example2">Email address</label>
</div>
<!-- Message input -->
<div class="form-outline mb-4">
<textarea class="form-control" id="form4Example3" rows="4"></textarea>
<label class="form-label" for="form4Example3">Message</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
<label class="form-check-label" for="form4Example4">
Send me a copy of this message
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4">Send</button>
</form>
Krok 1 - stwórz pustą sekcję Contact
Przygotujmy miejsce na nasz formularz.
W pliku index.html, poniżej sekcji z kartami cenowymi, dodaj nową sekcję z siatką na 2 kolumny pośrodku.
<!-- Section: Contact -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Contact us</h3>
<div class="row gx-xl-5">
<div class="col-lg-5 mb-4 mb-lg-0">
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
</div>
</div>
</section>
<!-- Section: Contact -->
Krok 2 - dodaj formularz kontaktowy
W pierwszej kolumnie dodaj formularz kontaktowy, który przedstawiliśmy w tej lekcji w powyższym przykładzie.
<!-- Section: Contact -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Contact us</h3>
<div class="row gx-xl-5">
<div class="col-lg-5 mb-4 mb-lg-0">
<form>
<!-- Name input -->
<div class="form-outline mb-4">
<input type="text" id="form4Example1" class="form-control" />
<label class="form-label" for="form4Example1">Name</label>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form4Example2" class="form-control" />
<label class="form-label" for="form4Example2">Email address</label>
</div>
<!-- Message input -->
<div class="form-outline mb-4">
<textarea class="form-control" id="form4Example3" rows="4"></textarea>
<label class="form-label" for="form4Example3">Message</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
<label class="form-check-label" for="form4Example4">
Send me a copy of this message
</label>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-block mb-4">Send</button>
</form>
</div>
<div class="col-lg-7 mb-4 mb-lg-0">
</div>
</div>
</section>
<!-- Section: Contact -->
I to wszystko w tej lekcji. W następnej lekcji ukończymy nasz Contact section, więc gdy będziesz gotowy, kliknij "dalej".
O autorze
Michal Szymanski
Współzałożyciel MDBootstrap / Umieszczony na liście Forbes „30 under 30” / Entuzjasta oprogramowania open-source / Tancerz, miłośnik wiedzy i książek.
Autor setek artykułów na temat programowania, biznesu, marketingu i efektywności. W przeszłości pracował jako edukator z młodzieżą z problemami w sierocińcach i zakładach karnych.
