Desain Web 1 Oleh Dita Rizki Amalia

Pertemuan Sesi 14 Bootstrap Form

Form Implementasi dan penggunaannya seperti ini. <form class="form-inline" role="form"> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </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>

Form Output

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="email"> Email:</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email"placeholder="Enter email"> </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>

Form Horizontal Output

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">

Form Input Outputnya

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

Text Area Outputnya

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

Checkbox Outputnya

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>

Checkbox Inline Outputnya

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

Radio Button Outputnya

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>

SELECT Outputnya

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>

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

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>

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>

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)