Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <div class="container">

  <center>
    <h3>Tutorial Membuat Form Dengan Bootstrap 4</h3>
    <h4><a href="https://www.malasngoding.com/form-bootstrap-4/">www.malasngoding.com</a></h4>
  </center>

  <br/>
  <br/>
  <h5>Contoh Form Biasa</h5>
  <form>
    <input type="text" class="form-control" placeholder="Contoh form text ...">

    <br/>

    <input type="number" class="form-control" placeholder="Contoh form angka ...">

    <br/>

    <select name="" class="form-control">
				<option value="">Contoh Form Dropdown</option>
				<option value="">Contoh 1</option>
				<option value="">Contoh 2</option>
				<option value="">Contoh 3</option>
			</select>

    <br/>

    <textarea class="form-control" rows="3" placeholder="Contoh textarea .."></textarea>
  </form>

  <br/>
  <h5>Contoh Form Group</h5>
  <form>
    <div class="form-group">
      <label for="nama">Nama</label>
      <input type="text" id="nama" class="form-control" placeholder="Contoh form text ...">
    </div>

    <div class="form-group">
      <label for="umur">Umur</label>
      <input type="number" id="umur" class="form-control" placeholder="Contoh form angka ...">
    </div>

    <div class="form-group">
      <label for="pekerjaan">Pekerjaan</label>
      <select id="pekerjaan" class="form-control">
					<option value="">- Pilih Pekerjaan</option>
					<option value="">Programmer</option>
					<option value="">Web Designer</option>
					<option value="">Pengusaha</option>
				</select>
    </div>

    <div class="form-group">
      <label for="alamat">Alamat</label>
      <textarea class="form-control" id="alamat" rows="3" placeholder="Contoh textarea .."></textarea>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

  <br/>
  <h5>Contoh Form Upload (File Browser)</h5>
  <form>

    <div class="form-group">
      <label for="contohupload1">Pilih file yang ingin diupload</label>
      <input type="file" class="form-control-file" id="contohupload1">
    </div>

    <br/>

    <div class="custom-file">
      <input type="file" class="custom-file-input" id="contohupload2">
      <label class="custom-file-label" for="contohupload2">Choose file</label>
    </div>

  </form>

  <br/>
  <h5>Contoh Ukuran Form</h5>
  <form>

    <input type="text" class="form-control form-control-sm" placeholder="Contoh form berukuran kecil ..">

    <br/>

    <input type="text" class="form-control" placeholder="Contoh form berukuran sedang ..">

    <br/>

    <input type="text" class="form-control form-control-lg" placeholder="Contoh form berukuran besar ..">

  </form>

  <center>
    <br/>
    <h5>Contoh Checkbox dan Radio</h5>
  </center>
  <form>
    <br/>
    <h5>Contoh Checkbox</h5>
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="ContohCheckbox1">
      <label class="custom-control-label" for="ContohCheckbox1">Pilihan 1</label>
    </div>

    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="ContohCheckbox2">
      <label class="custom-control-label" for="ContohCheckbox2">Pilihan 2</label>
    </div>

    <hr>

    <br/>
    <h5>Contoh Radio</h5>
    <div class="custom-control custom-radio">
      <input type="radio" id="ContohRadio1" name="ContohRadio" class="custom-control-input">
      <label class="custom-control-label" for="ContohRadio1">Pilihan 1</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" id="ContohRadio2" name="ContohRadio" class="custom-control-input">
      <label class="custom-control-label" for="ContohRadio2">Pilihan 2</label>
    </div>

    <hr>

    <br/>
    <h5>Contoh Checkbox Inline</h5>
    <div class="custom-control custom-checkbox custom-control-inline">
      <input type="checkbox" class="custom-control-input" id="inline1">
      <label class="custom-control-label" for="inline1">Pilihan 1</label>
    </div>

    <div class="custom-control custom-checkbox custom-control-inline">
      <input type="checkbox" class="custom-control-input" id="inline2">
      <label class="custom-control-label" for="inline2">Pilihan 2</label>
    </div>

  </form>

  <br/>
  <h5>Contoh Form Grid</h5>
  <form>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="contoh1">Nama</label>
        <input type="text" class="form-control" id="contoh1" placeholder="Nama">
      </div>
      <div class="form-group col-md-6">
        <label for="contoh2">Username</label>
        <input type="text" class="form-control" id="contoh2" placeholder="Username">
      </div>
    </div>

    <div class="form-row">
      <div class="form-group col-md-4">
        <label for="contoh1">Nama Ayah</label>
        <input type="text" class="form-control" id="contoh1" placeholder="Nama Ayah">
      </div>
      <div class="form-group col-md-4">
        <label for="contoh2">Pekerjaan Ayah</label>
        <input type="text" class="form-control" id="contoh2" placeholder="Pekerjaan Ayah">
      </div>
      <div class="form-group col-md-4">
        <label for="contoh2">Alamat Ayah</label>
        <input type="text" class="form-control" id="contoh2" placeholder="Alamat Ayah">
      </div>
    </div>

    <button type="submit" class="btn btn-primary">Tombol</button>
  </form>

  <br/>
  <hr>
  <h5>Contoh Form</h5>
  <form>
    <div class="form-group row">
      <label for="nama" class="col-sm-2 col-form-label">Nama</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="nama" placeholder="Nama">
      </div>
    </div>

    <div class="form-group row">
      <label for="alamat" class="col-sm-2 col-form-label">Alamat</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="alamat" placeholder="Alamat">
      </div>
    </div>

    <button type="submit" class="btn btn-primary">Tombol</button>
  </form>
</div>
            
          
!

CSS

            
              
            
          
!

JS

            
              
            
          
!
999px

Console