Masih Seputar Bootswatch, karena Bootswatch ini memiliki tema tema yang menarik dan bagus, maka nya saya tertarik sekali membahasnya.. kali ini kita akan belajar menggunakan Desain Form di Bootswatch, Oke langsung 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 "> Membuat 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 sekian tutorial Desain Form dengan Bootswatch, semoga bermanfaat yah teman teman.. 
The post Desain Form dengan Bootswatch appeared first on Kursus Website Terbaik.