July 25, 2024

Cara Cepat Mendesain Form

2 min read

Pada kesempatan ini kita akan membahas cara cepat dan mudah mendesain sebuah form yang digunakan sebagai media interaktif pada sebuah website. Keterbatasan ide atau kreativitas terkadang menjadi suatu kendala dalam merancang bentuk dan tampilan yang menarik pada komponen-komponen pendukung sebuah website dan salah satunya adalah form.

Kesempatan kali ini saya akan menggunakan sebuah Framework Bootstrap Css untuk memberikan desain yang menarik pada form yang akan dirancang. Framework adalah kerangka kerja atau kumpulan Script (kode) yang dimanfaatkan oleh seorang programer dalam membantu mempermudah pekerjaannya.

Langkah 1

Untuk menggunakan Framework Bootstrap Css terlebih dahulu lakukan download file Framework Bootstrap Css pada website http://getbootstrap.com/ atau klik disini.

boos1

Langkah 2

Buka halaman dokumentasi Framework Bootstrap Css halaman dokumentasi berisi contoh-contoh kode yang bisa langsung digunakan. Untuk membuka halaman dokumentasi silahkan buka file Index.html pada folder docs.

boos2

Langkah 3 

Buka link Base CSS dan Components halaman ini berisi dokumentasi contoh dan kode untuk mempercantik komponen form dan website yang akan digunakan.

Langkah 4

Buat folder sebagai tempat penyimpanan file HTML dan CSS yang akan digunakan serta  file CSS bootstrap yang terdapat didalam folder docs > assets > css > bootstrap.css.

boos3

Langkah 5

Siapkan halaman file HTML dan css bootstrap pada sebuah folder khusus.

boos4

Langkah 6

Hubungkan halaman HTML dengan halaman CSS bootstrap.

boos5

Langkah 7

Buat struktur halaman form pada HTML dan struktur HTML dapat dilihat pada dokumentasi bootstrap kita tinggal menggunakan saja. Sebagai contoh bentuk yang akan dibuat adalah tampilan form dengan bentuk horizontal.

boos6

Langkah 8

Untuk membuat form seperti pada Gambar Langkah 7 cukup salin struktur HTML yang sudah disediakan oleh bootstrap.

[sourcecode]
<form>

<div class="control-group">

<label class="control-label" for="inputEmail">Email</label>

<div class="controls">

<input type="text" id="inputEmail" placeholder="Email">

</div>

</div>

<div class="control-group">

<label class="control-label" for="inputPassword">Password</label>

<div class="controls">

<input type="password" id="inputPassword" placeholder="Password">

</div>

</div>

<div class="control-group">

<div class="controls">

<label class="checkbox">

<input type="checkbox"> Remember me

</label>

<button type="submit" class="btn">Sign in</button>

</div>

</div>

</form>

[/sourcecode]

Demikianlah cukup mudah membuat sebuah desain dan belajar dasar HTML serta CSS dengan bantuan Framework CSS Bootstrap. Dengan hanya menyamakan ID dan Class saja maka halaman HTML yang kita desain akan memiliki tampilan yang menarik dan rapi tanpa harus pusing memilih componen CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.