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

Apa Itu Query SQL

  Assallammualaikum wr.wb Halo teman-teman, pada kesempatan kali ini kita akan membahas secara lengkap mengenai apa sih itu yang namanya query sql?.  Jika teman-teman baru saja memulai belajar mengenai database atau baru belajar mysql database, pasti tidak asing dengan yang namanya query ini. Belajar quey mysql adalah hal yang paling dasar dan penting bagi seseorang pemula sebelum belajar lebih jauh lagi. Apa itu Query? Query sendiri merupakan sebuah perintah ataupun syntax yang biasanya digunakan untuk mengelola sebuah database atau tabel di dalam sebuah database MySql. Query lebih di kenal dengan nama SQL (Structured Query Language) yang memiliki arti sebuah bahasa yang digunakan untuk mengakses data dalam basis data rasional. Bahasa query yang paling populer dikalangan database administrator pada saat ini adalah SQL.  SQL  (Structured Query Language) memiliki tiga jenis Query yaitu : 1. DDL (Data Definition Language) DDL merupakan perintah sql yang digunakan untuk...
2 comments
Read more »