Latest web development tutorials

Form bootstrap

Dalam bab ini, kita akan belajar cara membuat formulir menggunakan Bootstrap. Bootstrap beberapa tag HTML sederhana dan kelas diperpanjang untuk menciptakan gaya yang berbeda dari bentuk.

Form layout

Bootstrap memberikan jenis berikut tata letak bentuk:

  • Form vertikal (default)
  • Form inline
  • bentuk tingkat

bentuk vertikal atau dasar

Struktur dasar dari bentuk adalah Bootstrap datang dengan bentuk kontrol individu secara otomatis menerima beberapa gaya global. Berikut langkah-langkah untuk membuat bentuk dasar:

  • Untuk induk <form> elemen untuk menambahkanrole = "bentuk".
  • Label dan kontrol dalam .form-kelompokkelasdengan <div> di. Hal ini diperlukan untuk memperoleh lapangan terbaik.
  • Semua elemen teks <input>, <textarea>, dan <pilih> Addkelas.form-kontrol.

contoh

<Form Peran = "bentuk"> <Div class = "bentuk-kelompok"> <Label untuk = "nama"> Nama </ label> <input type = "text" class = "bentuk-control" id = "nama" placeholder = "Silahkan masukkan nama"> </ Div> <Div class = "bentuk-kelompok"> <Label untuk = "inputfile"> Berkas Masukan </ label> <input ketik = "file" id = "inputfile"> <P class = "bantuan-block"> Berikut ini adalah contoh teks bantuan block-level. </ P> </ Div> <Div class = "checkbox"> <Label> <input ketik = "checkbox"> Silahkan centang </ label> </ Div> <Tombol ketik = "submit" class = "btn btn-default" > Kirim </ button> </ Form>

Coba »

Hasilnya adalah sebagai berikut:

Bentuk dasar

Form inline

Jika Anda perlu membuat bentuk yang semua elemen yang inline, meninggalkan label sejajar berdampingan, menambahkankelas.form-inline ke <form> tag.

contoh

<Form class = "bentuk-inline" Peran = "bentuk"> <Div class = "bentuk-kelompok"> <Label class = "sr-satunya" untuk = "nama"> Nama </ label> <input type = "text" class = "bentuk-control" id = "nama" placeholder = "Silahkan masukkan nama"> </ Div> <Div class = "bentuk-kelompok"> <Label class = "sr-satunya" untuk = "inputfile"> Berkas Masukan </ label> <input ketik = "file" id = "inputfile"> </ Div> <Div class = "checkbox"> <Label> <input ketik = "checkbox"> Silahkan centang </ label> </ Div> <Tombol ketik = "submit" class = "btn btn-default" > Kirim </ button> </ Form>

Coba »

Hasilnya adalah sebagai berikut:

Form inline
  • Secara default, Bootstrap input, pilih, dan textarea 100% dari lebar. Bila menggunakan bentuk inline, Anda perlu mengatur lebar dalam bentuk kontrol.
  • Gunakankelas.sr-satunya, Anda dapat menyembunyikan tag form inline.

bentuk tingkat

Jumlah tingkat yang berbeda dan bentuk tidak hanya menandai bentuk lain, tetapi bentuk disajikan dalam bentuk yang berbeda. Untuk membuat tata letak horizontal formulir, ikuti beberapa langkah:

  • <Form> elemen ditambahkan kekelasinduk .form-horizontal.
  • Label dan kontrol dalam .form-kelompokkelasdengan <div> di.
  • Menambahkankelas.control-label ke label.

contoh

<Form class = "bentuk-horisontal" Peran = "bentuk"> <Div class = "bentuk-kelompok"> <Label untuk = "firstname" class = "col-sm-2 kontrol label"> nama </ label> <Div class = "col-sm-10 "> <input type = "text" class = "bentuk-control" id = "firstname" placeholder = "Silahkan masukkan nama"> </ Div> </ Div> <Div class = "bentuk-kelompok"> <Label untuk = "nama belakang" class = "col-sm-2 kontrol label"> nama </ label> <Div class = "col-sm-10 "> <input type = "text" class = "bentuk-control" id = "nama belakang" placeholder = "Silahkan masukkan nama"> </ Div> </ Div> <Div class = "bentuk-kelompok"> <Div class = "col-sm-offset -2 col-sm-10"> <Div class = "checkbox"> <Label> <input ketik = "checkbox"> Ingat saya </ label> </ Div> </ Div> </ Div> <Div class = "bentuk-kelompok"> <Div class = "col-sm-offset -2 col-sm-10"> <Tombol ketik = "submit" class = "btn btn-default" > Log </ button> </ Div> </ Div> </ Form>

