Pengenalan Code HTML Data List

Pengenalan Code HTML Data List. Hai ! Pada tutorial yang lalu kita sudah mempelajari tentang Pengenalan Code HTML TextArea, jika anda ingin melihat panduan lengkap tentang HTML anda bisa mengunjungi halaman berikut : https://www.dicloud.id/tutorial/categories/perkenalan-html/, disini saya akan menjelaskan tentang Pengenalan Code HTML Data List, berikut penjelasannya :

disini saya akan menjelaskan tentang Pengenalan Code HTML Data List, berikut penjelasannya :

Code HTML Data List

Disini saya akan memberikan contoh code untuk menampilkan Data List di html , berikut contoh nya :

<!DOCTYPE html>
<html>
<head>

	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet">


	<style type="text/css">

    footer{
        font-family: 'Libre Franklin', sans-serif;
        background-color: grey;
        color: white;
    }
		
		.bg {
	font-family: 'Libre Franklin', sans-serif;
    font-size: 30px;
    background-color: #28e9ed;
    color: black;
    padding: 10px;
    text-align: justify;
    	}
    	.gd {
    border: 2px solid;
    border-color: #28e9ed;
    padding: 100px;
    color: #ffffff;
    background-image: url(text.jpg);	
    	}
    	.btn {
    background-color: #292cc6;
    padding: 10px;
    color: #ffffff;
    border: 14px;
    size: 13px;
    	}
    	.cmark{
    		background-color: #292cc6;
    	}
    	table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
		}
	td, th {
    border: 10px solid #dddddd;
    text-align: left;
    padding: 8px;
		}
	caption {
		border:5px solid #000000;
		text-shadow: 2px 2px #000000;
		color: #292cc6;
		font-size: 34px;
		font-family: 'Libre Franklin', sans-serif;

		}
	nav {
        border:5px solid #000;
    }

	</style>
	<title>Test</title>
</head>
<body>

<nav>
<a href="http://google.com/">Google</a> |
<a href="index.html">Home</a> |
<a href="http://Facebook.com">Facebook</a> |
<a href="http://dicloud.id/">Dicloud</a>
</nav>

<h3 align="center"><i class="bg">What is Lorem Ipsum?</i></h3>
<p align="center"><i class="material-icons" style="font-size: 70px">wb_sunny</i></p>

<form>
  <input list="nama" name="nama">
  <datalist id="nama">
    <option value="Yuda">
    <option value="Angga">
    <option value="Indra">
    <option value="Sudi">
    <option value="Yoga">
  </datalist>
  <input type="submit">
</form>



<textarea rows="4" cols="50"><h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<small>It has survived not only five centuries, <sup>but also the leap into electronic typesetting, remaining essentially unchanged.</small></sup>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h1>
</textarea>

<footer>
  <p align="center">Copyright @ 2018</p>
  <p align="center">Creator Of Doom</p>
</footer>



</body>
</html>

100

101

102

103

104

105

<!DOCTYPE html>

<html>

<head>

rel="stylesheet">

footer{

font-family: 'Libre Franklin', sans-serif;

background-color: grey;

color: white;

}

.bg {

font-family: 'Libre Franklin', sans-serif;

font-size: 30px;

background-color: #28e9ed;

color: black;

padding: 10px;

text-align: justify;

}

.gd {

border: 2px solid;

border-color: #28e9ed;

padding: 100px;

color: #ffffff;

background-image: url(text.jpg);

}

.btn {

background-color: #292cc6;

padding: 10px;

color: #ffffff;

border: 14px;

size: 13px;

}

.cmark{

background-color: #292cc6;

}

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

}

td, th {

border: 10px solid #dddddd;

text-align: left;

padding: 8px;

}

caption {

border:5px solid #000000;

text-shadow: 2px 2px #000000;

color: #292cc6;

font-size: 34px;

font-family: 'Libre Franklin', sans-serif;

}

nav {

border:5px solid #000;

}

</style>

</head>

<body>

<nav>

<a href="http://google.com/">Google</a> |

<a href="index.html">Home</a> |

<a href="http://Facebook.com">Facebook</a> |

<a href="http://dicloud.id/">Dicloud</a>

</nav>

<h3 align="center"><i class="bg">What is Lorem Ipsum?</i></h3>

<p align="center"><i class="material-icons" style="font-size: 70px">wb_sunny</i></p>

<form>

</datalist>

</form>

<textarea rows="4" cols="50"><h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<small>It has survived not only five centuries, <sup>but also the leap into electronic typesetting, remaining essentially unchanged.</small></sup>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h1>

</textarea>

<p align="center">Creator Of Doom</p>

</footer>

</body>

</html>

Dan akan menghasilkan hasil seperti gambar dibawah ini :

Pengenalan Code HTML Data List

Disini kita menggunakan code baru yaitu data list, fungsi dari code ini digunakan untuk menampilkan data list pada search box, misal top post akan ditampilkan pada search box jika kita klik kolom tersebut maka akan keluar data list yang berisikan top post.

Note

Jika anda ingin menggunakan datalist pastikan anda memakai browser selain safari , karena di safari data list tidak support code ini.

Sekian Terima Kasih.

Author: Dicloud Support

Technical Support in dicloud.id

Panduan & Tutorial

Pengenalan Code HTML Data List