Mengambil Nilai dari Radio button dengan javascript

Mengambil Nilai dari Radio button dengan javascript

Javascript LulusanSkom   11.08

 Assalamualaikum Wr, Wb

Kali ini mau sedikit share tentang bagaimana cara nya menampilkan nilai dari radio button ke text area, terkadang kita menemui kasus seperti itu, bagaiman caranya yuk langsung saja kita prakter

Tampilan awal sebelum radio button di klik

Tampilan sesudah Radio button di klik

Buat file index.html kemudian salih kode di bawah ini:

<div id="disposisimodaltelaah" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg ">
      <div class="modal-content">
        <div class="modal-header modal-dark">
          <h5 class="modal-title" id="exampleModalLabel">Disposisi Aduan</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>

        <form class="form-horizontal" method="post" action="#" 	enctype="multipart/form-data">
          <div class="modal-body">
            <div class="form-group col-12 mt-10">
              <label for="fm-nama">Disposisi Ke:</label>
	            <select class="form-control" name="kondisiaduan">
		            <option value="DI_TIMINSPEKTUR">TIM INSPEKTUR</option>
		            <option value="DITOLAK">LAPORAN DITOLAK</option>
		        </select>
            </div>

	        <div class="form-group col-12 mt-10">
              <label for="fm-nama">Upload Berkas:</label>
		        <input type="file" class="form-control" name="file" >
            </div>
            
            <div class="form-group col-12 mt-10">
                <label for="fm-nama">Catatan:</label>
                <div class="custom-control custom-radio">
		        <input type="radio" id="ContohRadio1" name="catatan" class="custom-control-input" onclick="displayResult(this.value)" value="Kami Sertkan Dokumen Bukti Bukti Hasil Dari Tim Telaah">
		        <label class="custom-control-label" for="ContohRadio1">Kami Sertkan Dokumen Bukti Bukti Hasil Dari Tim Telaah</label>
	        </div>
            
	        <div class="custom-control custom-radio">
		        <input type="radio" id="ContohRadio2"  name="catatan" class="custom-control-input" onclick="displayResult(this.value)" value="Dukumen Kurang Lengkap">
		        <label class="custom-control-label" for="ContohRadio2">Dukumen Kurang Lengkap</label>
	        </div>

	        <div>
	           <textarea class="form-control" name="catatan" Placeholder="Catatan Catatan Bila Ada" id="pilihan"></textarea>
	        </div>
	    </div>
            
        </div>
        <div class="modal-footer">
            <button  type="submit" class="btn btn-sm" style="background-color: #00a396; color:#ffffff">Disposisi</button>
          </div>
        </form>
      </div>
    </div>
</div>

<script>
    function displayResult(catatan){ 
        document.getElementById("pilihan").value=catatan; 
    }
</script>

Jalankan file di browser kalian. ok nilai dari radio button sudah berhasil di tampilkan di textarea dengan bantuan javascript, gimna gampang kan? semoga bermanfaat 🙏🏻

Menampilkan Gambar Dan Teks Dengan HTML Dan CSS

Menampilkan Gambar Dan Teks Dengan HTML Dan CSS

HTML LulusanSkom   16.49

Assalamualakum...

Kembali lagi ni temen2, kali ini mau berbagi cara menampilkan gambar di html dan Tekstag untuk menampilkan gambar di html adalah sebagai berikut:

<img src="html.png" alt="Gambar HTML"> 

src berfungsi untuk mengambil gambar dari komputer temen2, file gambar terletak di folder yang sama dengan filehtml

Misal untuk menampilkan gambar di luar folder ditambahin aja cara manggil file gambar contoh

<img src="../html.png" alt="">

Untuk menggambil gambar dari internet cukup masukan url gambar yang di pilih dari internet

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr4t8kz7zbSisubahLi1fheEv5foZSYXCl5kd61dNaUAdBt8cxCDsGt1_BIzj4NbCD9Z_TQmFLPleMu3Kh4BU2ov6noYQ1RRIKfrPnloRrMFFKCyo4AvE-dqsq5XvRZH458WaC1GFOq6c/s400/html.png" alt="">

Untuk kasus di bawah kita akan menampilkan gambar dan teks dipercantik dengan css, langsung saja

Hasil Bila dibuka di webbrowser

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis

Code HTML di taruh di dalam taq <body></body> di HTML

    <img src="html.png" alt="" align="left">
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis
    velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat,
    purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan
    convallis.
    </div>
    

Code Css nya

        img{
            margin: 5px 15px 5px 20px;
            width: 300px;
        }
        div, h2{
            text-align: justify;
            margin: 20px;
        }
    

