{"id":608,"date":"2026-06-24T17:51:16","date_gmt":"2026-06-24T10:51:16","guid":{"rendered":"https:\/\/www.bisasoftware.id\/2026\/?p=608"},"modified":"2026-06-25T14:44:50","modified_gmt":"2026-06-25T07:44:50","slug":"bab-7-form-bootstrap","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-7-form-bootstrap\/","title":{"rendered":"BAB 7 – FORM BOOTSTRAP"},"content":{"rendered":"\n

Tujuan Pembelajaran<\/h2>\n\n\n\n

Peserta mampu:<\/p>\n\n\n\n

    \n
  1. Membuat form profesional.<\/li>\n\n\n\n
  2. Membuat form login.<\/li>\n\n\n\n
  3. Membuat form pendaftaran.<\/li>\n\n\n\n
  4. Menggunakan validasi dasar Bootstrap.<\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n

    A. Apa Itu Form?<\/h1>\n\n\n\n

    Form digunakan untuk menerima input dari pengguna.<\/p>\n\n\n\n

    Contoh:<\/p>\n\n\n\n

      \n
    • Login<\/li>\n\n\n\n
    • Registrasi<\/li>\n\n\n\n
    • Input Data Siswa<\/li>\n\n\n\n
    • Input Barang Kasir<\/li>\n<\/ul>\n\n\n\n
      \n\n\n\n

      B. Input Text<\/h1>\n\n\n\n
      <div class=\"mb-3\">

      <label class=\"form-label\">

      Nama Lengkap

      <\/label>

      <input type=\"text\"
      class=\"form-control\">

      <\/div><\/code><\/pre>\n\n\n\n
      \n\n\n\n
      Praktik 1<\/h1>\n\n\n\n
      Form Biodata<\/h2>\n\n\n\n
      <div class=\"container\">

      <div class=\"mb-3\">

      <label class=\"form-label\">

      Nama

      <\/label>

      <input type=\"text\"
      class=\"form-control\">

      <\/div>

      <div class=\"mb-3\">

      <label class=\"form-label\">

      Alamat

      <\/label>

      <textarea class=\"form-control\">
      <\/textarea>

      <\/div>

      <\/div><\/code><\/pre>\n\n\n\n
      \n\n\n\n
      C. Select Box<\/h1>\n\n\n\n
      <select class=\"form-select\">

      <option>RPL<\/option>
      <option>TKJ<\/option>
      <option>DKV<\/option>

      <\/select><\/code><\/pre>\n\n\n\n
      \n\n\n\n
      D. Radio Button<\/h1>\n\n\n\n
      <div class=\"form-check\">

      <input class=\"form-check-input\"
      type=\"radio\">

      <label class=\"form-check-label\">

      Laki-Laki

      <\/label>

      <\/div><\/code><\/pre>\n\n\n\n
      \n\n\n\n
      E. Checkbox<\/h1>\n\n\n\n
      <div class=\"form-check\">

      <input class=\"form-check-input\"
      type=\"checkbox\">

      <label class=\"form-check-label\">

      Saya setuju

      <\/label>

      <\/div><\/code><\/pre>\n\n\n\n
      \n\n\n\n
      Praktik 2<\/h1>\n\n\n\n
      Form Pendaftaran Siswa<\/h2>\n\n\n\n
      Buat form yang terdiri dari:<\/p>\n\n\n\n
        \n
      • Nama Lengkap<\/li>\n\n\n\n
      • Alamat<\/li>\n\n\n\n
      • Jurusan<\/li>\n\n\n\n
      • Jenis Kelamin<\/li>\n\n\n\n
      • Persetujuan<\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n
        F. Validasi Bootstrap<\/h1>\n\n\n\n
        <input type=\"text\"
        class=\"form-control is-valid\"><\/code><\/pre>\n\n\n\n
        <input type=\"text\"
        class=\"form-control is-invalid\"><\/code><\/pre>\n\n\n\n
        \n\n\n\n
        Praktik 3<\/h1>\n\n\n\n
        Simulasi Validasi<\/h2>\n\n\n\n
        Buat form login dengan:<\/p>\n\n\n\n
          \n
        • Username valid<\/li>\n\n\n\n
        • Password invalid<\/li>\n<\/ul>\n\n\n\n
          \n\n\n\n
          Latihan Bab <\/h1>\n\n\n\n
            \n
          1. Apa fungsi form-control?<\/li>\n\n\n\n
          2. Apa fungsi form-select?<\/li>\n\n\n\n
          3. Apa fungsi form-check?<\/li>\n\n\n\n
          4. Apa fungsi is-valid?<\/li>\n\n\n\n
          5. Apa fungsi is-invalid?<\/li>\n<\/ol>\n\n\n\n
            \n\n\n\n
            Tugas Praktik Bab<\/h1>\n\n\n\n
            Buat Form Pendaftaran Ekstrakurikuler yang terdiri dari:<\/p>\n\n\n\n
              \n
            • Nama<\/li>\n\n\n\n
            • Kelas<\/li>\n\n\n\n
            • Jurusan<\/li>\n\n\n\n
            • Pilihan Ekskul<\/li>\n\n\n\n
            • Tombol Daftar<\/li>\n<\/ul>\n\n\n\n
              <\/p>\n","protected":false},"excerpt":{"rendered":"
              Tujuan Pembelajaran Peserta mampu: A. Apa Itu Form? Form digunakan untuk menerima input dari pengguna. Contoh: B. Input Text Praktik…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[20],"tags":[35],"class_list":["post-608","post","type-post","status-publish","format-standard","hentry","category-tutorial-bootstrap","tag-tutorial-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=608"}],"version-history":[{"count":2,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/608\/revisions"}],"predecessor-version":[{"id":633,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/608\/revisions\/633"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}