<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function myFunction(){
var conf = window.alert("Pendaftaran Berhasil");
}
</script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: arial;
}
.navbar{
background-color: #333;
padding: 20px;
margin-bottom:5em;
color: white;
}
.head{
color: grey;
}
.head_al{
padding-top: 50px;
}
.table{
margin-top: 20px;
}
input{
padding-left: 10px;
border: none;
border-bottom: 2px solid grey;
height: 20px;
width: 250px;
font-size: 15px;
}
td{
padding: 5px;
padding-right: 15px;
}
button{
margin: 40px;
padding: 10px;
background-color: #333;
border: none;
border-radius: 8px;
color: white;
font-size: 15px;
font-weight: bold;
}
button:hover{
background-color: #ffce42;
}
.footer{
background-color: #333;
height: 300px;
}
img{
margin-top: 20px;
height: 100px;
border: 2px solid #333;
border-radius: 100px;
}
</style>
</head>
<body>
<div class="navbar">
<h3>LOVE.ME</h3>
</div>
<div align="center">
<h2 class="head">PENDAFTARAN MEMBER</h2>
<table class="table">
<tr>
<td>Nama</td>
<td>
<input list="nama" name="" type="text">
</td>
</tr>
<tr>
<td>Status</td>
<td>
<input list="status" name="" type="text"> <datalist id="status">
</datalist>
<script>
var statusli = ["Single","In Relationship","Complicated"];
var options = '';
for(var i=0; i<statusli.length; i++){
options += '<option value="'+statusli[i]+'">';
}
document.getElementById('status').innerHTML = options;
console.log(options);
</script>
</td>
</tr>
</table>
</div>
<div align="center">
<button onclick="myFunction()" type="button">DAFTARKAN SAYA!</button>
</div>
<div class="footer"></div>
</body>
</html>
No comments:
Post a Comment