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 komponenate povezane 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>


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>


Kreiranje Inline forme

Ponekad ćete možda htjeti prikazati niz labela, kontroli forme i dugme elemente 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>


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 klasom .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>


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"> 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>
    <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>


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 grupnu 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>

Međutim, ako želite onemogućiti sve kontrole unutar elementa <form> odjednom, stavite ih unutar <fieldset> elementa i primijenite atribut disabled 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>


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>


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>


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 pseudo klasa :invalid i :valid. 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>

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>
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">
<title>Bootstrap 4 Form Validation</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form action="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">Molimo unesite valjanu 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">Molimo unesite valjanu 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>
    

    <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>
</div>
</body>
</html>


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>