Bootstrap - Forme


Kreiranje formi (obrazaca) pomoću Bootstrapa

HTML forme su sastavni dio web stranica i aplikacija, ali kreiranje izgleda forme ili ručno oblikovanje kontrola formi jedanu po jedanu pomoću CSS-a često je dosadno i zamorno. Bootstrap u velikoj mjeri pojednostavljuje postupak oblikovanja i poravnavanja kontrola formi poput oznaka, polja za unos, polja za odabir, tekstualnih područja, dugmadi itd. kroz unaprijed definisani skup klasa. Bootstrap pruža tri različite vrste rasporeda formi:

  • Vertikalna forma (zadani izgled forme)
  • Horizontalni oblik
  • Ugrađeni (Inline) obrazac

Sljedeći dio pružiće vam detaljan pregled svih ovih rasporeda formi, kao i različite Bootstrap komponenata povezanih s formama jednu po jednu. Pa hajde da krenimo .



Kreiranje vertikalnog izgleda forme

Ovo je zadani izgled forme Bootstrap-a u kojoj se stilovi primjenjuju na kontrole forme bez dodavanja bilo koje osnovne klase elementu <form> ili velikih promjena u označavanju. Kontrole forme u ovom izgledu složene su s poravnatim oznakama na vrhu.

<form>
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Lozinka</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Lozinka">
    </div>
    <div class="form-group">
        <label class="form-check-label"><input type="checkbox"> Zapamti me</label>
    </div>
    <button type="submit" class="btn btn-primary">Prijavi se</button>
</form>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Vertikalni izgled forme</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form action="/examples/actions/confirmation.php" method="post">
        <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Lozinka</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Lozinka">
    </div>
    <div class="form-group">
        <label class="form-check-label"><input type="checkbox"> Zapamti me</label>
    </div>
    <button type="submit" class="btn btn-primary">Prijavi se</button>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:




Kreiranje horizontalnog izgleda forme

Takođe možete stvoriti vodoravne rasporede forme gdje su oznake i kontrole forme poravnate jedna uz drugu pomoću grid klasa. Da biste kreirali horizontalni izgled forme, dodajte klasu .row na grupe forme i upotrijebite klase .col-*-* da odredite širinu svojih oznaka i kontrola. Takođe, obavezno primijenite klasu .col-form-label na elemente <label>, tako da su vertikalno centrirani sa pripadajućim kontrolama forme. Pogledajmo primjer:

<form>
    <div class="form-group row">
        <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Lozinka</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Lozinka">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <label class="form-check-label"><input type="checkbox"> Zapamti me</label>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <button type="submit" class="btn btn-primary">Prijavi se</button>
        </div>
    </div>
</form>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Horizontalni izgled forme</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form action="/examples/actions/confirmation.php" method="post">
        <div class="form-group row">
        <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Lozinka</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Lozinka">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <label class="form-check-label"><input type="checkbox"> Zapamti me</label>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <button type="submit" class="btn btn-primary">Prijavi se</button>
        </div>
    </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kreiranje Inline forme

Ponekad ćete možda htjeti prikazati niz labela, kontroli forme i dugme u jednom vodoravnom redu kako biste kompaktirali izgled. To možete lako učiniti dodavanjem klase .form-inline elementu <form>. Međutim, kontrole oblika se pojavljuju samo u redovima u okvirima za prikaz koji su široki najmanje 576px. Pogledajmo sljedeći primjer kako bismo vidjeli kako to zapravo funkcioniše:

<form class="form-inline">
    <div class="form-group mr-2">
        <label class="sr-only" for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group mr-2">
        <label class="sr-only" for="inputPassword">Lozinka</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Lozinka">
    </div>
    <div class="form-group mr-2">        
        <label><input type="checkbox" class="mr-1"> Zapamti me</label>
    </div>
    <button type="submit" class="btn btn-primary">Prijavi se</button>
</form>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Inline Forma</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form class="form-inline" action="/examples/actions/confirmation.php" method="post">
<div class="form-group mr-2">
        <label class="sr-only" for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group mr-2">
        <label class="sr-only" for="inputPassword">Lozinka</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Lozinka">
    </div>
    <div class="form-group mr-2">        
        <label><input type="checkbox" class="mr-1"> Zapamti me</label>
    </div>
    <button type="submit" class="btn btn-primary">Prijavi se</button>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:




