Cara menggunakan script input di html

Website yang baik itu website yang bisa membuat penggunanya menjadi lebih interaktif. Tidak hanya untuk membaca informasi saja, website dapat disebut interaktif apabila memungkinkan penggunanya dapat melakukan sesuatu di dalamnya. Interaksi yang biasanya dilakukan pada website selain mengklik ialah mengetik.

Banyak aktivitas yang bisa dilakukan oleh pengguna dalam sebuah website dengan mengetik, mulai dari login ke sebuah akun, memposting sesuatu, berkomunikasi dengan teman, dan sebagainya. Dari berbagai aktivitas mengetik tersebut, user berinteraksi dengan komponen form.

Table of Contents

Membuat Form Pada HTML

Dalam sebuah website, dikenal yang namanya form. Sesuai uraian saya diatas, form ini berguna untuk mendapatkan informasi dari pengguna. Contoh, pada saat ingin login ke facebook, Anda mengisikan alamat email dan password pada kotak putih yang kemudian mengklik sebuah tombol berwarna biru. Ketiga elemen tersebut dikelompokkan dan dinamai “form login”.

Artikel ini merupakan salah satu artikel dari series Pembelajaran Javascript Fundamental. Pada kali ini, kita akan belajar bagaimana cara menampilkan output dan menerima input pada javaScript. Pada umumnya, javascript bisa menerima semua inputan dari berbagai elemen form HTML namun untuk saat ini, materi kita belum sampai kesana. jadi saat ini kita akan menggunakan script prompt() sebagai inputan dari javascript.

    
    Say Greeting


    
Selamat datang para pelajar
    

Perhatikan kembali script diatas, pada script diatas secara default tulisan selamat datang kita hide menggunakan css (style=”display:none”). kemudian pada bagian bawah body kita menyisipkan sebuah srcipt untuk memanggil function inputName(). Function ini berisi inputan dengan menggunakan function prompot, dimana nanti akan muncul popup dialog seperti dibawah ini. cobalah kita isi dengan nama kita sendiri, lalu perhatikan apa yang terjadi. Jika tulisan selamat datang muncul, maka kita sudah berhasil mempelajari salah satu inputan javscript.

Javascript Output

Pada materi diatas, dan materi sebelumnya kita secara tidak langsung sudah mencoba mengeluarkan inputan melalui javascript ke dalam elemen html dengan menggunakan method innerHTML. Kali ini, kita akan menjelaskan fungsi-fungsi lain yang sering di gunakan untuk mengeluarkan output dari sebuah inputan javascript. Adapun fungsi-fungsi tersebut adalah sebagai berikut:

• innerHTML : menulis output kedalam tag/elemen HTML
• document.write() : menulis output kedalam halaman HTML
• window.alert() : menulis output kedalam suatu popup alert
• console.log() : menulis output kedalam console browser. method ini sering kali digunakan ketika kita melakukan suatu debuging ke dalam suatu proses.

untuk memahami semua contoh diatas perhatikan syntaks dibawah ini.

Perhatikan script diatas, kemudian coba anda click pada tab HTML.  Dalam kasus diatas, kita tidak menulis apapun pada halaman HTML, semua text kita tulis dalam javascript dengan menggunakan method document.write(). Pada contoh diatas, script secara otomatis akan menghitung usia kita dengan rumus tahun sekarang new Date().getFullYear() dikurangi tahun lahir.
Mari kita amati contoh selanjutnya.

Pada script diatas, ketika kita mengklik button ‘click me’ akan muncul tulisan popup. popup tersebut di panggil melalui function sayGreeting() yang disisipkan pada event onlick.

Fungsi output terakhir pada javaScript yang akan kita bahas saat ini adalah console.log. output ini berfungsi sebagai log dan hanya terlihat pada console browser. Untuk mengetahui apa itu console browser, mari kita download browser chrome atau firefox terlebih dahulu, lalu buatlah script seperti contoh dibawah ini kemudian simpan dengan nama console.html.

      
      greet


      
      Click Me
         

jalankan/open file diatas dengan menggunakan browser yang sudah kita download tadi. klik kanan pada browser anda, lalu pilih inspect element. Pada bagian bawah halaman akan muncul tab seperti gambar dibawah ini. pilih tab console, lalu coba anda isi form isian diatas dan klik button yang sudah disediakan. pastikan hasilnya seperti dibawah ini.

Congratssss!!! kita sudah belajar sejauh ini. Demikian penjelasan singkat mengenai input/output pada javascript. jika ada beberapa materi yang tidak dipahami atau ada beberapa pertanyaan yang ingin ditanyakan silakan kirimkan komentar teman-teman dibawah ini. Selamat belajar dan tetap semangat. ^_^

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

Langkah langkah membuat form login HTML?

HTML apa yang benar untuk membuat kolom input teks?

Apa itu input pada HTML?