Cara Membuat Form Registrasi Pada HTML dan CSS ~ Compimania-id

Pertama-tama buat sebuah file dengan nama index.html dan sebuah file bernama form.css

untuk file dengan nama index.html scriptnya adalah sebagai berikut :

<html>

<head>

<title> Form Pendaftaran Resep Kue Baru </title>

</head>

<tr>

<td width="1038" align="center"> <marquee> <h1> <font face="Rockwell" color ="ffffff"> Welcome To Website "Riry's Cake"</font> </h1> </marquee> </td>

</tr>

</div>

<tr>

<td>Nama Lengkap</td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td>

<input type="radio" name="gender" id="laki" value="perempuan">Perempuan</label>

</td>

</tr>

<tr>

<td>Tanggal Lahir</td>

<td>

<div>

<option value="Tanggal" selected>Tanggal</option>

</select>

<option value="Bulan" selected>Bulan</option>

<option value="Januari">Januari</option>

<option value="Februari">Februari</option>

<option value="Maret">Maret</option>

<option value="April">April</option>

<option value="Agustus">Agustus</option>

<option value="September">September</option>

<option value="Oktober">Oktober</option>

<option value="November">November</option>

<option value="Desember">Desember</option>

</select>

<option value="Tahun" selected>Tahun</option>

</select>

</div>

</td>

</tr>

<tr>

<td>Agama</td>

<td>

<input type="radio" name="agm" id="islm" value="islm">Islam</label>

<input type="radio" name="agm" id="kris" value="kris">Kristen</label>

<input type="radio" name="agm" id="hin" value="hin">Hindu</label>

<input type="radio" name="agm" id="bud" value="bud">Budha</label>

</td>

</tr>

<td>Telepon</td>

</tr>

<tr>

<td>Email</td>

</tr>

<tr>

<td>Resep Kue</td>

<td>

</td>

</tr>

<tr>

<td>Uploud Kue</td>

<td>

</td>

</tr>

<tr>

<td>

<button class="submit" type="submit" value="Sub">Submit</button>

<button class="reset" type="res" value="res">Reset</button>

</td>

</tr>

</table>

</form>

</div>

</footer>

</body>

</html>

sedangkan untuk file form.css sebagai berikut :

.container{

margin-top: 10px;

margin-left: 400px;

}

.bingkai{

border: 5px solid #FFE4B5;

width: 550px;

height: 550px;

}

body{

background-image: url('my.jpg');

}

.kepala{

width: 560px;

height: 130px;

background-color: #FFE4B5;

border-radius: 3px 3px 0 0;

}

.kepalatext{

color: #000000;

text-align: center;

font-size: 18pt;

font-family: Century;

padding-top: 12px;

height: 30px;

}

.kepalatext:hover{

color: #ff0000;

}

.badan{

width: 550px;

height: 680px;

background-color: #ffffff;

border-radius: 3px;

box-shadow: 6px 6px 0 0 #ffffff;

}

.nama{

font-family: Century;

font-size: 13pt;

width: 415px;

height: 35px;

border: 1px solid #000000;

padding-left: 5px;

margin-top: 10px;

margin-left: 15px;

display: compact;

box-shadow: #000000;

border-radius: 5px;

}

.resep{

font-family: Century;

font-size: 13pt;

border: 1px solid #000000;

margin-left: 15px;

margin-top: 10px;

padding-left: 5px;

display: compact;

box-shadow: #000000;

border-radius: 5px;

}

.jeniskelamin{

font-family: Century;

color:#000000;

margin-top: 35px;

margin-left: 15px;

width: 15px;

height: 15px;

position: relative;

top: 0px;

display: compact;

}

.agama{

font-family: Century;

color:#000000;

margin-top: 35px;

margin-left: 15px;

width: 15px;

height: 15px;

position: relative;

top: 0px;

display: compact;

}

.submit:hover{

background-color: #ff0000;

color: #ffffff;

}

.footertext{

margin-top: 5px;

text-align: center;

font-family: Century;

font-size: 12pt;

color: #ffffff;

}

.tgllahir{

font-family: Century;

font-size: 12pt;

color: #000000;

border: 1px solid #000000;

margin-left: 15px;

height: 30px;

margin-right: -18px;

}