Stvaranje statičke kontrole forme

Možda postoji situacija kada samo želite prikazati vrijednost običnog teksta pored oznake forme umjesto radne kontrole. To možete jednostavno učiniti zamjenom klase .form-control s .form-control-plaintext i primjenom atributa samo za čitanje. Klasa .form-control-plaintext uklanja zadani stil iz polja forme, ali zadržava ispravnu marginu i padding. Pogledajmo primjer:

<form>
    <div class="form-group row">
        <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="text" readonly class="form-control-plaintext" id="inputEmail" value="milosmihaljica@mail.com">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Lozinka</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Lozinka">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <div class="checkbox">
                <label><input type="checkbox"> Zapamti me</label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <button type="submit" class="btn btn-primary">Prijavi se</button>
        </div>
    </div>
</form>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Statičke kontrole forme</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form action="/examples/actions/confirmation.php" method="post">
        <div class="form-group row">
        <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="text" readonly class="form-control-plaintext" id="inputEmail" value="milosmihaljica@mail.com">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">Lozinka</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Lozinka">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <div class="checkbox">
                <label><input type="checkbox"> Zapamti me</label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <button type="submit" class="btn btn-primary">Prijavi se</button>
        </div>
    </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Postavljanje polja za potvrdu i radio dugmadi

Potvrdni okviri i radio dugmad mogu biti postavljeni složeni ili ugrađeni.



Složeni okviri za potvrdu i radio dugmad

Da biste potvrdne okvire ili radio dugmad postavili vertikalno složene, tj. red po red, samo omotajte sve kontrole u grupu forme i primijenite .d-blok klase na element <label>. Pored toga, koristite klase margina za pravilan razmak, kao što je prikazano u sljedećem primjeru:

<!-- Vertikalno postavljeni potvrdni okviri (checkboxe) -->    
<div class="form-group">
    <label class="d-block">
        <input type="checkbox" class="mr-1" name="sports"> Fudbal
    </label>
    <label class="d-block">
        <input type="checkbox" class="mr-1" name="sports"> Košarka
    </label>
    <label class="d-block">
        <input type="checkbox" class="mr-1" name="sports"> Tenis
    </label>
</div>

<!-- Vertikalno postavljeni radio dugmad (radio) -->
<div class="form-group">
    <label class="d-block">
        <input type="radio" class="mr-1" name="gender"> Žensko
    </label>
    <label class="d-block">
        <input type="radio" class="mr-1" name="gender"> Muško
    </label>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Postavljanje Checkbox-ova and Radio dugmadi</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
    <h4>Izaberi omiljeni sport</h4>  
    <div class="form-group">
        <label class="d-block">
            <input type="checkbox" class="mr-1" name="sports"> Cricket
        </label>
            <label class="d-block">
            <input type="checkbox" class="mr-1" name="sports"> Football
        </label>
            <label class="d-block">
            <input type="checkbox" class="mr-1" name="sports"> Tennis
        </label>
    </div>
    <hr>
    <h4>Izaberi pol</h4>
     <div class="form-group">
        <label class="d-block">
            <input type="radio" class="mr-1" name="gender"> Žensko
        </label>
        <label class="d-block">
            <input type="radio" class="mr-1" name="gender"> Muško
        </label>
    </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Ugrađeni (Inline) potvrdni okviri i radio dugmad (Checkboxs and Radio)

Međutim, da biste ih postavili u red, tj. jedan pored drugog, samo postavite sve kontrole forme u grupu formu i upotrijebite klase margina kako biste osigurali pravilan razmak. U ovom slučaju ne treba koristiti klasu .d-block na elementu &llabel>. Pogledajmo primjer:

<!-- Inline checkboxes -->
<div class="form-group">
    <label class="mr-3">
        <input type="checkbox" class="mr-1" name="sports"> Fudbal
    </label>
    <label class="mr-3">
        <input type="checkbox" class="mr-1" name="sports"> Košarka
    </label>
    <label class="mr-3">
        <input type="checkbox" class="mr-1" name="sports"> Tenis
    </label>
</div>