Coba »

Hasilnya adalah sebagai berikut:

bentuk tingkat

bentuk kontrol didukung

dukungan bootstrap untuk kontrol bentuk yang paling umum, terutamamasukan, textarea, kotak centang, radio dan pilih.

kotak input (masukan)

Yang paling umum bidang bentuk teks merupakan masukan kotak input. Pengguna dapat memasukkan sebagian besar data formulir yang diperlukan di dalamnya. Bootstrap memberikan dukungan masukan untuk semua jenis asli HTML5,termasuk: teks, password, datetime, datetime-local, tanggal, bulan, waktu, minggu, jumlah, email, url, pencarian, tel danwarna.Sesuai deklarasitipediperlukan, sehingga memungkinkanmasukanuntuk gaya lengkap.

contoh

<Form Peran = "bentuk"> <Div class = "bentuk-kelompok"> <Label untuk = "nama"> tag </ label> <input type = "text" class = "bentuk-control" placeholder = "input teks"> </ Div> </ Form>

Coba »

Hasilnya adalah sebagai berikut:

kotak input

Box (Textarea)

Bila Anda perlu membuat input multi-line, Anda dapat menggunakan kotak teks textarea. Anda dapat mengubah propertibaris,jika perlu (lebih sedikit baris = kotak kecil, garis = kotak lebih besar).

contoh

<Form Peran = "bentuk"> <Div class = "bentuk-kelompok"> <Label untuk = "nama"> Text Box </ label> <Textarea class = "bentuk-control" baris = "3"> </ textarea> </ Div> </ Form>

Coba »

Hasilnya adalah sebagai berikut:

text Box

Centang (checkbox) dan radio button (Radio)

Periksa kotak dan tombol radio digunakan untuk memungkinkan pengguna untuk memilih dari berbagai pilihan preset.

  • Bila Anda membuat formulir, jika Anda ingin pengguna untuk memilih beberapa pilihan dari daftar, silakan gunakankotak centang.Jika Anda membatasi pengguna dapat memilih opsi, menggunakanradio.
  • Serangkaian kotak centang dan tombol radio menggunakan.checkbox-inlineataukelas .radio-inline,mengontrol tampilan mereka pada baris yang sama.

Contoh berikut menunjukkan kedua jenis (default dan inline):

contoh

<Label untuk = "nama"> contoh kotak centang default dan tombol radio </ label> <Div class = "checkbox"> <Label> <input type = "checkbox" value = ""> Option 1 </ label> </ Div> <Div class = "checkbox"> <Label> <input type = "checkbox" value = ""> opsi 2 </ label> </ Div> <Div class = "radio"> <Label> <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" diperiksa> Option 1 </ label> </ Div> <Div class = "radio"> <Label> <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2"> Opsi 2 - Memilih itu akan hapus opsi 1 </ label> </ Div> <Label untuk = "nama"> kotak centang contoh inline dan tombol radio </ label> <Div> <Label class = "checkbox-inline"> <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1 </ label> <Label class = "checkbox-inline"> <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> opsi 2 </ label> <Label class = "checkbox-inline"> <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Opsi 3 </ label> <Label class = "checkbox-inline"> <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" diperiksa> Option 1 </ label> <Label class = "checkbox-inline"> <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> opsi 2 </ label> </ Div>

Coba »

Hasilnya adalah sebagai berikut:

Periksa kotak dan tombol radio

kotak pilihan (Pilih)

Bila Anda ingin pengguna untuk memilih dari beberapa pilihan, tapi secara default, dapat memilih opsi, gunakan kotak pilihan.

  • Gunakan <pilih> Menampilkan daftar pilihan, biasanya orang-orang yang akrab dengan daftar pilihan, seperti negara atau nomor.
  • Gunakanbeberapa = "beberapa"memungkinkan pengguna untuk memilih beberapa pilihan.

