Skip to main content

HTML dan CSS - Membuat Form Pendaftaran Sederhana



Nah, Pada kesempatan kali ini saya akan mencoba membuat sebuah form pendaftaran sederhana menggunakan html dan css. pada artikel-artikel sebelumnya kita sudah membahs mengenai pengertian, sejarah dll tentang html dan css. nah sekarang kita coba untuk mempraktekannya.


Membuat Form Pendaftaran Sederhana

Untuk membuat form nya, pertama-tama kalian buka terlebih dahulu aplikasi code editor kalian. aplikasinya bebas mau sublime text, vs code, dan masih banyak lagi yang lainnya yang penting bisa untuk membuat html dan css. nah untuk langkah langkahnya, kalian bisa ikuti seperti yang saya contohkan di bawah ini.

Membuat file html

Dibawah ini merupakan file html yang kita gunakan untuk membuat form, silahkan kalian bisa mengikutinya.

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Form Pendaftaran</title>

</head>

<body> 

    <div id="login-box">

         <div class="left-box">

            <h1>Daftar</h1>

            <input type="text" name="username" placeholder="Nama Lengkap">

            <input type="text" name="email" placeholder="Email">

            <input type="alamat" name="alamat" placeholder="Alamat">

            <input type="text" name="sekolah" placeholder="Asal Sekolah">

            <input type="text" name="Jurusan" placeholder="Pilih Jurusan">

            <input type="text" name="Nomor" placeholder="Nomor HP/WhatApp">

            <input type="submit" name="singup-button" value="Daftar">

        </div>

        <div class="right-box">

            <span class="signinwith">Pendaftaran Mahasiswa Baru<br/>Kampus Apa Anane xxx</span> 

         </div>

    </div> 

</body>

</html>


Setelah selesai membuat htm-nya silahkan kalian save, dan jangan lupa file formatnya itu .html  . Nah untuk melihat hasilnya, silahkan kalian buka fili html yang sudah di simpan melalui browser. Dibawah ini adalah hasilnya


Membuat File CSS

Nah, setelah tadi membuat html sekarang kita lanjut untuk membuat css-nya. setelah kita membuat kerangka form pendaftarannya tadi di html, sekarang tinggal kita percantik tampilannya menggunakan css. untuk cssnya ada di bawah ini, silahkan kalian ikuti saja.

body{
    margin: 0;
    margin-top: 50px;
    padding: 0;
    background: #efefef;
    font-size: 16px;
    color: #777;
    font-family: sans-serif;
    font-weight: 300;
}
#login-box{
    position: relative;
    margin: 5% auto;
    height: 400px;
    width: 700px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0, 6);
}

.left-box{
    position:absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 40px;
    width: 300px;
    height: 1000px;
}

h1{
    margin: 0 0 20px 0;
    font-weight: 300;
    font-size: 28px;
}
input[type="text"],
input[type="alamat"]{
    display: block;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 4px;
    width: 220px;
    height: 32px;
    border: none;
    outline: none;
    border-bottom: 1px solid #aaa;
    font-family: sans-serif;
    font-weight: 15px;
    transition: 0,2s ease;
}
input[type="submit"]{
   
    margin-bottom: 28px;
    width: 120px;
    height: 32px;
    background: #f44336;
    border: none;
    border-radius: 2px;
    color: #fff;
    font-family: sans-serif;
    text-transform: uppercase;
    transition: 0,2s ease;
    cursor: pointer;
    position: absolute;
    left: 50%;
    margin-left: 150px;
    margin-top: 20px;
}

input[type="submit"]:hover,
input[type="submit"]:focus{
    background: #ff5722;
    transition: 0,2 ease;
}
.right-box{
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    padding: 40px;
    width: 400px;
    height: 400px;
    background-image: url(1.jpg);
    background-size: cover;
    background-position: center;
}
.right-box .signinwith{
    display: block;
    margin-bottom: 20px;
    font-size: 24px;
    font-family: 'Gill Sans MT';
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 3px #000000;
    text-align: center;
    position: absolute;
    left: 20%;
    margin-top: 120px;
}


Menghubungkan HTML dan CSS

Agar css dapat dibaca oleh html maka di perlukan sebuah kode untuk menghubungkannya. Untuk menghubungkan css dan html bisa menggunakan 

<link rel="stylesheet" type="text/css"  href="style.css">

code tersebut yang menghubungkan css ke html.


Setelah Semuanya selesai, sekarang tinggal kita buka file html yang sudah kita buat tadi. 
INGAT!!, File html dan css tadi yang kita buat harus berada di satu folder yang sama tidak boleh berbeda folder. Begitu pula ketika kita ingin menambahkan foto dll, foto tersebut harus berada di folder yang sama dengan html dan css. Nah hasil akhirnya adalah sebagai berikut.