<!-- Inline radios -->
<div class="form-group">
    <label class="mr-3">
        <input type="radio" class="mr-1" name="gender"> Muško
    </label>
    <label class="mr-3">
        <input type="radio" class="mr-1" name="gender"> Žensko
    </label>
</div>


Kreiranje Disabled kontrolne forme

Da biste onemogućili pojedinačne kontrole forme kao što su <input>, <textarea>, <select>, dodajte im onemogućene atribute, a Bootstrap će učiniti sve ostalo. Pogledajmo primjer:

<input type="text" class="form-control mb-2" placeholder="Disabled input" disabled>
<textarea class="form-control mb-2" placeholder="Disabled textarea" disabled></textarea>
<select id="disabledSelect" class="form-control" disabled>
    <option>Disabled select</option>
</select>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Onemogućena kontrole forme</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <input type="text" class="form-control mb-2" placeholder="Disabled input" disabled>
        <textarea class="form-control mb-2" placeholder="Disabled textarea" disabled></textarea>
        <select id="disabledSelect" class="form-control" disabled>
            <option>Disabled select</option>
        </select>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Međutim, ako želite onemogućiti sve kontrole unutar elementa <form> odjednom, stavite ih unutar <fieldset> elementa i primijenite atribut na njega, kao što je prikazano u sljedećem primjeru:

<form>
    <fieldset disabled>
        <div class="form-group row">
            <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
        </div>
        <div class="form-group row">
            <label for="inputPassword" class="col-sm-2 col-form-label">Lozinka</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Lozinka">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-10 offset-sm-2">
                <label class="form-check-label"><input type="checkbox"> Zapamti me</label>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-10 offset-sm-2">
                <button type="submit" class="btn btn-primary">Prijavi se</button>
            </div>
        </div>
    </fieldset>
</form>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Onemogućena Forma</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <fieldset disabled>
            <div class="form-group row">
                <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPassword" class="col-sm-2 col-form-label">Lozinka</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Lozinka">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-10 offset-sm-2">
                    <label class="form-check-label"><input type="checkbox"> Zapamti me</label>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-10 offset-sm-2">
                    <button type="submit" class="btn btn-primary">Prijavi se</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Kreiranje ulaza samo za čitanje (Readonly Inputs)

Takođe možete dodati logički atribut readonly na ulaz ili tekstualno područje kako biste spriječili izmjenu njegove vrijednosti. Ulazi samo za čitanje pojavljuju se u svjetlijoj pozadini (baš kao i onemogućeni unosi), ali zadržava standardni kursor teksta. Pogledajmo sljedeći primjer da biste vidjeli kako to funkcioniše:

<input type="text" class="form-control mb-2" value="Ovu ulaznu vrijednost nije moguće promijeniti." readonly>
<textarea rows="3" class="form-control" readonly>Ova vrijednost tekstualnog područja ne može se mijenjati.</textarea>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Input i Textarea samo za čitanje </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <input type="text" class="form-control mb-2" value="Ovu ulaznu vrijednost nije moguće promijeniti." readonly>
        <textarea rows="3" class="form-control" readonly>Ova vrijednost tekstualnog područja ne može se mijenjati.</textarea>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Veličina Inputs, Textareas i Select polja

Veličine kontrola forme možete takođe prilagoditi u Bootstrap-u. Jednostavno umotajte svoje kontrole forme (tj. <input>, <textarea> i <select>) u grid kolone ili bilo koji prilagođeni element i primijenite grid classes na njega, kao što je prikazano u sljedećem primjeru:

<div class="form-row">
    <div class="form-group col-sm-6">
        <label for="inputCity">Grad</label>
        <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-sm-4">
        <label for="inputState">Država</label>
        <select id="inputState" class="form-control">
            <option>Select</option>
        </select>
    </div>
    <div class="form-group col-sm-2">
        <label for="inputZip">Poštanski broj</label>
        <input type="text" class="form-control" id="inputZip">
    </div>
</div>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Veličina kontrola formi</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
<div class="form-row">
    <div class="form-group col-sm-6">
        <label for="inputCity">Grad</label>
        <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-sm-4">
        <label for="inputState">Država</label>
        <select id="inputState" class="form-control">
            <option>Select</option>
        </select>
    </div>
    <div class="form-group col-sm-2">
        <label for="inputZip">Poštanski broj</label>
        <input type="text" class="form-control" id="inputZip">
    </div>
    </div>
    </form>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:




Provjera Bootstrap obrazca (Form Validation)

Bootstrap 4 pruža jednostavan i brz način za provjeru valjanosti web obrazaca na strani klijenta. Koristi API za provjeru izvornog obrazca pretraživača za provjeru valjanosti obrazca. Stilovi provjere valjanosti obrazaca primjenjuju se putem CSS :invalid i :valid pseudo-classes. Primjenjuje se na elemente <input>, <select> i <textarea>. Pogledajmo sljedeći primjer kako bismo vidjeli kako to zapravo funkcioniše:

<form class="needs-validation" novalidate>
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
        <div class="invalid-feedback"> Unesite validnu e-mail adresu.</div>
    </div>
    <div class="form-group">
        <label for="inputPassword">Lozinka</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        <div class="invalid-feedback"> Unesite vašu lozinku.</div>
    </div>
    <div class="form-group">
        <label class="form-check-label"><input type="checkbox"> Zapamti me</label>
    </div>
    <button type="submit" class="btn btn-primary">Prijavi se</button>
</form>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Form Validation</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form action="/examples/actions/confirmation.php" class="needs-validation" method="post" novalidate>
        <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
        <div class="invalid-feedback"> Unesite validnu e-mail adresu.</div>
    </div>
    <div class="form-group">
        <label for="inputPassword">Lozinka</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        <div class="invalid-feedback"> Unesite vašu lozinku.</div>
    </div>
    <div class="form-group">
        <label class="form-check-label"><input type="checkbox"> Zapamti me</label>
    </div>
    <button type="submit" class="btn btn-primary">Prijavi se</button>
    </form>
    
    <!-- JavaScript za onemogućavanje predaje obrazaca ako postoje nevaljana polja -->
    <script>
        // Funkcija samoizvršavanja
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                // Dohvati sve obrazce na koje želimo primijeniti prilagođene Bootstrap stilove provjere valjanosti
                var forms = document.getElementsByClassName('needs-validation');
                // Petlja za spriječavanje podnošenja
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>
</div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Evo prilagođenog JavaScript koda koji prikazuje poruke o greškama i onemogućava slanje obrazaca ako postoje nevaljana polja. Pogledajte lekciju JavaScript closures da biste saznali više o samoizvršenoj funkciji.

<script>
    // Samoizvršavanje funkcije
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            // Dohvati sve obrazce na koje želimo primijeniti prilagođene Bootstrap stilove provjere valjanosti
            var forms = document.getElementsByClassName('needs-validation');
            // Petlja za spriječavanje podnošenja
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
</script>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:



Podržane kontrole forme u Bootstrap-u

Bootstrap uključuje podršku za sve standardne kontrole HTML forme, kao i nove vrste unosa HTML5, poput datuma, broja, e-pošte, URL-a, pretraživanja, opsega, boje, URL-a i tako dalje. Sljedeći primjer će vam pokazati upotrebu standardnih kontrola forme s Bootstrap-om.

<form>
<div class="form-group row">
    <label class="col-sm-3 col-form-label" for="firstName">Ime:</label>
    <div class="col-sm-9">
        <input type="text" class="form-control" id="firstName" placeholder="Ime" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label" for="lastName">Prezime:</label>
    <div class="col-sm-9">
        <input type="text" class="form-control" id="lastName" placeholder="Prezime" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label" for="inputEmail">Email adresa:</label>
    <div class="col-sm-9">
        <input type="email" class="form-control" id="inputEmail" placeholder="Email adresa" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label" for="phoneNumber">Broj telefona:</label>
    <div class="col-sm-9">
        <input type="number" class="form-control" id="phoneNumber" placeholder="Broj telefona" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label">Datum rođenja:</label>
    <div class="col-sm-3">
        <select class="custom-select">
            <option>Datum</option>
        </select>
    </div>
    <div class="col-sm-3">
        <select class="custom-select">
            <option>Mjesec</option>
        </select>
    </div>
    <div class="col-sm-3">
        <select class="custom-select">
            <option>Godina</option>
        </select>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label" for="postalAddress">Adresa stanovanja:</label>
    <div class="col-sm-9">
        <textarea rows="3" class="form-control" id="postalAddress" placeholder="Adresa stanovanja" required></textarea>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label" for="ZipCode">Poštanski broj:</label>
    <div class="col-sm-9">
        <input type="text" class="form-control" id="ZipCode" placeholder="Poštanski broj" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label">Pol:</label>
    <div class="col-sm-9 mt-2">
        <label class="mb-0 mr-3">
            <input type="radio" class="mr-1" name="gender"> Muško
        </label>
        <label class="mb-0 mr-3">
            <input type="radio" class="mr-1" name="gender"> Žensko
        </label>
    </div>
