Desain Form dengan Bootswatch
Masih Seputar Bootswatch, karena Bootswatch ini mempunyai tema tema yang menarik dan bagus, karenanya nya saya tertarik sekali membahasnya.. kali ini kita akan belajar menggunakan Desain Form di Bootswatch, Oke seketika saja kita praktekan teman teman.
Ketikan kode HTML berikut dan beri nama file dengan Index.html
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Design Form Bootswatch </title>
<link rel =stylesheet href =https://bootswatch.com/4/sketchy/bootstrap.min.css>
</head>
<body>
<br> <br>
<div class =container>
<div class=row>
<div class=col-12>
<h1 class=text-center text-info font-weight-bold > Membangun Desain Form Dengan Bootswatch </h1>
<form>
<fieldset>
<legend> Legend </legend>
<div class=form-group row>
<label for=staticEmail class=col-sm-2 col-form-label> Email </label>
<div class=col-sm-10>
<input readonly= class=form-control-plaintext id=staticEmail value=email@example.com type=text>
</div>
</div>
<div class=form-group>
<label for=exampleInputEmail1> Email address </label>
<input class=form-control id=exampleInputEmail1 aria-describedby=emailHelp placeholder=Enter email type=email>
<small id=emailHelp class=form-text text-muted> We'll never share your email with anyone else.</small>
</div>
<div class=form-group>
<label for=exampleInputPassword1> Password </label>
<input class=form-control id=exampleInputPassword1 placeholder=Password type=password>
</div>
<div class=form-group>
<label for=exampleSelect1> Example select </label>
<select class=form-control id=exampleSelect1>
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
</div>
<div class=form-group>
<label for=exampleSelect2> Example multiple select </label>
<select multiple= class=form-control id=exampleSelect2>
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
</div>
<div class=form-group>
<label for=exampleTextarea> Example textarea </label>
<textarea class=form-control id=exampleTextarea rows=3> </textarea>
</div>
<div class=form-group>
<label for=exampleInputFile> File input </label>
<input class=form-control-file id=exampleInputFile aria-describedby=fileHelp type=file>
<small id=fileHelp class=form-text text-muted> This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. </small>
</div>
<fieldset class=form-group>
<legend> Radio buttons </legend>
<div class=form-check>
<label class=form-check-label>
<input class=form-check-input name=optionsRadios id=opti onsRadios1 value=option1 checked= type=radio>
Option one is this and that—be sure to include why it's grea t
</label>
</di v >
<div class=form-check>
<label class=form-check-label>
<input class=form-check-input name=optionsRadios id=optionsRadios2 value=option2 type=radio>
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class=form-check disabled>
<label class=form-check-label>
<input class=form-check-input name=optionsRadios id=optionsRadios3 value=option3 disabled= type=radio>
Option three is disabled
</label>
</div>
</fieldset>
<fieldset class=form-group>
<legend> Check boxes </legend>
<div class=form-check>
<label class=form-check-label>
<input class=form-check-input value= checked= type=checkbox>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class=form-check disabled>
<label class=form-check-label>
<input class=form-check-input value= disabled= type=checkbox>
Option two is disabled
</label>
</div>
</fieldset>
<button type=submit class=btn btn-primary> Submit </button>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
hasilnya akan seperti gambar di bawah ini..
oke demikianlah panduan Desain Form dengan Bootswatch, semoga bermanfaat yah teman teman.. 😀
Sumber https://kursuswebsite.org
