Scribd
Unggah
35 tayangan15 halaman

Tugas 11 - CSS HTML

Formulir ini digunakan untuk mengumpulkan data mahasiswa yang akan bergabung dalam unit kegiatan mahasiswa. Formulir ini meminta data diri seperti NIM, nama, jenis kelamin, fakultas dan hobi. Formulir ini menggunakan elemen form seperti textbox, dropdown, radio button dan checkbox untuk pengumpulan datanya.

Diunggah oleh

Gintriana Kurniadi Putra
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
35 tayangan15 halaman

Tugas 11 - CSS HTML

Formulir ini digunakan untuk mengumpulkan data mahasiswa yang akan bergabung dalam unit kegiatan mahasiswa. Formulir ini meminta data diri seperti NIM, nama, jenis kelamin, fakultas dan hobi. Formulir ini menggunakan elemen form seperti textbox, dropdown, radio button dan checkbox untuk pengumpulan datanya.

Diunggah oleh

Gintriana Kurniadi Putra
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 15

TUGAS

Mengerjakan Tugas 11 dari KuliahOnline UNIKOM

Untuk Memenuhi Salah Satu Tugas

Mata Kuliah: Praktikum Web Programm


Dosen : Taryana Suryana M.Kom

Disusun Oleh:

Gintriana Kurniadi Putra

41820107

IK-3

FAKULTAS ILMU SOSIAL DAN POLITIK


ILMU KOMUNIKASI
UNIVERSITAS KOMPUTER INDONESIA
Tampilan Awal & Ketika di Isi

Di awalan ini kurang lebih seperti ini, di bawah nama lengkap ada Marquee yang menyampaikan
pesan untuk jangan lupa mengisi NIM dan Nama Lengkap dan juga mengingatkan Protokol
Kesehatan.

Tampilan Awal berikutnya

Disini menggunakan Selectbox , Checkbox dan juga Radiobox.


Tampilan Awal & Kirim Button

Meskipun disini saya menggunakan Form, akan tetapi tidak menggunakan Action pada form
untuk meng submit data. Akan tetapi disini saya lebih menggunakan Javascript dan membuat
fungsi seperti berikut :

<script>

function gajadi(){

alert("YAUDAH DI CANCEL DEH! MAKASII YAA!!");

document.getElementById("nim").innerHTML ="";

document.getElementById("nama").innerHTML ="";

};

function kirim_bro(){

var pesanan = document.getElementsByName('gender');

var pesanx;

for(var i = 0; i < pesanan.length; i++){

if(pesanan[i].checked){
pesanx = pesanan[i].value;

};

};

var hobiku = document.getElementsByName('hobi');

var hobinya;

for(var o = 0; o < hobiku.length; o++){

if(hobiku[o].checked){

if(o > 1){

hobinya = hobinya + ", " + hobiku[o].value;

} else {

hobinya = hobiku[o].value;

};

};

};

alert("Nomor Induk Mahasiswa (NIM)" + '\n' + document.getElementById('nim').value + '\n \n'


+ "Nama Lengkap" + '\n' + document.getElementById('nama').value + '\n \n' + "Jenis Kelamin:"
+ '\n' + pesanx + '\n \n' + "Fakultas / Prodi" + '\n' + document.getElementById('kultas').value +
'\n \n' + "Hobby anda adalah " + hobinya);

};

</script>

Fungsi di atas ada 2 yaitu. GAJADI() dan KIRIM_BRO()


Fungsi GAJADI() akan menampilkan pesan dan menghapus NIM serta Nama Lengkap dan
Mereset data di form.

Fungsi KIRIM_BRO() akan mengirimkan semua data lalu akan ditampilkan seperti ini

dan dibawah nya ada footer yang mengunakan link ke Instagram saya jika diklik di bagian nama
GINTRIANA KURNIADI PUTRA

Berikut ini tampilan full nya :


Dan yang terakhir ada Source kode Lengkap TUGAS 11

Source Code TUGAS 11 :


<html>

<head>

<title>TUGAS 11 | FORM PENDAFTARAN </title>


<link rel="stylesheet" href="w3.css">

<style>