Contoh berikut menunjukkan kedua jenis (pilih dan beberapa):

contoh

<Form Peran = "bentuk"> <Div class = "bentuk-kelompok"> <Label untuk = "nama"> pilih daftar </ label> <Pilih class = "bentuk-control"> <Option> 1 </ option> <Pilihan> 2 </ option> <Pilihan> 3 </ option> <Pilihan> 4 </ option> <Pilihan> 5 </ option> </ Pilih> <Label Pilih Daftar untuk = "nama"> Beberapa pilihan </ label> <Pilih kelipatan class = "bentuk-control"> <Option> 1 </ option> <Pilihan> 2 </ option> <Pilihan> 3 </ option> <Pilihan> 4 </ option> <Pilihan> 5 </ option> </ Pilih> </ Div> </ Form>

Coba »

Hasilnya adalah sebagai berikut:

kotak pilihan

kontrol statis

Bila Anda perlu menempatkan bentuk teks biasa dalam tag form horisontal, silahkan menggunakankelas.form-control-statis dalam <p> di.

contoh

<Form class = "bentuk-horisontal" Peran = "bentuk"> <Div class = "bentuk-kelompok"> <Label class = "col-sm-2 kontrol label"> Email </ label> <Div class = "col-sm-10 "> <P class = "bentuk-control-statis "> [email protected] </ p> </ Div> </ Div> <Div class = "bentuk-kelompok"> <Label untuk = "inputPassword" class = "col-sm-2 kontrol label"> sandi </ label> <Div class = "col-sm-10 "> <input ketik = "password" class = "bentuk-control" id = "inputPassword" placeholder = "Silahkan masukkan password Anda"> </ Div> </ Div> </ Form>

Coba »

Hasilnya adalah sebagai berikut:

kontrol statis

negara bentuk kontrol

Selain itu: fokusnegara (yaitu, pengguna mengklik pada input atau menggunakan tombol tab untuk fokus pada input), Bootstrap juga menonaktifkan kotak input mendefinisikan gaya, dan menyediakan kelas validasi form.

Fokus kotak input

Ketika menerimamasukankotakinput: fokus,kotak input kontur akan dihapus, dan penerapanbox-shadow.

Menonaktifkan input masukan kotak

Jika Anda ingin menonaktifkan input kotak input, cukup tambahkan atributcacat,tidak hanya akan menonaktifkan kotak input, tetapi juga mengubah gaya kotak input, dan ketika pointer mouse melayang di atas pointer mouse pada gaya elemen.

bidang dinonaktifkan set fieldset

Pada <fieldset> menambahkan atribut cacat untuk menonaktifkan semua kontrol <fieldset> dalam.

status verifikasi

Bootstrap mengandung kesalahan, peringatan, dan gaya verifikasi pesan sukses. Hanya elemen induk hanya menambahkankelasyang tepat(.Has-peringatan, .has-kesalahanatau .Has-keberhasilan)dapat digunakan untuk memverifikasi status.

Contoh berikut menunjukkan semua negara kontrol:

contoh

