Foundation Part 4 - Membuat Form Dengan Foundation

Foundation Part 4 – Membuat Form Dengan Foundation


Foundation Part 4 – Membuat Form Dengan Foundation – Halo selamat datang di tutorial Framework Foundation Part 4. pada tutorial Foundation Part 4 – Membuat Form Dengan Foundation ini kita akan membahas tentang cara membuat form dengan foundation framework.

BACA JUGA : Tutorial Bootstrap Part 13 : Membuat Form Dengan Bootstrap

Foundation Part 4 – Membuat Form Dengan Foundation

Framework foundation menyediakan beberapa jenis form yang bisa kita gunakan. dengan kebutuhan dan keinginan kita masing-masing seperti apa form yang ingin kita buat.

Ada beberapa jenis materi tentang form Foundation Framework. yang akan kita pelajari secara bertahap yaitu :

Yuk kita bahas dan buat contohnya 1 per 1 dari jenis-jenis form yang ada pada foundation framework.

Menghubungkan HTML dengan Foundation Framework

Pertama, jangan lupa untuk menghubungkan dulu file html/php kita dengan file css,js framework foundation dan jquery. seperti yang sudah di jelaskan pada tutorial foundation framework part 2 cara menggunakan framework foundation yang udah di jelasin caranya.

 

Form Basic Foundation Framework

Form basic adalah jenis form dasar yang sederhana. yang di sediakan oleh developer framework foundation. jenis form ini tentu yang paling sering kita buat pada aplikasi atau website yang kita kembangkan. tergantung selera design masing-masing. Foundation Part 4 – Membuat Form Dengan Foundation

Cara membuat form basic/dasar dengan menggunakan foundation framework sangat mudah.

Disini kita akan mencoba membuat form sederhana dengan menggunakan framework foundation, adapun form yang akan kita buat di antaranya adalah form input text, form select option, form radio button atau checkbox, dan form fieldset.

Cara nya sangat mudah, pertama buatlah tag label. dan kemudian tag form yang ingin di buat bisa di letakkan di dalam tag label yang sudah di buat tadi. contohnya :

syntax di atas adalah cara membuat form inputan biasa. di mana di sini kita berpura-pura ingin membuat form input nama sebagai contohnya. begitu juga dengan form inputan lainnya.

full source code form inputan.

dan hasilnya bisa teman-teman lihat pada gambar di bawah. Foundation Part 4 – Membuat Form Dengan Foundation.

pada tutorial ini kita hanya belajar cara membuat formnya. jadi di sini form yang kita buat belum responsive. untuk tutorial membuat form responsive dengan menggunakan framework foundation akan kita pelajari pada tutorial framework foundation part selanjutnya.

Membuat form input sederhana dengan framework foundation

Membuat form input sederhana dengan framework foundation

Form Select Option(Dropdown) pada Framework Foundation

Membuat form inputan berupa select option juga sangat mudah, tidak ada penambahan tag khusus seperti bootstrap. untuk tutorial membuat form pada html teman-teman bisa membaca tutorial html dari malasngoding.com tentang cara membuat form pada html.

dan hasilnya

foundation part 4 membuat form dengan framework foundation

foundation part 4 membuat form dengan framework foundation

 

Form checkbox dan radio button Framework Foundation

Cara membuat form radio button dan checkbox dengan framework foundation dapat teman-teman perhatikan pada contoh berikut. di sini kita mencoba membuat form inputan jenis kelamin dan jus kesukaan sebagai contoh.

hasilnya

form radio button dan checkbox framework foundation

form radio button dan checkbox framework foundation

Membuat Form Menggunakan Fieldset

dan hasilnya seperti gambar di bawah ini.

Foundation Part 4 - Membuat Form Dengan Foundation

Foundation Part 4 – Membuat Form Dengan Foundation

 

Membuat form yang wajib di isi pada Framework Foundation

Tinggal menambahkan required pada tag pembuka.

contohnya

 

Full Source Code

Demonya bisa teman-teman lihat di bawah ini

See the Pen gRJGap by Malas Ngoding (@malasngoding) on CodePen.0

Mungkin sekian dulu tutorial framework Foundation Part 4 – Membuat Form Dengan Foundation. kelanjutannya akan kita lanjutkan pada tutorial foundation part selanjutnya.





About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • No Comment

Write a Comment

Your email address will not be published. Required fields are marked *


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]