Pengenalan Code HTML Option Group

Pengenalan Code HTML Option Group. Hai ! Tutorial lalu kita sudah mempelajari tentang Panduan Membuat List Number di HTML, jika anda ingin lebih jelas mengenal HTML anda bisa mengunjungi halaman berikut : https://www.dicloud.id/tutorial/categories/perkenalan-html, disini kita akan mempelajari tentang Pengenalan Code HTML Option Group, berikut penjelasannya :

disini kita akan mempelajari tentang Pengenalan Code HTML Option Group, berikut penjelasannya :

Code HTML Option Group

Disini saya akan memberikan contoh code HTML untuk menambahkan sebuah Option Group sederhana pada web, 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>

<p align="center"><select>
  <optgroup label="Barang">
    <option value="Desgram">Desgram</option>
    <option value="Yorolar">Yorolar</option>
  </optgroup>
  <optgroup label="Suplier">
    <option value="Nanang">Nanang</option>
    <option value="Ajie">Ajie</option>
  </optgroup>
</select></p>



<blockquote class="gd"><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>
</blockquote>


<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>

<option value="Desgram">Desgram</option>

<option value="Yorolar">Yorolar</option>

</optgroup>

<option value="Nanang">Nanang</option>

</optgroup>

</select></p>

<blockquote class="gd"><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>

</blockquote>

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

</footer>

</body>

</html>

Dan menghasilkan hasil seperti gambar dibawah ini :

Pengenalan Code HTML Option Group

Disini kita menemukan elemen baru yaitu, <optgroup> atau bisa disebut group option , group option ini berfungsi sebagai pemilah atau pembagi jenis option, seperti gambar di atas.

Kesimpulan

Jika anda ingin membagi option option yang ada di HTML anda , anda bisa menggunakan <optgroup> sebagai group dari option tersebut.

Sekian Terima Kasih.

Author: Dicloud Support

Technical Support in dicloud.id

Panduan & Tutorial

Pengenalan Code HTML Option Group