Mudah Bukan? Silahkan dicoba dan semoga bermanfaat

Syntak HTML Dasar

Syntak HTML Dasar

HTML LulusanSkom   12.11

Assalamualaikum

Mudahan-mudahan  Semua Selalu Di Mudahkan Segala Urusan Dan Hajatnya
Sesuai Dengan Judul Postingan Syntak HTML Dasar, langsung aja ya
Untuk Memulai Membuat Halaman awal atau index.html
Berikut Tahapannya:

1.  Sudah install editor, kalau saya pakai visual studio, bisa didownload disini sesuaikan dengan OS Komputer Temen-Temen Semua, untuk pengguna windows, bisa menggunakan notepad bawaan windows, koreksi bilah salah
2. Buat Folder, nama Folder misal (belajarHtml) 
3. Buka Editor, Buat file baru  dengan nama index.html simpan di dalam forlder belajarHtml
4. Tulis atau copy kode HTMLnya dibawah
5. Buka folder belajarhtml, kemudian klik kanan file index.html, open to webbrowser temen-temen
6. Selesai, hasil yang ditampilka adalah [ Hello Word ]

Kode HTML nya

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>Hello Word</p>
</body>
</html>

Hasil Yang Di Tampilkan Dibrowser


Hello Word

Mudah Bukan, Silahkan Di Coba

DAFTAR TAG HTML

DAFTAR TAG HTML

HTML LulusanSkom   14.30

Assalamualaikum

Kali ini saya mau share daftar referensi tag-tag HTML. Tentunya temen-temen harus mengetahui kegunaan dari tag-tag html beserta atribut-atribut untuk di terapkan kedalam latihan HTML.
Referensi tag HTML dibawah ini juga termasuk tag HTML5 yang terakhir di release oleh W3C

Berikut adalah daftar dari tag-tag HTML

