Tutorial Pemrograman

Cara Membuat Input Text dengan Semantic UI

Semantic UI adalah suatu pustaka CSS Framework yang didesain untuk mempercantik tampilan dalam produktifitas website. Semantic UI ini memiliki kumpulan kode script yang telah siap dipakai untuk merancang tampilan website sehingga si web programmer tidak perlu membuat kode perintah CSS dari nol. Semantic UI merupakan salah satu CSS Framework yang populer bagi web programmer frontend pada saat ini, terutama mendalami React JS, React Native, atau Node.js developer. Semantic UI merupakan CSS Framework yang dikhususkan bagi web programmer yang menggunakan JavaScript sebagai perancangan tampilan website sekaligus server.

Dengan ada Semantic UI ini, maka web programmer bagian frontend jauh lebih mudah dalam membuat atau membangun tampilan website yang sesuai keinginan kamu atau client kamu dengan waktu yang lebih singkat daripada membuat CSS dari nol.

Penulis akan memberikan tutorial cara membuat input type dengan Semantic UI, agar kamu dapat mendesain input text dengan mudah, karena tidak perlu mencari gambar di internet lagi atau membuat kode perintah CSS lagi, sehingga dapat meminimalisir permasalahan website kamu yang akan dikunjungi oleh pengguna website.

Langkah:

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “input-text-semantic.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

Selesai.

Jangan lupa kamu taruhkan link css dari Semantic UI ke dalam website kamu. Agar kode script perancangan input text di website kamu dapat berjalan dengan baik.

Letakkan kode script yang di atas itu sebelum atribut tag </head>.

Kamu membuat mengisi kata placeholder di dalam kolom input text yang kamu inginkan. Ketikkan kode perintah di bawah ini.

Kamu juga bisa mempercantik tampilan input text yang polos tadi dengan kombinasi Pure CSS (CSS murni) atau Framework CSS (Bootstrap) agar tampilan website kamu jauh lebih menarik dan bagus dilihat atau dikunjungi oleh pengguna akses untuk melakukan penginputan data.

Demikian, cara membuat input text dengan Semantic UI. Semoga bermanfaat.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

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

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Berlangganan tutorial gratis melalui email

Copyright © 2019 Inwepo - All Rights Reserved.

To Top