.tgllahirtext{

margin-left: 15px;

color: #000000;

font-family: Century;

font-size: 12pt;

text-align: left;

}

.jeniskelamintext{

margin-left: 15px;

color: #000000;

font-family: Century;

font-size: 12pt;

text-align: left;

}

.agamatext{

margin-left: 15px;

color: #000000;

font-family: Century;

font-size: 12pt;

text-align: left;

}

.tlp{

font-family: Century;

font-size: 13pt;

width: 415px;

height: 35px;

border: 1px solid #000000;

margin-left: 15px;

margin-top: 10px;

padding-left: 5px;

display: compact;

box-shadow:#000000;

border-radius: 5px;

}

.file{

font-family: Century;

color: #000000;

margin-top: 55px;

margin-left: 15px;

width: 200px;

height: 25px;

position: relative;

top: -30px;

display: compact;

}

.content{

padding: 10px;

padding-bottom: 30px;

}

.submit{

position:relative;

box-sizing:border-box;

display:block;

width:100px;

border: 0px none;

padding: 0px 15px;

text-align:center;

font-family:Century;

font-weight:400;

text-shadow: 0px 0px 0px transparent;

border-radius: 4px;

color:#FFF;

background:#b22222 none repeat scroll 0% 0%;

height: 30px;

line-height: 29px;

font-size: 16px;

margin:auto;

margin-top:10px;

}

.reset{

position:relative;

box-sizing:border-box;

display:block;

width:100px;

border: 0px none;

padding: 0px 15px;

text-align:center;

font-family:Century;

font-weight:400;

text-shadow: 0px 0px 0px transparent;

border-radius: 4px;

color:#FFF;

background:#b22222 none repeat scroll 0% 0%;

height: 30px;

line-height: 29px;

font-size: 16px;

margin:auto;

margin-top:10px;

}

#footer{

width: 100%;

height: 30px;

line-height: 30px;

border-bottom: silver 1px solid;

position: absolute;

bottom: 0px;

background-color: #cccccc;

}

hasilnya seperti ini

Sebelum form diisi

Sesudah form diisi

4 komentar

Click here for komentar

Unknown

admin

20 Juli 2018 pukul 00.25 ×

Makasih yaaa scriptnya...

mifta

12 November 2018 pukul 01.34 ×

Cara menampilkan ke database nya gimna kak

Kisah sukses

4 Februari 2019 pukul 21.38 ×

ASSALAMUALAIKUM SAYA INGIN BERBAGI CARA SUKSES SAYA NGURUS IJAZAH saya atas nama RIDWAN asal dari jawa timur sedikit saya ingin berbagi cerita masalah pengurusan ijazah saya yang kemarin hilang mulai dari ijazah SD sampai SMA, tapi alhamdulillah untung saja ada salah satu keluarga saya yang bekerja di salah satu dinas kabupaten di wilayah jawa timur dia memberikan petunjuk cara mengurus ijazah saya yang hilang, dia memberikan no hp BPK DR SUTANTO S.H, M.A beliau selaku kepala biro umum di kantor kemendikbud pusat jakarta nomor hp beliau 0853-2174-0123, alhamdulillah beliau betul betul bisa ngurusin masalah ijazah saya, alhamdulillah setelah saya tlp beliau di nomor hp 0853-2174-0123, saya di beri petunjuk untuk mempersiap'kan berkas yang di butuh'kan sama beliau dan hari itu juga saya langsun email berkas'nya dan saya juga langsun selesai'kan ADM'nya 50% dan sisa'nya langsun saya selesai'kan juga setelah ijazah saya sudah ke terima, alhamdulillah proses'nya sangat cepat hanya dalam 1 minggu berkas ijazah saya sudah ke terima.....alhamdulillah terima kasih kpd bpk DR SUTANTO S.H,M.A berkat bantuan bpk lamaran kerja saya sudah di terima, bagi saudara/i yang lagi bermasalah malah ijazah silah'kan hub beliau semoga beliau bisa bantu, dan ternyata juga beliau bisa bantu dengan menu di bawah ini wassalam.....

