Minggu, 11 Maret 2018

MEMBUAT FORM PENDAFTARAN SEDERHANA DENGAN HTML,CSS,DAN JS

Apa itu html,css dan js...????
Secara kasar
HyperText Markup Language (HTML) bahasa yang menggambarkan struktur dan isi semantik dari sebuah dokumen Web.
Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.
Javascript bahasa pemrograman tingkat tinggi dan dinamis. dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
<!--untuk HTML>
<!DOCTYPE html>
<html>
<head>
<title>Membuat Form LOGIN HTML,CSS,Javascript014</title>   //untuk judul
<link rel="stylesheet" type="text/css" href="style.css">  //koneksi css
</head>
<body>
<center><h2>LOGIN HTML,CSS,Javascript014</h2></center>  //untuk judul di body
<div class="login">
<form action="#" method="POST" onSubmit="validasi()">
<div>
<label>Nama Lengkap:</label>
<input type="text" name="nama" id="nama" /> //kolom nama
</div>
<div>
<label>Email:</label>
<input type="email" name="email" id="email" />//kolom email
</div>
<div>
<label>Alamat:</label>
<textarea cols="40" rows="5" name="alamat" id="alamat"></textarea> kolom alamat dan lebar kotak
</div>
<div>
<input type="submit" value="Daftar" class="tombol">
</div>
</form>
</div>
</body>


tampa Javascript

<!--untuk Javascript>
<script type="text/javascript">
function validasi() {
var nama = document.getElementById("nama").value;//konek si ini unruk alert
var email = document.getElementById("email").value;//konek si ini unruk alert
var alamat = document.getElementById("alamat").value;//konek si ini unruk alert
if (nama != "" && email!="" && alamat !="") {
return true;
}else{
alert('Anda harus mengisi data dengan lengkap !');
}
}
</script>
</html>
tambah javascript

untuk CSS
membuat file baru dengan nama style.css
{
  padding: 0px;
  margin: 0px;
}
body{
    background: url(214425_dziewczyna-aniol-golebie-manga-anime-fantasy.jpg)left bottom no-repeat;//nama gambar
     background-size:cover;
height: 680px; //ukuran gambar
}


h2 {
  color: black;
}

.login {
  padding: 1em;
  margin: 2em auto;
  width: 17em;
  background-color: rgba(225, 255, 255, 0.4);//buat transparan
  border-radius: 3px;
}

label {
  font-size: 10pt;
  color: #555;
}

input[type="text"],
input[type="email"],
textarea {
  padding: 8px;
  width: 95%;
  background:#efefef;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
}

.tombol {
  background: #3498db;
  color: #fff;
  border: 0;
  padding: 5px 8px;
}
penambahan CSS

1 komentar:

  1. Terima kasih kak atas blog nya sangat membantu saya untuk membuat suatu web login dengan menggunakan html,css dan js kak dan terus berkarya kak.
    saya mau bertaya kak apa haya di halam login saja yang dapat menggunakn htlm,css dan js?
    perkenalkan nama saya : Andrian Antonius NIM saya : 1922500215 Web Kampus saya :https://www.atmaluhur.ac.id

    BalasHapus

Featured Post

Mengetahui tentang tag-tag HTML5

STRUKTUR HTML  HTML5 adalah versi terbaru dari HTML yang statusnya sudah direkomendasikan oleh W3C walau belum 100% sempurna, tapi beb...