<Form class = "bentuk-horisontal" Peran = "bentuk"> <Div class = "bentuk-kelompok"> <Label class = "col-sm-2 kontrol label"> Focus </ label> <Div class = "col-sm-10 "> <input class = "bentuk-control" id = "focusedInput" type = "text" value = "kotak input untuk mendapatkan fokus ..."> </ Div> </ Div> <Div class = "bentuk-kelompok"> <Label untuk = "inputPassword" class = "col-sm-2 kontrol label"> Nonaktifkan </ label> <Div class = "col-sm-10 "> <input class = "bentuk-control" id = "disabledInput" type = "text" placeholder = "melarang impor kotak input ..." dinonaktifkan> </ Div> </ Div> <Fieldset dinonaktifkan> <Div class = "bentuk-kelompok"> <Label untuk = "disabledTextInput" class = "col-sm-2 kontrol label"> menonaktifkan input (Fieldset cacat) </ label> <Div class = "col-sm-10 "> <input type = "text" id = "disabledTextInput" class = "bentuk-control" placeholder = "melarang importasi"> </ Div> </ Div> <Div class = "bentuk-kelompok"> <Label untuk = "disabledSelect" class = "col-sm-2 kontrol label"> menu pilihan Disable (Fieldset cacat) </ label> <Div class = "col-sm-10 "> <Pilih id = "disabledSelect" class = "bentuk-control"> <Pilihan> Nonaktifkan Seleksi </ option> </ Pilih> </ Div> </ Div> </ Fieldset> <Div class = "bentuk-kelompok memiliki- sukses"> <Label class = "col-sm-2 kontrol-label" untuk = "inputSuccess"> masukan sukses </ label> <Div class = "col-sm-10 "> <input type = "text" class = "bentuk-control" id = "inputSuccess"> </ Div> </ Div> <Div class = "bentuk-kelompok memiliki- warning"> <Label class = "col-sm-2 kontrol-label" untuk = "inputWarning"> Masukkan Peringatan </ label> <Div class = "col-sm-10 "> <input type = "text" class = "bentuk-control" id = "inputWarning"> </ Div> </ Div> <Div class = "bentuk-kelompok memiliki- kesalahan"> <Label class = "col-sm-2 kontrol-label" untuk = "inputError"> kesalahan ketik </ label> <Div class = "col-sm-10 "> <input type = "text" class = "bentuk-control" id = "inputError"> </ Div> </ Div> </ Form>

Coba »

Hasilnya adalah sebagai berikut:

negara bentuk kontrol

Ukuran bentuk kontrol

Anda dapat menggunakan setiapkelas.input-lg dan.col-lg- *untuk mengatur ketinggian bentuk dan lebar. Contoh berikut menggambarkan hal ini:

contoh

<Form Peran = "bentuk"> <Div class = "bentuk-kelompok"> <input class = "bentuk-control input- lg" type = "text" placeholder = ".input-lg"> </ Div> <Div class = "bentuk-kelompok"> <input class = "bentuk-control" type = "text" placeholder = "input default"> </ Div> <Div class = "bentuk-kelompok"> <input class = "bentuk-control input- sm" type = "text" placeholder = ".input-sm"> </ Div> <Div class = "bentuk-kelompok"> </ div> <Div class = "bentuk-kelompok"> <Pilih class = "bentuk-control input- lg"> <Option value = ""> .input-lg </ option> </ Pilih> </ Div> <Div class = "bentuk-kelompok"> <Pilih class = "bentuk-control"> <Option value = ""> default pilihan </ option> </ Pilih> </ Div> <Div class = "bentuk-kelompok"> <Pilih class = "bentuk-control input- sm"> <Option value = ""> .input-sm </ option> </ Pilih> </ Div> <Div class = "row"> <Div class = "col-lg-2 "> <input type = "text" class = "bentuk-control" placeholder = ".col-lg-2 "> </ Div> <Div class = "col-lg-3 "> <input type = "text" class = "bentuk-control" placeholder = ".col-lg-3 "> </ Div> <Div class = "col-lg-4 "> <input type = "text" class = "bentuk-control" placeholder = ".col-lg-4 "> </ Div> </ Div> </ Form>

Coba »

Hasilnya adalah sebagai berikut:

Ukuran bentuk kontrol

bentuk teks bantuan

Bootstrap Bentuk kontrol dapat memiliki masukan dalam kotak input pada teks bantuan blok-tingkat. Dalam rangka untuk menambah seluruh lebar sebuah konten, di <input> Setelah menggunakan.help-blok.Contoh berikut menggambarkan hal ini:

contoh

<Form Peran = "bentuk"> <Span> Bantuan teks misalnya </ span> <input class = "bentuk-control" type = "text" placeholder = ""> <Span class = "bantuan-block"> blok teks bantuan yang panjang, lebih dari satu baris perlu diperpanjang ke baris berikutnya. Dalam contoh ini membantu teks untuk total dua baris. </ Span> </ Form>

Coba »

Hasilnya adalah sebagai berikut:

bentuk teks bantuan