</div>
<div class="form-group row">
    <div class="col-sm-9 offset-sm-3">
        <label class="checkbox-inline">
            <input type="checkbox" class="mr-1" value="agree"> Slažem se s uslovima korištenja <a href="#">Uslovi</a>.
        </label>
    </div>
</div>
<div class="form-group row">
    <div class="col-sm-9 offset-sm-3">
        <input type="submit" class="btn btn-primary" value="Pošalji">
        <input type="reset" class="btn btn-secondary" value="Poništi">
    </div>
</div>
</form>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Podržane kontrole HTML forme u Bootstrap-u 4</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
<script>
// Samopozivajuća funkcija
(function() {
    'use strict';
    window.addEventListener('load', function() {
        // Dohvati sve obrazce na koje želimo primijeniti prilagođene Bootstrap stilove
        var forms = document.getElementsByClassName('needs-validation');
        // Petlja za spriječavanje podnošenja
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();
</script>
</head>
<body>
<div class="bs-example">
    <h1 class="border-bottom pb-3 mb-4">Registracijska forma</h1>
    <form class="needs-validation" action="confirmation.php" method="post" novalidate>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label" for="firstName">Ime:</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="firstName" placeholder="Ime" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label" for="lastName">Prezime:</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="lastName" placeholder="Prezime" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label" for="inputEmail">Email:</label>
            <div class="col-sm-9">
                <input type="email" class="form-control" id="inputEmail" placeholder="Email " required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label" for="phoneNumber">Broj telefona:</label>
            <div class="col-sm-9">
                <input type="number" class="form-control" id="phoneNumber" placeholder="Broj telefona" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">Datum rođenja:</label>
            <div class="col-sm-3">
                <select class="custom-select" required>
                    <option value="">Datum</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                </select>
            </div>
            <div class="col-sm-3">
                <select class="custom-select" required>
                    <option value="">Mjesec</option>
                    <option value="1">Januar</option>
                    <option value="2">Februar</option>
                    <option value="3">Mart</option>
                    <option value="4">April</option>
                    <option value="5">Maj</option>
                    <option value="6">Jun</option>
                    <option value="7">Jul</option>
                    <option value="8">Avgust</option>
                    <option value="9">Septembar</option>
                    <option value="10">Oktobar</option>
                    <option value="11">Novembar</option>
                    <option value="12">Decembar</option>
                </select>
            </div>
            <div class="col-sm-3">
                <select class="custom-select">
                    <option>Godina</option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label" for="postalAddress">Adresa stanovanja:</label>
            <div class="col-sm-9">
                <textarea rows="3" class="form-control" id="postalAddress" placeholder="Adresa stanovanja" required></textarea>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label" for="ZipCode">Poštanski broj:</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="ZipCode" placeholder="Poštanski broj" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">Pol:</label>
            <div class="col-sm-9 mt-2">
                <label class="mb-0 mr-3">
                    <input type="radio" class="mr-1" name="gender"> Muško
                </label>
                <label class="mb-0 mr-3">
                    <input type="radio" class="mr-1" name="gender"> Žensko
                </label>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-9 offset-sm-3">
                <label class="checkbox-inline">
                    <input type="checkbox" class="mr-1" value="agree">Slažem se s uslovima korištenja <a href="#">Uslovi</a>.
                </label>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-9 offset-sm-3">
                <input type="submit" class="btn btn-primary" value="Pošalji">
                <input type="reset" class="btn btn-secondary" value="Odustani">
            </div>
        </div>
    </form>
</div>
</body>
</html>