Nama Tag	Keterangan / Kegunaan
Basic
<!DOCTYPE>	Tag untuk menentukan tipe dokumen
<html>	Tag untuk membuat sebuah dokumen HTML
<title>	Tag untuk membuat judul dari sebuah halaman
<body>	Tag untuk membuat tubuh dari sebuah halaman
<h1> to <h6>	Tag untuk membuat heading
<p>	Tag untuk membuat paragraf
<br>	Memasukan satu baris putus
<hr>	Tag untuk membuat perubahan dasar kata didalam isi
<!--...-->	Tag untuk membuat komentar
Formatting
<acronym>	Tag untuk membuat sebuah akronim (tidak disupport lagi di HTML5)
<abbr>	Tag untuk membuat sebuah singkatan
<address>	Tag untuk membuat kontak alamat
<b>	Tag untuk membuat huruf bercetak tebal
<bdi>	Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5)
<bdo>	Mengganti arah teks
<big>	Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5)
<blockquote>	Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain
<center>	Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di HTML5)
<cite>	Tag untuk membuat judul karya
<code>	Tag untuk membuat potongan kode komputer di antara text
<del>	Tag untuk membuat teks yang telah dihapus dari dokumen
<dfn>	Tag untuk membuat sebuah istilah definisi
<em>	Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5)
<font>	Tag untuk membuat font, warna, dan ukuran untuk teks
<i>	Tag untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood
<ins>	Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen
<kbd>	Tag untuk membuat input keyboard
<mark>	Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5)
<meter>	Tag untuk membuat pengukuran skalar
<pre>	Tag untuk membuat teks terformat
<progress>	Memperlihatkan kemajuan tugas (tag baru HTML5)
<q>	Tag untuk membuat kutipan pendek
<rp>	Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5)
<rt>	Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia Timur)
<ruby>	Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5)
<s>	Tag untuk membuat teks yang tidak lagi benar
<samp>	Tag untuk membuat contoh keluaran dari program komputer
<small>	Tag untuk membuat teks kecil
<strike>	Tag untuk membuat teks yang di coret tengah (tidak disupport lagi di HTML5)
<strong>	Tag untuk membuat teks penting
<sub>	Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)
<sup>	Tag untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat)
<time>	Tag untuk membuat tanggal / waktu (tag baru HTML5)
<tt>	Tag untuk membuat teks teletype (tidak disupport lagi di HTML5)
<u>	Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya
<var>	Tag untuk membuat sebuah variabel
<wbr>	Tag untuk membuat kemungkinan garis-putus
Forms
<form>	Tag untuk membuat sebuah form HTML untuk input pengguna
<input>	Tag untuk membuat sebuah kontrol input
<textarea>	Tag untuk membuat sebuah kontrol input multibaris (text area)
<button>	Tag untuk membuat sebuah tombol yang dapat diklik
<select>	Tag untuk membuat sebuah daftar drop-down
<optgroup>	Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down
<option>	Tag untuk membuat pilihan dalam daftar drop-down
<label>	Tag untuk membuat sebuah label untuk sebuah elemen <input>
<fieldset>	Grup unsur terkait dalam bentuk
<legend>	Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details>
<datalist>	Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5)
<keygen>	Tag untuk membuat key-pair generator kolom input (tag baru HTML5)
<output>	Tag untuk membuat hasil penghitungan (tag baru HTML5)
Frames
<frame>	Tag untuk membuat sebuah window (bingkai) dalam sebuah frameset (tidak disupport lagi di HTML5)
<frameset>	Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5)
<noframes>	Tag untuk membuat sebuah konten alternatif untuk pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5)
<iframe>	Tag untuk membuat sebuah bingkai
Images
<img>	Tag untuk membuat gambar
<map>	Tag untuk membuat gambar-peta
<area>	Tag untuk membuat area dalam gambar-peta
<canvas>	Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru HTML5)
<figcaption>	Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5)
<figure>	Menentukan konten mandiri (tag baru HTML5)
Audio/Video
<audio>	Tag untuk membuat isi suara (tag baru HTML5)
<source>	Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag baru HTML5)
<track>	Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>) (tag baru HTML5)
<video>	Tag untuk membuat sebuah video atau film (tag baru HTML5)
Links
<a>	Tag untuk membuat hyperlink
<link>	Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal (paling sering digunakan untuk link ke style sheet)
<nav>	Tag untuk membuat navigasi link (tag baru HTML5)
Lists
<ul>	Tag untuk membuat daftar dengan selain nomor
<ol>	Tag untuk membuat daftar dengan nomor
<li>	Tag untuk membuat sebuah item daftar
<dir>	Tag untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5)
<dl>	Tag untuk membuat sebuah daftar definisi
<dt>	Tag untuk membuat istilah (item) dalam daftar definisi
<dd>	Defines a description of an item in a definition list
<menu>	Tag untuk membuat deskripsi dari item dalam daftar definisi
<command>	Tag untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta (tag baru HTML5)
Tables
<table>	Tag untuk membuat tabel
<caption>	Tag untuk membuat sebuah caption tabel
<th>	Tag untuk membuat sebuah sel header tabel
<tr>	Tag untuk membuat baris dalam sebuah tabel
<td>	Tag untuk membuat sel dalam sebuah tabel
<thead>	Mengelompokan isi header dalam sebuah tabel
<tbody>	Mengelompokanisi tubuh dalam sebuah tabel
<tfoot>	Mengelompokan isi footer dalam sebuah tabel
<col>	Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
<colgroup>	Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat
Style/Sections
<style>	Tag untuk membuat informasi style untuk dokumen
<div>	Tag untuk membuat sebuah bagian dalam dokumen
<span>	Tag untuk membuat sebuah bagian dalam dokumen
<header>	Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5)
<footer>	Tag untuk membuat footer untuk dokumen atau bagian (tag baru HTML5)
<hgroup>	Pengelompokan elemen heading (<h1> sampai <h6>) (tag baru HTML5)
<section>	Tag untuk membuat bagian dalam dokumen (tag baru HTML5)
<article>	Tag untuk membuat sebuah artikel (tag baru HTML5)
<aside>	Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5)
<details>	Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru HTML5)
<dialog>	Tag untuk membuat sebuah kotak dialog atau jendela (tag baru HTML5)
<summary>	Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru HTML5)
Meta Info
<head>	Tag untuk membuat informasi tentang dokumen
<meta>	Tag untuk membuat metadata tentang dokumen HTML
<base>	Menentukan URL dasar / target untuk semua URL relatif dalam dokumen
<basefont>	Menentukan standar warna, ukuran, dan font untuk semua teks dalam dokumen (tidak disupport lagi di HTML5)
Programming
<script>	Tag untuk membuat script di sisi klien
<noscript>	Tag untuk membuat sebuah konten alternatif bagi pengguna yang tidak mendukung script di sisi klien
<applet>	Tag untuk membuat sebuah java applet yang ditanam (tidak disupport lagi di HTML5)
<embed>	Tag untuk membuat sebuah wadah untuk aplikasi eksternal (non-HTML) (tag baru HTML5)
<object>	Tag untuk membuat sebuah objek yang ditanam
<param>	Tag untuk membuat sebuah parameter untuk objek

Gimana Temen-temen mudahkan? Silahkan Dicoba

Semoga Bermanfaat