1. Beliau bisa membantu anda yang kesulitan :
– Ingin kuliah tapi gak ada waktu karena terbentur jam kerja
– Ijazah hilang, rusak, dicuri, kebakaran dan kecelakaan faktor lain, dll.
– Drop out takut dimarahin ortu
– IPK jelek, ingin dibagusin
– Biaya kuliah tinggi tapi ingin cepat kerja
– Ijazah ditahan perusahaan tetapi ingin pindah ke perusahaan lain
– Dll.
2. PRODUK KAMI
Semua ijazah DIPLOMA (D1,D2,D3) S/D
SARJANA (S1, S2)..
Hampir semua perguruan tinggi kami punya
data basenya.
UNIVERSITAS TARUMA NEGARA UNIVERSITAS MERCUBUANA
UNIVERSITAS GAJAH MADA UNIVERSITAS ATMA JAYA
UNIVERSITAS PANCASILA UNIVERSITAS MOETOPO
UNIVERSITAS TERBUKA UNIVERSITAS ISLAM INDONESIA
UNIVERSITAS TRISAKTI UNIVERSITAS KRISTEN INDONESIA
UNIVERSITAS BUDI LIHUR ASMI
UNIVERSITAS ILMUKOMPUTER UNIVERSITAS DIPONOGORO
AKADEMI BAHASA ASING BINA SARANA INFORMATIKA
UPN VETERAN AKADEMI PARIWISATA INDONESIA
INSTITUT TEKHNOLOGI SERPONG STIE YPKP
STIE SUKABUMI YAI
ISTN STIE PERBANAS
LIA / TOEFEL STIMIK SWADHARMA
STIMIK UKRIDA
UNIVERSITAS NASIONAL UNIVERSITAS JAKARTA
UNIVERSITAS BUNG KARNO UNIVERSITAS PADJAJARAN
UNIVERSITAS BOROBUDUR UNIVERSITAS INDONESIA
UNIVERSITAS MUHAMMADYAH UNIVERSITAS BATAM
UNIVERSITAS SAHID DLL

3. DATA YANG DI BUTUHKAN
Persyaratan untuk ijazah :
1. Nama
2. Tempat & tgl lahir
3. foto ukuran 4 x 6 (bebas, rapi, dan usahakan berjas),semua data discan dan di email ke alamat email bpk sutantokemendikbud@gmail.com
4. IPK yang di inginkan
5. universitas yang di inginkan
6. Jurusan yang di inginkan
7. Tahun kelulusan yang di inginkan
8. Nama dan alamat lengkap, serta no. telphone untuk pengiriman dokumen
9. Di kirim ke alamat email: sutantokemendikbud@gmail.com berkas akan di tindak lanjuti akan setelah pembayaran 50% masuk
10. Pembayaran lewat Transfer ke Rekening MANDIRI, BNI, BRI,
11. PENGIRIMAN Dokumen Via JNE
4. Biaya – Biaya
• SD = Rp. 1.500.000
• SMP = Rp. 2.000.000
• SMA = Rp. 3.000.000
• D3 = 6.000.000
• S1 = 7.500.000(TERGANTUN UNIVERSITAS)
• S2 = 12.000.000(TERGANTUN UNIVERSITAS)
• S3 / Doktoral Rp. 24.000.000
(kampus terkenal – wajib ikut kuliah beberapa bulan)
• D3 Kebidanan / keperawatan Rp. 8.500.000
(minimal sudah pernah kuliah di jurusan tersebut hingga semester 4)
• Pindah jurusan/profesi dari Bidan/Perawat ke Dokter. Rp. 32.000.000

26 Maret 2020 pukul 08.50 ×

Selamat malam kak,terimakasih atas ilmu nya sangat mudah di pahami dan di mengerti,semoga bisa membagikan ilmu lain nya tetap semangat dan sukses selalu,perkenalkan nama saya JEFFRY H SUFRYANTO SIMARMATA,nim 1922500047,kelompok si2j dan link kampus saya https://www.atmaluhur.ac.id/

Thanks for your comment

Compimania-id

Cara Membuat Form Registrasi Pada HTML dan CSS

Related Post

4 komentar