Membuat Form dengan Framework CSS Bulma
halo teman teman Source Code Aplikasi, kali ini kita akan membangun form dengan framework css bulma, Bulma yaitu CSS Framework Modern dengan menggunakan Flexbox Open Source, Memiliki tampilan yang dinamis bagi Mobile Device dan Modular kita dapat import apa yang kita butuhkan dengan menggunakan SASS. bagi menggunakan nya kalian dapat unduh di link berikut https://bulma.io/.
kita bikin struktur basic dan pasang css nya bulma terlebih dahulu seperti berikut:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Vue jS</title>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css>
</head>
<body>
<div class=container>
<h1 class=title is-2 has-text-centered>Form Bulma</h1>
<div class=columns>
<div class=column>
</div>
</div>
</div>
</body>
</html>
dan di pada class column tersebut masukan form nya seperti berikut
<div class=field>
<label class=label>Name</label>
<div class=control>
<input class=input type=text placeholder=Text input>
</div>
</div>
<div class=field>
<label class=label>Username</label>
<div class=control has-icons-left has-icons-right>
<input class=input is-success type=text placeholder=Text input>
<span class=icon is-small is-left>
<i class=fas fa-user></i>
</span>
<span class=icon is-small is-right>
<i class=fas fa-check></i>
</span>
</div>
<p class=help is-success>This username is available</p>
</div>
<div class=field>
<label class=label>Email</label>
<div class=control has-icons-left has-icons-right>
<input class=input is-danger type=email placeholder=Email input>
<span class=icon is-small is-left>
<i class=fas fa-envelope></i>
</span>
<span class=icon is-small is-right>
<i class=fas fa-exclamation-triangle></i>
</span>
</div>
<p class=help is-danger>This email is invalid</p>
</div>
<div class=field>
<label class=label>Subject</label>
<div class=control>
<div class=select>
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class=field>
<label class=label>Message</label>
<div class=control>
<textarea class=textarea placeholder=Textarea></textarea>
</div>
</div>
<div class=field>
<div class=control>
<label class=checkbox>
<input type=checkbox>
I agree to the <a href=#>terms and conditions</a>
</label>
</div>
</div>
<div class=field>
<div class=control>
<label class=radio>
<input type=radio name=question>
Yes
</label>
<label class=radio>
<input type=radio name=question>
No
</label>
</div>
</div>
<div class=field is-grouped>
<div class=control>
<button class=button is-link>Submit</button>
</div>
<div class=control>
<button class=button is-text>Cancel</button>
</div>
</div>
seperti ini hasilnya
gampang bukan teman teman, sekianlah Merancang Form dengan Framework CSS Bulma, semoga bermanfaat yah.
Sumber https://kursuswebsite.org