h1{

font-family: "Consolas";

h2{

font-family: "Consolas";

color: white;

hr{

border-top: 1px solid gray;

border-radius: 2px;

</style>

</head>

<body style="background-color: 08881;">

<center>
<div class="w3-container w3-card w3-white">

<h1>FORMULIR UNIT KEGIATAN MAHASISWA - UNIKOM</h1>

</div>

<br>

<form class="w3-container" style="width: 95%; text-align: left;">

<div class="w3-card-4">

<div class="w3-container w3-blue">

<h2 style="text-align:center;"><b>DATA MAHASISWA</b></h2>

</div>

<div class="w3-container w3-white">

<p class="w3-container" style="width: 100%;">

<label>Nomor Induk Mahasiswa (NIM) :</label>

<input type="text" class="w3-input" name="nim_mhs" id="nim">

</p>

<p class="w3-container" style="width: 100%;">

<label>Nama Lengkap :</label>

<input type="text" class="w3-input" name="nama_mhs" id="nama">

</p>

</div>
<div class="w3-container w3-white">

<center><hr width="100%"><marquee>Kepada para mahasiswa untuk tidak lupa mengisi


<b>NIM</b> dan <b>Nama Lengkap</b> serta mengisi seluruh isi formulir - Jangan lupa ingat
pesan ibu yaitu 3M (Memakai Masker, Mencuci Tangan, dan Menjaga Jarak)</marquee><hr
width="100%"></center>

</div>

<div class="w3-container w3-white">

<div class="w3-container w3-purple">

<h2><b>FAKULTAS / PRODI</b></h2>

</div>

</div>

<div class="w3-container w3-white">

<p>

<select class="w3-select" name="fakultass" id="kultas">

<option value="" disabled selected>Pilih fakultas beserta prodi anda...</option>

<option value="Ilmu Komunikasi">FISIP / ILMU KOMUNIKASI</option>

<option value="Ilmu Hubungan Internasional">FISIP / ILMU HUBUNGAN


INTERNASIONAL</option>

<option value="Teknik Informatika">TEKNIK / TEKNIK INFORMATIKA</option>

<option value="Teknik Elektro">TEKNIK / TEKNIK ELEKTRO</option>

</select>

</p>

</div>
<div class="w3-container w3-white">

<div class="w3-container w3-orange">

<h2><b>JENIS KELAMIN</b></h2>

</div>

</div>

<div class="w3-container w3-white">

<p>

<input class="w3-radio" type="radio" name="gender" id="r1" value="Laki - Laki"/> LAKI -


LAKI

<br>

</p>

<p>

<input class="w3-radio" type="radio" name="gender" id="r2" value="Perempuan"/>


PEREMPUAN

<br>

</p>

<p>

<input class="w3-radio" type="radio" name="gender" id="r3" disabled /> TIDAK DIKETAHUI

</p>
</div>

<div class="w3-container w3-white">

<div class="w3-container w3-green">

<h2><b>HOBBY</b></h2>

</div>

</div>

<div class="w3-container w3-white">

<p>

<input class="w3-check" type="hidden" name="hobi" id="g0" value="noindex"/>

<input class="w3-check" type="checkbox" name="hobi" id="g1" value="Olahraga"/>


OLAHRAGA

<br>

</p>

<p>

<input class="w3-check" type="checkbox" name="hobi" id="g2" value="Musik"/> MUSIK

<br>

</p>

<p>
<input class="w3-check" type="checkbox" name="hobi" id="g3" value="Membaca Ilmu
Pengetahuan (Baca Buku)"/> MEMBACA ILMU PENGETAHUAN (BACA BUKU)

<br>

</p>

<p>

<input class="w3-check" type="checkbox" name="hobi" id="g4" value="Bermain Games"/>


BERMAIN GAMES

<br>

</p>

<p>

<input class="w3-check" type="checkbox" name="hobi" id="g5" value="Berbelanja"/>


SHOPPING / BERBELANJA

<br>

</p>

</div>

<div class="w3-container w3-white">

<center>

<p>

<button class="w3-btn w3-green w3-ripple w3-round" onclick="kirim_bro()">KIRIM</button>


<button class="w3-btn w3-red w3-ripple w3-round" onclick="gajadi()">BATAL</button>

</p>

</center>

</div>

<div class="w3-container w3-blue">

<p style="text-align: center;">

Hak Cipta oleh 41820107 - <a href="https://instagram.com/i_am.gintrianakp" > <b>


GINTRIANA KURNIADI PUTRA </b> </a> - IK3 - UNIVERSITAS KOMPUTER
INDONESIA

</p>

</div>

</form>

</center>

</div>

</body>

<script>

function gajadi(){

alert("YAUDAH DI CANCEL DEH! MAKASII YAA!!");

document.getElementById("nim").innerHTML ="";

document.getElementById("nama").innerHTML ="";

};

function kirim_bro(){
var pesanan = document.getElementsByName('gender');

var pesanx;

for(var i = 0; i < pesanan.length; i++){

if(pesanan[i].checked){

pesanx = pesanan[i].value;

};

};

var hobiku = document.getElementsByName('hobi');

var hobinya;

for(var o = 0; o < hobiku.length; o++){

if(hobiku[o].checked){

if(o > 1){

hobinya = hobinya + ", " + hobiku[o].value;

} else {

hobinya = hobiku[o].value;

};

};

};
alert("Nomor Induk Mahasiswa (NIM)" + '\n' + document.getElementById('nim').value + '\n \n'
+ "Nama Lengkap" + '\n' + document.getElementById('nama').value + '\n \n' + "Jenis Kelamin:"
+ '\n' + pesanx + '\n \n' + "Fakultas / Prodi" + '\n' + document.getElementById('kultas').value +
'\n \n' + "Hobby anda adalah " + hobinya);

};

</script>

</html>

Terima kasih atas ilmu yang telah bapak sampaikan, sangat bermanfaat sekali. Semoga
tugas yang saya buat ini dapat memuaskan.

Anda mungkin juga menyukai