Halo Sobat Algos! Bertemu lagi dalam AlgoInfo!
AlgoInfo kali ini akan membahas tentang HTML, yaitu penggunaan JavaScript dan CSS untuk membuat suatu form. Apakah Sobat Algos sudah tau tentang HTML, JavaScript, CSS? Nah sebelum masuk ke formnya, mari kita bahas sejarahnya terlebih dahulu! Yang pertama ada HypertText Markup Language (HTML), merupakan bahasa markup yang bertujuan untuk penataan dan penyajian konten untuk World Wide Web (WWW). Yang kedua ada Cascading Style Sheet (CSS), merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Dan yang terakhir ada JavaScript, yaitu bahasa pemrograman berbasis java yang merupakan interface pembantu dalam pemrograman web. Basa-basi cenat cenutnya udah dulu ya! Cusss langsung masuk kita kedalam formnya!
Pada form ini terlihat ada 2 background, yaitu pepohonan hijau dan light blue vinyl. Background dapat di edit sedemikian rupa pada CSS yang sudah dihubungkan pada web ini agar mempercantik tampilan dari web tersebut. Pada background pepohonan disini, sifatnya general dari halaman web itu sendiri. Didalam nya terdapat background light blue vinyl yang merupakan form itu sendiri. Form disini mempunyai 2 button, yaitu input dan output. Input disini dapat digunakan oleh user untuk memasukan data-data yang diperlukan untuk mengisi form tersebut, untuk output dapat digunakan untuk melihat hasil inputan oleh user yang sudah di submit. Disini user dapat menuliskan nama lengkap, asal kota, email aktif, dan nomor telefon. Setelah semua terisi, user dapat melihat hasil inputannya tersebut pada button output.
Pada form ini, digunakan juga efek dari submit button function, yang digunakan untuk memberi peringatan pada user saat sudah mengklik tombol submit, akan tetapi isi form masih kosong.
Terlihat pada gambar diatas, saat user belum memasukan data asal kota, web akan memunculkan peringatan “kaka dari mana?” untuk user, agar user dapat mengisinya kembali sebelum di sumbit ulang. Apabila salah satu dari data form diatas tidak terisi, maka web akan memberi peringatan untuk mengisinya agar hasil output dapat keluar.
Untuk struktur htmlnya sendiri dapat dilihat di gambar, struktur dasarnya menggunakan class form yang didalamnya terdapat element button, class input dan class output. Html ini disambungkan ke file index.css untuk memberi design dari halaman webnya. Untuk penjelasan pemberian cssnya dan javascriptnya dapat dilihat di youtube kami.
Sekian dari AlgoInfo kali ini, semoga bermanfaat ya Sobat Algos!
Algomarine, Algorithm for Marine Solutions!