Desain Web 1 Oleh Dita Rizki Amalia.

Presentasi berjudul: "Desain Web 1 Oleh Dita Rizki Amalia."— Transcript presentasi:

1 Desain Web 1 Oleh Dita Rizki Amalia

2 Pertemuan Sesi 14 Bootstrap Form

3 Form Implementasi dan penggunaannya seperti ini.
<form class="form-inline" role="form"> <div class="form-group"> <label for=" "> address:</label> <input type=" " class="form-control" id=" "> </div> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> <button type="submit" class="btn btn-default">Submit</button> </form>

4 Form Output

5 Form Horizontal Implementasi dan contoh form horizontal begini.
<form class="form-horizontal" role="form"> <div class="form-group"> <label class="control-label col-sm-2" for=" "> </label> <div class="col-sm-10"> <input type=" " class="form-control" id=" "placeholder="Enter "> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"placeholder="Enter password"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div></div> </div> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form>

6 Form Horizontal Output

7 Form Input Implementasi form input begini
<div class="form-group"> <label for="usr">Name:</label> <input type="text" class="form-control" id="usr"> </div> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd">

8 Form Input Outputnya

9 TextArea Implementasi textarea begini <div class="form-group">
<label for="comment">Comment:</label> <textarea class="form-control" rows="5" id="comment"> </textarea> </div>

10 Text Area Outputnya

11 Checkbox Implementasi checkbox begini <div class="checkbox">
<label> <input type="checkbox" value="">Option 1 </label> </div> <input type="checkbox" value="">Option 2 <div class="checkbox disabled"> <label><input type="checkbox" value="" disabled>Option 3

12 Checkbox Outputnya

13 Checkbox Inline Implementasi checkbox begini
<label class="checkbox-inline"> <input type="checkbox" value="">Option 1</label> <input type="checkbox" value="">Option 2</label> <input type="checkbox" value="">Option 3</label>

14 Checkbox Inline Outputnya

15 Radio Button Implementasi radio begini <div class="radio">
<label> <input type="radio" name="optradio">Option 1 </label> </div> <input type="radio" name="optradio">Option 2

16 Radio Button Outputnya

17 SELECT Implementasi select begini <div class="form-group">
<label for="sel1">Select list:</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div>

18 SELECT Outputnya

19 Form Lainnya <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">Focused</label> <div class="col-sm-10"> <input class="form-control" id="focusedInput" type="text"value="Click to focus"> </div> <label for="inputPassword" class="col-sm-2 control-label">Disabled </label> <input class="form-control" id="disabledInput" type="text" disabled> <fieldset disabled> <label for="disabledTextInput" class="col-sm-2 control-label"> Fieldset disabled</label>

20 Form Lainnya <input type="text" id="disabledTextInput" class="form-control"> </div> <div class="form-group"> <label for="disabledSelect" class="col-sm-2 control-label"></label> <div class="col-sm-10"> <select id="disabledSelect" class="form-control"> <option>Disabled select</option> </select> </fieldset> <div class="form-group has-success has-feedback"> <label class="col-sm-2 control-label" for="inputSuccess"> Input with success and icon </label> <input type="text" class="form-control" id="inputSuccess"> <span class="glyphicon glyphicon-ok form-control- feedback"> </span> <div class="form-group has-warning has-feedback"> <label class="col-sm-2 control-label" for="inputWarning"> Input with warning and icon

21 Form Lainnya <div class="col-sm-10"> <input type="text" class="form-control" id="inputSuccess"> <span class="glyphicon glyphicon-ok form-control- feedback"> </span> </div> <div class="form-group has-warning has-feedback"> <label class="col-sm-2 control-label" for="inputWarning"> Input with warning and icon </label> <input type="text" class="form-control" id="inputWarning"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"> </div> </div> <div class="form-group has-error has-feedback"> <label class="col-sm-2 control-label" for="inputError"> Input with error and icon <input type="text" class="form-control" id="inputError"> <span class="glyphicon glyphicon-remove form-control-feedback"> </form>

22 Form Size <form class="form-inline" role="form"> <div class="form-group"> <label for="inputdefault">Default input</label> <input class="form-control" id="inputdefault" type="text"> </div> <label for="inputlg">input-lg</label> <input class="form-control input-lg" id="inputlg" type="text"> </div> <label for="inputsm">input-sm</label> <input class="form-control input-sm" id="inputsm" type="text"> </form>

23 Latihan Buatlah sebuah form lengkap dengan menggunakan bootstrap yang di dalamnya terdapat : Input (Text,Radio,Checkbox,Button) Select Text Area Untuk tema formnya: Pendaftaran Mahasiswa Baru (NIM Ganjil) Lowongan Pekerjaan (NIM Genap)