Labels:
Location: Indonesia

Comments

Post a Comment

Artikel Populer

Percabangan IF Else Pada Bahasa C dan Contohnya

Assallammualaikum wr.wb Pada kesempatan kali ini kita akan belajar lagi masih seputar bahasa C yaitu Percabangan IF Else. Apa sih itu Percabangan IF Else? IF Else merupakan suatu percabangan, bisa juga di sebut pemilihan dalam program, dimana program tersebut memiliki satu atau bahkan lebih dari satu kondisi yang didalamnya ada sebuah intruksi yang dilaksanakan jika kondisi tertentu dapat terpenuhi. Dibawah ini merupakan Struktur dari IF Else if (condition) {   //Kode program yang akan dijalankan jika condition berisi nilai True (1) } else {   //Kode program yang akan dijalankan jika condition berisi nilai False (0) } Bagian condition berperan sebagai penentu dari struktur percabangan ini. Jika condition terpenuhi (menghasilkan nilai TRUE atau 1), blok kode program milik IF akan dijalankan. Jika condition tidak terpenuhi (menghasilkan nilai FALSE atau 0), blok kode program bagian ELSE-lah yang akan diproses.   Contoh Praktek IF Else - Menentukan Umur Program C #include...
2 comments
Read more »

Belajar HTML Dasar #6 - Membuat Tabel Pada HTML

Membuat Tabel Pada HTML Tabel merupakan struktur yang digunakan untuk nmenampilkan informasi dalam bentuk baris dan kolom. Pada html, untuk pembuatan tabel menggunakan tag <table> dan menggunakan tag <tr>   untuk membuat baris dan <td> untuk membuat kolom. Untuk lebih mudah dalam memahami pembuatan table pada html, berikut ini akan saya sajikan penjelasan tag yang terlibat dalam pembuatan table pada HTML. Tag <table> merupakan tag pembuka dalam pembuatan sebuah table pada html, tanpa tag <table>   ini, penggunaan <tr> dan <td> tidak bisa digunakan dengan baik. < tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam table html. <td> atau dikenak dengan tabel data merupakan tag yang digunakan untuk membuat kolom  dalam baris dan tag < th> untuk membuat tablehead atau bagian kepala pada table. Dibawah ini adalah contoh pembuatan table pada HTML berikut : <! DOCTYPE ht...
Post a Comment
Read more »

Program Menghitung Pendapatan Karyawan Perusahaan Cat

Assallammualaikum wr.wb Pada kesempatan kali ini kita akan membuat sebuah program lagi menngunakan bahasa c yaitu tentang menghitung pendapatan karyawan suatu perusahaan Cat. C ontoh persoalannya seperti dibawah ini. Suatu perusahaan cat memberikan komisi kepada para karyawannya dengan ketentuan sebagai berikut : Bila karyawannya bisa menjual cat hingga Rp. 200.000,akan diberikan uang jasa sebesar Rp. 20.000,- ditambah dengan uang komisi 10% dari pendapatan yang diperoleh hari itu. Bila karyawannya bisa menjual cat diatas Rp. 200.000,-akan diberikan uang jasa sebesar Rp. 50.000,- ditambah dengan uang komisi 15% dari pendapatan yang diperoleh hari itu. Bila karyawannya bisa menjual cat diatas Rp. 400.000,-akan diberikan uang jasa sebesar Rp. 75.000,- ditambah dengan uang komisi 15% dari pendapatan yang diperoleh hari itu. Buatl ah program if-else untuk menghitung pendapatan karyawan perusahaan tersebut? Program bahasa C #include <stdio.h> int main() {   ...
2 comments
Read more »

Belajar HTML Dasar #5 - Membuat Paragraf Pada HTML

Membuat Paragraf Pada HTML Untuk memahami pembuatan paragraf pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut. paragraf disini merupakan suatu tag untuk membuat penulisan dalam bentuk paragraf. tag paragraf ini terdapat 3 atribut/tag yang bisa dikombinasikan langsung dengan tag paragraf atribut tag tersebut yaitu : 1. Membuat paragraf rata kiri menggunakan <p align="left"> .................. </p> 2. Membuat paragraf rata kanan menggunakan  <p align="right"> .................. </p> 3. Membuat paragraf rata tengan menggunakan  <p align="center"> .................. </p> 4. Membuat paragraf rata kiri kana menggunakan  <p align="justify"> .................. </p> Paragraf menggunakan <p>. Berikut ini adalah implementasi dari <p>   dalam dokumen html : <! DOCTYPE html > < html > < head > < title >belajar membuat parag...
Post a Comment
Read more »