[ask] MEMBUAT METHOD POST UNTUK PROSES DALAM CANVAS (HTML 5)

Beranda
Komunitas
Tech
Website, Webmaster, Webdeveloper
[ask] MEMBUAT METHOD POST UNTUK PROSES DALAM CANVAS (HTML 5)

bagusandrian

07-09-2014 12:48

[ask] MEMBUAT METHOD POST UNTUK PROSES DALAM CANVAS (HTML 5)

permisi mastah2, agan2, semuanya yang senantiasa ada membantu ane. Ane mau tanya nih masalah html 5 terutama CANVAS. Sebelumnya ane mau jabarin cerita dulu ya gan...

begini ceritanya, ane sedang berencana membuat web yang dapat digunakan untuk para pelajar dalam mempelajari HIMPUNAN.
jadi intinya ane membuat web service untuk mempelajari tentang himpunan.

ane bingung mau kaya gimana. sebenernya ane dah patah semangat buat ngadepin ini semua, tapi ane gak boleh patah semangat. #hais mulai nglantur.. haha

ane bingung gan, langsung aja nih ane kasih gambar aja dah....
bisa dibuka aja website yang mau ane kembangkan.
link: http://tokoperdana.besaba.com/
atau klik disini

Spoiler for BIAR GAMBAR YANG BERBICARA:

Quote:

halaman awal web yang mau dibuat....

Quote:

setelah inputan

ane stop sampai disitu gan, dah ane kagak tau harus gimana. ada hasil yang mau ane harepin seperti gambar dibawah ini :
[SPOILER=hasil yang mau diharapkan setelah tekan tombol proses

[/SPOILER]

tolong bantuannya mastah, agan, semuanya yang bisa... help me...
o iya... nih ane kasih scriptnya....

Spoiler for script:

<!DOCTYPE html>
<html>
<head>
<title>CSSDesk</title>
<style type="text/css">

body { background-color: #fff; }

body {
font-family: "Helvetica", "Arial", sans-serif;
font-size: 12px;
}

form {
margin: 0 auto;
width: 960px;
}

form > h1 {
border-bottom: 1px solid #E5E5E5;
font-size: 1.5em;
line-height: 2.5em;
margin-bottom: 1em;
text-align: center;
width: 100%;
}

fieldset {
border: none;
}

fieldset > legend {
font-size: 1.5em;
line-height: 1.5em;
}

input {
display: inline-block;
vertical-align: center;
}

input:required:invalid,
input:focus:invalid,
input:required:valid {
background-position: 97.5% center;
background-repeat: no-repeat;
}

input:required:invalid,
input:focus:invalid {
background-image: url("http://i.imgur.com/NSaK8yt.png");
}

input:required:valid {
background-image: url("http://i.imgur.com/ttb7yp4.png");
}

input[type=submit],
input[type=reset] {
background: linear-gradient(to bottom, #fff, #E6E6E6);
border: 1px solid #999;
border-radius: 5px;
padding: 5px;
margin: 4px 10px;
padding: 5px;
width: 150px;
}

input[type=submit]:hover,
input[type=reset]:hover {
cursor: pointer;
}

input[type=submit]:active,
input[type=reset]:active {
background: #D4D4D4;
}

input[type=submit] {
background: linear-gradient(to bottom, #0088CC, #0044CC);
border: 1px solid #0088CC;
color: #FFF;
}

input[type=submit]:active {
background: #0044CC;
}

select,
input[type*=date],
input[type=text],
input[type=tel],
input[type=email],
input[type=url],
input[type=password] {
border: 1px solid #CCC;
border-radius: 5px;
padding: 5px;
width: 225px;
}

select:focus,
input:focus {
border-color: rgba(82, 168, 236, 0.8);
border-radius: 5px;
box-shadow: inset
0
1px 1px
rgba(0, 0, 0, 0.075),
0 0 8px
rgba(82, 168, 236, 0.6);
outline: 0;
}

.control-group {
margin: 10px 0;
}

.control-group > label {
display: inline-block;
text-align: right;
width: 20%;
}

#FormAction {
border-top: 1px solid #C5C5C5;
margin-bottom: 1em;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<form action="proses.html" method="post">
<h1>Aplikasi Membuat Diagram Ven</h1>

<fieldset id="UserDataFields">
<legend>Isikan data untuk masing-masing union</legend>

<div class="control-group">
<label for="A">N(A)</label>
<input type="text" name="A" id="A" required placeholder="contoh: 1,2,3,4,...."><br>
<label for="warna-A">Pilih warna N(A)</label>
<input type="color" name="warnaa" >
</div>

<div class="control-group">
<label for="B">N(B)</label>
<input type="text" name="B" id="B" required placeholder="contoh: 1,2,3,4,...."><br>
<label for="warna-B">Pilih warna N(B)</label>
<input type="color" name="warnab" >
</div>

<div class="control-group">
<label for="B">N(C)</label>
<input type="text" name="C" id="C" required placeholder="contoh: 1,2,3,4,...."><br>
<label for="warna-C">Pilih warna N(C)</label>
<input type="color" name="warnac" >
</div>

</fieldset>
<fieldset id="FormAction">
<legend>Selesai mengisikan form?</legend>

<input type="reset" value="Hapus Form">
<input type="submit" value="Proses">
</fieldset>
</form>
</body>
</html>

tolong bantuaanya temen2 web semua, mastah, agan pokok nya semua help me gan.....

1.1K

Kutip

Balasan

Tulis komentar menarik atau mention replykgpt untuk ngobrol seru

Urutan

Terbaru

Terlama

Tulis komentar menarik atau mention replykgpt untuk ngobrol seru

Komunitas Pilihan