Beranda
Postingan

Membuat Form Pendaftaran Menggunakan HTML & CSS

 

Membuat Form Pendaftaran Menggunakan HTML & CSS

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 formnya, 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, temen-temen bisa mengikutinya seperti yang saya contohkan di bawah ini.

1. Membuat file html

Pertama-tama yang harus kita lakukan adalah membuat file html-nya terlebih dahulu. Dibawah ini merupakan file html yang akan kita gunakan untuk membuat form-nya, silahkan temen-temen bisa mengikutinya.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Form Pendaftaran</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</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 Form Pendaftaran Menggunakan HTML & CSS

2. 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 temen-temen bisa mengikutinya.

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: #bd2c00;
    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(bg.jpg);
    background-size: cover;
    background-position: center;
}
.right-box .signinwith{
    display: block;
    margin-bottom: 20px;
    font-size: 25px;
    font-family: 'Gill Sans MT';
    color: rgb(255, 255, 255);
    text-shadow: 4px 4px 3px #000000;
    text-align: center;
    position: absolute;
    left: 20%;
    margin-top: 120px;
}

Setelah selesai membuat htm-nya silahkan kalian save, dan jangan lupa file formatnya itu .css 

3. Menghubungkan HTML dan CSS

Agar css dapat dibaca oleh html maka di perlukan sebuah code untuk menghubungkannya. Untuk menghubungkan css dan html bisa menggunakan code seperti dibawah ini  :

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

code tersebut dituliskan pada file html yang letaknya di bawah tag title.

4. 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.

Membuat Form Pendaftaran Menggunakan HTML & CSS

Mungkin cukup sampai disini dulu mengenai pembelajaram membuat form pendaftaran menggunakan html & css, untuk selanjutnya kita akan belajar lebih lanjut mengenai html & css ini. Semoga sampai disini teman-teman bisa mengikutinya dengan baik ya, kalo ada yang mau ditanyakan bisa tinggalkan komentar di bawah ini iya teman-teman nanti akan saya jawab satu-satu ko pertanyannya.

Kalo ada yang bgg lagii, Bisa tonton vido tutorialnya ada di youtube iyaa. Linknya ada di bawah Ini :

(Link sedang dalam proses pembuatan)


Sekian dan terimakasih...

Posting Komentar