Tutorial Bootstrap: Membuat Form menggunakan Bootstrap 5

Form atau formulir merupakan suatu dokumen yang digunakan untuk mengambil data atau informasi dari user.

Data-data atau informasi yang biasa diambil meliputi biodata diri user, informasi pendaftaran, atau juga informasi dari hasil survey.

Penerapan form yang sering kita temui yaitu pada saat kita sign in ataupun log in pada suatu platform, yang dimana data pokok yang diminta yaitu username dan password.

Proses pengambilan data ini bertujuan untuk mengidentifikasi tiap-tiap user yang akan menggunakan platform tersebut.

Lalu, bagaimana cara seorang web developer melakukan hal tersebut

Untuk keperluan pengambilan data dari user, Bootstrap telah menyediakan kerangka kerja yang dapat digunakan untuk keperluan input data tersebut.

Sebelum lanjut ke tutorial, kita ketahui dulu macam-macam model form yang sering digunakan untuk keperluan input data. Diantaranya yaitu:

vertikal form
horizontal form
inline form

Simak tutorialnya berikut ini.

1. Vertikal Form

Cara pembuatan form yang pertama yaitu menggunakan bentuk vertikal form. Form jenis ini merupakan form yang paling sering digunakan.

Perhatikan Program berikut.

		 	
    <div class="container">
    	<form>
    		<div class="mb-3">
    			<label class="form-label" for="uname">Username</label>
          <input type="text" class="form-control" id="uname">
    		</div>
        <div class="mb-3">
    			<label class="form-label" for="pwd">Password</label>
          <input type="password" class="form-control" id="pwd">
    		</div>
        <div class="text-end">    
        	<button type="submit" class="btn btn-primary">Submit</button>
        </div>
    	</form>
    </div>

Menghasilkan tampilan.

Yang perlu diperhatikan bahwa, Didalam penggunaan framework Bootstrap ini, setiap elemen yang akan dibuat pasti menggunakan class.

Untuk label form, kita gunakan class .form-label.

Sedangkan untuk bagian input kita gunakan class .form-control.

2. Horizontal Form

Horizontal form akan memberikan tampilan antara label dengan input secara sejajar.

Untuk membuat form dengan model horizontal, kita bisa menggunakan elemen baris dan kolom.

Perhatikan program berikut.

		 	
    <div class="container">
    	<form>
    		<div class="mb-3">
    			<label class="form-label col-sm-3" for="uname">Username</label>
          <div class="col-sm-9"> 
          	<input type="text" class="form-control" id="uname">
          </div>
    		</div>
        <div class="mb-3">
    			<label class="form-label col-sm-3" for="pwd">Password</label>
          <div class="col-sm-9"> 
          	<input type="password" class="form-control" id="pwd">
          </div>
    		</div>
        <div class="text-end">    
        	<button type="submit" class="btn btn-primary">Submit</button>
        </div>
    	</form>
    </div>

Menghasilkan tampilan.

Untuk menentukan lebar antara label dan input, dapat kita setting menggunakan class grid.

Pada form diatas, hanya akan tampil secara horizontal apabila perangkat yang kalian gunakan beresolusi besar.

Jika kalian menggunakan handphone, maka gunakan mode landscape.

3. Inline Form

Model form yang ketiga yaitu Inline form.

Inline form akan memberikan tampilan yang dimana seluruh field inputan terbungkus menjadi satu baris.

Perhatikan program berikut.

		 	
    <div class="container">
    	<form>
        <div class="row align-items-center">
    		  <div class="col-auto">
    			  <label class="visually-hidden" for="uname">Username</label>
            <input type="text" class="form-control" id="uname" placeholder="Username">
    		  </div>
          <div class="col-auto">
    			  <label class="visually-hidden" for="pwd">Password</label>
            <input type="password" class="form-control" id="pwd" placeholder="Password">
    		  </div>
          <div class="col-auto">    
        	  <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </div>
    	</form>
    </div>

Didalam tag <label>, Kita berikan class .visually-hidden yang berfungsi untuk menyembunyikan label tersebut.

Menghasilkan tampilan.

Sama halnya dengan form sebelumnya, tampilan akan terlihat secara inline apabila resolusi layar yang digunakan besar, jika memakai handphone maka perlu menggunakan mode landscpae.

Membuat Form dengan Banyak Data Inputan

Pada tutorial diatas, kita hanya membuat form dengan tiga type data inputan, yaitu text, password, dan submit.

Selanjutnya, kita akan membuat form dengan berbagai macam type data inputan.

Perhatika program berikut.

		 	
    <div class="container">
    	<form>
        <h1 class="mb-5 mt-3 text-bold text-center">Sign In</h1>
    		<div class="mb-4 row">
    			<div class="col-sm-6">
    				<label class="form-label" for="fn">FirtName</label>
            <input type="text" class="form-control" id="fn">
    			</div>
          <div class="col-sm-6">
    				<label class="form-label" for="ln">LastName</label>
            <input type="text" class="form-control" id="ln">
    			</div>
    		</div>
    		<div class="mb-3">
    			<label class="form-label" for="uname">Username</label>
          <input type="text" class="form-control" id="uname">
    		</div>
        <div class="mb-3">
    			<label class="form-label" for="pwd">Password</label>
          <input type="password" class="form-control" id="pwd">
    		</div>
        <div class="mb-3">
    			<label class="form-label" for="gender">Gender</label>
            <div class="form-check">
    						<input type="radio" class="form-check-input" id="gender">
                <label class="form-label" for="gender">Male</label>
                <input type="radio" class="form-check-input" id="gender">
                <label class="form-label" for="gender">Female</label>
            </div>
    		</div>  
        <div class="mb-3">
    			<label class="form-label" for="pwd">Departement</label>
    			<select class="form-select">
              <option value="Informatics">Informatics</option>
          	  <option value="Civil">Civil</option>
          	  <option value="Statistics">Statistics</option>
          </select>
    		</div>
        <div class="text-end">    
        	<button type="submit" class="btn btn-primary">Submit</button>
        </div>
    	</form>
    </div>