Tutorial


Pasti Anda sudah familiar dengan form login. Form ini biasanya meminta username dan password user sebelum masuk ke layanan online. Tampilan form login sendiri memang cukup sederhana. Tapi tahukah Anda  kalau form login juga bisa terlihat menjadi luar biasa?

Pada artikel ini, Anda akan mengetahui cara membuat form login dengan HTML dan CSS. HTML berfungsi untuk membuat halaman web dan struktur dari form login. Sedangkan CSS untuk mendesain tampilan form login.

Sudah tidak sabar untuk mengetahui cara membuat form login dengan HTML dan CSS? Mari simak penjelasan berikut.

Apa yang Perlu Anda Persiapkan?

Sebelum membuat form login keren dengan HTML dan CSS, ada dua hal yang perlu Anda persiapkan, yaitu:

  • Text Editor. Text editor adalah suatu software atau program komputer untuk menulis kode program. Gunakanlah text editor yang paling membuat Anda nyaman. Bisa Notepad++, Sublime Text, Visual Code Studio, dan lain-lain.
  • Browser. Browser berfungsi untuk melihat hasil form login yang sudah Anda buat. Anda bebas menggunakan browser terbaik seperti Chrome, Mozilla Firefox, atau pun browser lainnya.

Persiapan Cara Membuat Form Login yang Menarik dengan HTML dan CSS

Sebelum melakukan cara membuat form login yang menarik di HTML dan CSS, ada beberapa hal yang perlu Anda siapkan. Berikut rinciannya:

1. Buat Folder Khusus untuk Menyimpan File Form Login

Langkah pertama, yaitu membuat folder khusus. Ini akan menjadi wadah untuk menyimpan file HTML dan CSS form login.

Ingat, file HTML dan CSS harus berada dalam satu folder yang sama untuk memastikan keduanya dapat terhubung.

Membuat Folder Form Login

Sebagai catatan, jangan menggunakan spasi untuk memberi nama folder. Sebab, spasi memungkinkan terjadinya error. Alih-alih spasi, pakailah tanda penghubung seperti hyphen (-), underscore (_), dan lain-lain.

2. Buat File HTML dan CSS dengan Text Editor

Tahap berikutnya yaitu membuat file HTML dan CSS. Buka text editor, kemudian buatlah file HTML dan CSS. Untuk file HTML, beri nama index.html. Sedangkan untuk file CSS, namakan dengan style.css

Di sini, kami menggunakan text editor Notepad++.

Menyiapkan Text Editor

Cara Membuat Form Login yang Menarik dengan HTML

Setelah persiapannya lengkap, Anda bisa memulai cara membuat form login yang menarik di HTML. Kami akan menjelaskannya satu per satu dan secara detail, jadi Anda tidak perlu takut akan merasa kebingungan.

Yuk, kita mulai sekarang!

1. Deklarasikan Dokumen HTML Anda

Sekarang, buka file html form login Anda. Supaya form Anda nantinya dapat ditampilkan dengan benar, kita harus mendeklarasikannya terlebih dahulu.

Deklarasi ini akan memberitahu web browser bahwa Anda menuliskan instruksi dalam versi HTML. Penulisannya sendiri ditandai dengan adanya DOCTYPE atau Document Type Declaration (DTD) pada baris pertama text editor.

<!DOCTYPE HTML>
<html>
</html>

Setelah mendeklarasikan dokumen HTML, Anda bisa memulai proses pembuatan form dengan tag <html>.

2. Buat Kepala Halaman Form Login

Di dalam tag <html>, silakan masukkan tag <head>. Tag ini berfungsi untuk membuat kepala dokumen.

<!DOCTYPE HTML>
<html>
    <head>
    </head>
</html>

Tag head mengandung berbagai metadata atau informasi teknis terkait dokumen HTML yang dibuat. Contohnya seperti judul halaman, deskripsi halaman, sumber file eksternal, dan lain-lain.

3. Beri Judul Halaman Form Login

Seperti pembahasan pada poin sebelumnya, kita dapat mengisi metadata di dalam tag <head>. Salah satu komponennya yaitu judul. Untuk membuat judul halaman, kita menggunakan tag <title>.

<title>Masukkan Judul Halaman Form Login</title>

Syntax lengkapnya bisa Anda lihat di bawah ini.

<!DOCTYPE HTML>
<html>
    <head>
    <title>Halaman Login</title>
    </head>
</html>

Nantinya, Anda bisa melihat hasil jadinya pada judul tab web browser Anda. Mudah, bukan?

Membuat Title Form Login

3. Sisipkan File CSS

Cara membuat form login yang menarik dengan HTML berikutnya, yaitu menyisipkan file CSS. Masih di dalam tag <head>, sekarang kita akan menyelipkan file CSS ke dalam dokumen HTML. Lho, kenapa harus diselipkan?

Alasannya, file CSS berada terpisah dari dokumen HTML. Karena itu, dibutuhkan jembatan untuk menghubungkan kedua file ini. Jika tidak terhubung, browser akan gagal menyatukan desain dari file CSS.

Ingat, file CSS harus berada dalam folder yang sama dengan file HTML.

Nah, Anda bisa membuat jembatan ini dengan atribut link rel.

<link rel="stylesheet" href="https://www.niagahoster.co.id/Masukkan file CSS">

Style sheet dalam atribut link rel bermakna untuk memberitahu browser bahwa file eksternal yang disisipkan berjenis style sheet dengan ekstensi .css.

Secara lengkapnya, berikut script untuk menyisipkan file CSS ke dalam dokumen HTML.

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="https://www.niagahoster.co.id/style.css">
    </head>
</html>

Untuk pembahasan lengkap mengenai style sheet dan eksekusi hasilnya akan kami bahas pada bagian Cara Membuat Form Login yang Menarik dengan CSS.

4. Buat Badan Form Login

Seusai membuat kepala form login, tahap berikutnya yaitu membuat badan. Untuk itu, Anda membutuhkan tag <body>. Bisa dibilang, ini adalah wadah untuk meletakkan seluruh komponen inti form. 

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="https://www.niagahoster.co.id/style.css">
    </head>
   
    <body>
    </body>
</html>

Caranya, cukup letakkan tag <body> di bawah tag <head>. Jika sudah, berarti Anda siap untuk melangkah ke tahap berikutnya. 

5. Buat Layout Form Login

Membuat tag <body> saja belum cukup untuk membuat form login yang baik. Alasannya, kemungkinan besar dokumen tidak akan rapi. Karena itu, dibutuhkan layout atau wadah untuk membungkus organ-organ form Anda.

Baca juga:   25 Contoh Website Portofolio Desain Grafis Terbaik dan Tips Membuatnya

Cara membuat layout ini yaitu menggunakan elemen <div> dengan class = “container”. Tag ini  akan mengelompokkan atau menampung komponen tertentu ke dalam satu grup.

<div class="container">

Karena kita akan menggunakan elemen ini untuk membungkus isi form, masukkan syntax tadi di dalam tag <body>. Jangan lupa juga untuk tutup bungkusnya dengan tag </div>.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halaman Login</title>
        <link rel="stylesheet" href="https://www.niagahoster.co.id/style.css">
    </head>
   
    <body>
        <div class="container">
        </div>     
    </body>
</html>

Sebagai bocoran, fungsi dari elemen ini akan lebih terasa nanti ketika kita sudah bermain dengan CSS. Tapi sebelum sampai ke sana, kita fokus dulu untuk menyusun struktur form login keren Anda.

Nah, untuk seterusnya, kita akan membuat organ-organ form login keren di dalam tag <div> ini.

6. Beri Judul Form Login

Hal pertama yang paling penting dalam sebuah form login yaitu judul utama alias heading 1. Judul form ini berbeda dengan judul halaman yang sudah kita buat di awal tadi.

Judul halaman ibarat nama ruangan yang kita pakai untuk menyimpan dokumen kerja. Sedangkan judul form merupakan nama dokumen kerja yang berada di ruang penyimpanan tersebut.

Karena itu, heading 1 memuat topik utama atau informasi inti dari sebuah dokumen/konten. Heading text inilah yang digunakan mesin pencari untuk menilai performa SEO. 

Nah, supaya judul form login Anda dapat dikenali oleh mesin pencari, gunakanlah tag <h1>. Tag ini juga akan membuat judul terlihat lebih penting dan menonjol.

<h1> Masukkan Judul <h1>

Di sini, kami akan menamakan form ini sebagai ‘LOGIN’. Berikut syntax lengkapnya.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halaman Login</title>
        <link rel="stylesheet" href="https://www.niagahoster.co.id/style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
        </div>     
    </body>
</html>

Dengan syntax tersebut, Anda baru akan mendapat tampilan seperti ini.

Membuat Judul Form Login

Yap, masih polos sekali, bukan? Eits, sabar dulu, karena kita masih harus membuat beberapa organ lagi.

7.  Buat Kotak Form Login

Setelah memiliki judul, sekarang saatnya membuat kotak form login. Kita akan menggunakan tag <form>.

Mirip seperti tag <div>, tag <form> juga berfungsi untuk mengelompokkan elemen. Bedanya, tag <form> secara khusus menampung seluruh elemen yang berkaitan dengan sebuah form. Seperti kolom username dan password.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halaman Login</title>
        <link rel="stylesheet" href="https://www.niagahoster.co.id/style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
            <form>
            </form>
        </div>     
    </body>
</html>

Untuk langkah-langkah selanjutnya, kita akan membuat organ form login di dalam tag <form>.

8. Buat Kolom Username dan Password

Setidaknya, ada tiga tag yang digunakan untuk membuat kolom username dan password. Anda akan membutuhkan tag: <label>, <input type>, dan <br>. Kita akan membahasnya satu per satu.

Tag <label> berfungsi untuk memberi keterangan teks pada halaman form.

<label>Masukkan teks</label>
Membuat Kolom Username dan Password

Setelah label jadi, berikutnya membuat kolom input dengan tag <input type>.  Kolom input memungkinkan user memasukkan informasi yang diperlukan, seperti username dan password.

<input type="text">
Membuat Input Type Form Login

Nah bicara tentang tag <input type>, ada dua tipe yang akan kita gunakan pada form login. Pertama, type=text. Tipe ini akan menampilkan tulisan yang Anda ketikkan di dalam kolom. Kedua, type=password. Menggunakan tipe ini, teks isian akan ditampilkan dalam bentuk karakter khusus, seperti dots.

Membuat Input Type Username dan Password

Supaya syntax Anda lebih rapi, silakan bubuhkan tag <br> di akhiran setiap tag di atas. Tag <br> berfungsi sebagai break atau penanda baris baru.

Contoh script lengkap perpaduan seluruh tag ini dapat Anda lihat di bawah.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halaman Login</title>
        <link rel="stylesheet" href="https://www.niagahoster.co.id/style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
            <form>
                <label>Username</label><br>
                <input type="text"><br>
                <label>Password</label><br>
                <input type="password"><br>
            </form>
        </div>     
    </body>
</html>

Hasil jadinya dapat Anda lihat pada gambar berikut.

Membuat Break

9. Buat Tombol Form Login

Sampai sini, struktur form login keren Anda hampir selesai. Tinggal menambahkan satu komponen lagi, yaitu tombol. 

Cara membuat tombol pada dokumen HTML cukup mudah. Di dalam tag <form>, silakan berikan tag <button>.

<button>Masukkan Nama Tombol</button>

Keseluruhan syntax detailnya bisa Anda dapatkan di bawah ini.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halaman Login</title>
        <link rel="stylesheet" href="https://www.niagahoster.co.id/style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
            <form>
                <label>Username</label><br>
                <input type="text"><br>
                <label>Password</label><br>
                <input type="password"><br>
                <button>Log in</button>
            </form>
        </div>     
    </body>
</html>

Sekarang, struktur form Anda sudah jadi. Tampilannya seperti yang terlihat di sini.

Membuat Tombol Form Login

Cara membuat form login yang menarik dengan HTML sudah selesai Anda lakukan. Setelahnya, mari kita beranjak untuk mendesainnya dengan CSS supaya semakin terlihat menawan.

Cara Membuat Form Login yang Menarik dengan CSS

Sudah tidak sabar untuk mendesain form login Anda? Sekarang kita akan beralih dari HTML ke CSS.  Sedikit mengingatkan, CSS atau Cascading Style Sheets digunakan untuk mengatur tampilan yang ditulis dengan bahasa markup.

Berikut langkah demi langkah cara membuat form login yang menarik dengan CSS.

1. Desain Format Layout Form Login

Langkah awal, desain layout form. Di sini Anda bisa mengatur margin, padding, outline, serta jenis font yang ingin digunakan.

Jika bingung, mari melihat penjelasan tiap property tersebut di bawah ini.

  • Margin. Fungsinya untuk mengatur tepi garis luar. Berdasarkan posisinya, ada empat jenis margin: margin-top, margin-right, margin-bottom, margin-left;
  • Padding. Artinya jarak dalam di antara konten dengan bingkai;
  • Outline.  Berfungsi sebagai garis bingkai form;
  • Font-family. Berperan untuk mengatur jenis font sesuai dengan yang Anda inginkan.
Baca juga:   Yovi Amanda, Author at Niagahoster Blog

Penerapan keempat property di atas dapat Anda temukan di bawah ini. Anda bisa mengubah-ubah ukuran maupun jenis font ini sesuai kebutuhan.

*{
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: 'Open Sans', sans-serif;
}

Eksekusinya seperti yang terlihat di bawah ini. Sudah mulai terlihat sedikit perbedaannya dengan sebelum diatur format dan spasinya, bukan?

Mengatur Format Layout Form Login

2. Berikan Background pada Form Login

Lanjut ke cara membuat form login keren berikutnya, yaitu memberi background. Silakan gunakan property <body>. Di dalam property ini, terdapat beberapa atribut:

  • Height. Fungsinya untuk mengatur ketinggian objek. Height: 100vh berarti tinggi objek sama dengan 100% tinggi layar tab;
  • Background-image. Berperan untuk memasukkan alamat penyimpanan gambar latar belakang berupa link;
  • Background-size. Berfungsi untuk mengatur ukuran gambar latar belakang. Ada tiga tipe ukuran yang bisa digunakan: auto, cover, dan contain;
  • Background-position. Fungsinya menetapkan posisi awal gambar latar belakang. Banyak opsi untuk ini, yaitu: left-top, left-center, left-bottom, right-top, right-center, right-bottom, center-top, center, dan center-bottom;
  • Background repeat. Ada kalanya dimensi gambar yang dipilih terlalu kecil atau memiliki pattern berulang sehingga membutuhkan perulangan supaya background terisi penuh. Karena itu, ada dua value yang bisa Anda gunakan: repeat dan no-repeat.

Penggunaan kelima atribut di atas pada form login keren ini bisa Anda temukan pada syntax berikut.

body{
    height: 100vh;
    background-image: url (Masukkan link);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Dengan syntax tersebut, maka hasil yang Anda dapatkan kira-kira seperti ini. Sudah sedikit lebih menarik, bukan?

Membuat Background Form Login

3. Desain Kotak Form Login

Beranjak dari background, kini saatnya kita mendesain kotak form. Nah, seperti sudah yang kami janjikan pada bagian Cara Membuat Form Login yang Menarik dengan HTML, fungsi container akan cukup terasa di sini.

Di awal, kita sudah menggunakan div class=”container”. Dengan begitu, komponen yang berada dalam wadah tersebut mengelompok menjadi beberapa bagian sesuai dengan tagnya: kotak form, judul form, kolom username dan password, serta tombol form.

Sebagai awalan, kita akan mendesain kotak form terlebih dahulu. Ada beberapa property yang kita gunakan:

  • Position, untuk mengatur penempatan objek dalam halaman website. Ada lima macam posisi: static, relative, fixed, absolute, dan sticky;
  • Left, yaitu penempatan objek mulai dari jarak tepi kiri layar;
  • Top, merupakan penempatan objek mulai dari tepi atas layar;
  • Transform, memungkinkan kita membuat efek rotasi dan animasi pada suatu objek. Terdapat beberapa jenis gaya: translate, scale, skew, rotate, dan matrix;
  • Padding, mengatur spasi atau jarak di dalam konten dengan satuan pixel;
  • Width, mengatur lebar objek dalam satuan pixel;
  • Background-color, mendesain pewarnaan pada bagian latar belakang objek;
  • Box-shadow, fungsinya membuat bayangan pada objek.

Berikut syntax lengkap untuk mendesain kotak form login keren:

.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 20px 25px;
    width: 300px;

    background-color: rgba(0,0,0,.7);
    box-shadow: 0 0 10px rgba(255,255,255,.3);}

Dari script di atas, kotak form login Anda akan berubah menjadi seperti ini.

Mendesain Kotak Form Login

Sekarang, Anda sudah memiliki kotak form dengan warna yang agak transparan. Berbeda dengan sebelumnya, di mana kotak form Anda belum terlihat dan tulisannya nampak masih menyatu dengan gambar latar belakang.

4. Desain Judul Form Login

Masih menggunakan class .container, sekarang kita akan mendesain judul form login atau H1. Dibandingkan dengan kotak form login, property dalam menghias judul form lebih sederhana, yaitu:

  • Text-align, yaitu untuk memposisikan teks. Ada beberapa posisi yang bisa Anda pilih: right, left, center, dan justify;
  • Color, untuk mengatur warna teks. Silakan mengecek kode warna yang Anda inginkan di sini → Daftar Kode Warna pada HTML dan CSS;
  • Margin-bottom, memberikan jarak dalam bagian bawah dalam satuan pixel;
  • Text-transform, berperan untuk memodifikasi format teks. Ada tiga gaya yang bisa Anda pilih: uppercase, lowercase, dan capitalize;
  • Border-bottom, fungsinya memberikan garis bingkai pada bagian bawah teks. Anda juga bisa memodifikasi warnanya.

Untuk syntax desain judul form seperti yang terlihat di bawah ini.

.container h1{
    text-align: left;
    color: #fafafa;
    margin-bottom: 30px;
    text-transform: uppercase;
    border-bottom: 4px solid #2979ff;
}

Sekarang, form login Anda sudah semakin cantik. Namun, ini belum sempurna. Mari melangkah ke tahap berikutnya.

Mendesain Judul Form Login

5. Desain Kolom Username dan Password

Di sini, kita akan mendesain dua jenis komponen: label teks dan kolom input. Karena itu, tahapan ini dibagi menjadi dua:

5.1. Mendesain Label Teks

Pertama, kita akan mempercantik label teks terlebih dahulu. Hanya membutuhkan dua property untuk mendesain label teks:

  • Text-align, untuk mengatur posisi teks. Silakan pilih salah satu di antara: left, right, center, atau justify;
  • Color, fungsinya mengubah warna teks.

Syntax desain label teks cukup sederhana, seperti yang terlihat di bawah ini.

.container label{
    text-align: left;
    color: #90caf9;

Nah, sekarang form Anda sudah lebih cantik. Warna label teks berubah sesuai yang Anda inginkan.

Mendesain Kolom Username dan Password

5.2. Mendesain Kolom Input

Sekarang, kita bergerak ke bawah label teks, yaitu kolom input. Beberapa komponen yang diperlukan sudah kita pelajari pada tahap sebelumnya, sehingga Anda hanya perlu mengulang saja.

  • Width, untuk mengatur lebar objek;
  • Padding, mengatur jarak dalam objek;
  • Margin-bottom, mengatur jarak objek dari garis tepi bagian bawah;
  • Border, fungsinya memberikan bingkai pada objek;
  • Background-color, untuk memodifikasi warna objek;
  • Border-bottom; memberikan bingkai bawah serta modifikasi warnanya;
  • Color, mengatur warna teks pada objek;
  • Font-size, mengubah jenis font di dalam objek.
Baca juga:   Cara Memasukkan Gambar di HTML & Mengaturnya Agar Estetis

Nah, berikut syntax untuk mendesain kolom input form login keren.

.container form input{
    width: calc(100% - 20px);
    padding: 8px 10px;
    margin-bottom: 15px;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid #2979ff;
    color: #fff;
    font-size: 20px;
}

Syntax tersebut akan menghasilkan tampilan yang hampir lengkap. Namun, tombol form di sana masih terlihat sangat polos. Nah, kita akan memperbaikinya pada tahap selanjutnya.

Mendesain Kolom Input Form Login

6. Desain Tombol Form Login

Sebentar lagi, cara membuat form login yang menarik dengan CSS Anda akan selesai. Tinggal satu komponen lagi yang perlu Anda hias, yaitu tombol form.

Untuk mendesain tombol form, kita membutuhkan property yang sudah tidak asing ini:

  • Width, fungsinya mengatur lebar objek;
  • Padding, untuk memodifikasi jarak dalam objek;
  • Border, memberikan bingkai pada objek;
  • Background-color, mengatur warna gambar latar belakang pada objek;
  • Font-size, untuk mengatur ukuran font pada objek;
  • Color, berfungsi untuk mendesain warna objek.

Nah, syntax yang bisa Anda gunakan untuk membuat tombol form login keren yaitu sebagai berikut.

.container form button{
    width: 100%;
    padding: 5px 0;
    border: none;
    background-color:#2979ff;
    font-size: 18px;
    color: #fafafa;
}

Eksekusinya sudah cukup terlihat. Tombol form sudah jauh lebih cantik daripada sebelum-sebelumnya.

Mendesain Tombol Form Login

Syntax Lengkap Cara Membuat Form Login yang Menarik di HTML dan CSS

Sampai sini, Anda sudah memahami berbagai tag yang dibutuhkan untuk cara membuat form login yang menarik dengan HTML dan CSS. Untuk memudahkan Anda, kami juga sudah menyertakan syntax lengkap sehingga Anda bisa tinggal menyalinnya.

Syntax Lengkap Cara Membuat Form Login yang Menarik di HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halaman Login</title>
        <link rel="stylesheet" href="https://www.niagahoster.co.id/style.css">
    </head>
   
    <body>
        <div class="container">
          <h1>Login</h1>
            <form>
                <label>Username</label><br>
                <input type="text"><br>
                <label>Password</label><br>
                <input type="password"><br>
                <button>Log in</button>
            </form>
        </div>     
    </body>
</html>

Syntax Lengkap Cara Membuat Form Login yang Menarik di CSS

*{
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: 'Open Sans', sans-serif;
}
body{
    height: 100vh;
    background-image: url(https://bit.ly/2FPT1J9);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 20px 25px;
    width: 300px;

    background-color: rgba(0,0,0,.7);
    box-shadow: 0 0 10px rgba(255,255,255,.3);
}
.container h1{
    text-align: left;
    color: #fafafa;
    margin-bottom: 30px;
    text-transform: uppercase;
    border-bottom: 4px solid #2979ff;
}
.container label{
    text-align: left;
    color: #90caf9;
}
.container form input{
    width: calc(100% - 20px);
    padding: 8px 10px;
    margin-bottom: 15px;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid #2979ff;
    color: #fff;
    font-size: 20px;
}
.container form button{
    width: 100%;
    padding: 5px 0;
    border: none;
    background-color:#2979ff;
    font-size: 18px;
    color: #fafafa;
}

Cara Menjalankan Form Login

Setelah cara membuat form login yang menarik dengan HTML dan CSS selesai, Anda bisa menikmati hasilnya. Berikut cara menjalankannya.

1. Buka Form Login dengan Browser

Sekarang, saatnya untuk melihat form login keren yang sudah Anda buat. Caranya, cukup buka file index.html menggunakan browser kesayangan Anda. Setelah itu, akan terlihat tampilan seperti ini.

Membuka Form Login

Jika Anda melakukan perubahan pada script HTML dan CSS, jangan lupa untuk menyimpannya terlebih dahulu. Untuk melihat hasilnya lagi, cukup reload browser yang membuka halaman form Anda.

2. Online-kan Project Anda

Meski sudah jadi, form login keren Anda masih hanya berada dalam direktori komputer. Karena itu, perlu untuk mengunggahnya secara online agar form tersebut dapat terlihat di website Anda.

Ada tiga cara upload file HTML ke WordPress:

  • Membuat template WordPress secara manual berdasarkan website HTML statis.
  • Menginstall tema setengah jadi dan memigrasikan konten.
  • Membayar pengembang untuk convert HTML ke WordPress

Namun, untuk melakukan cara-cara di atas, Anda harus menggunakan web hosting. Web hosting merupakan layanan untuk mengonlinekan project Anda sehingga orang-orang bisa mengaksesnya.

Nah, salah satu web hosting terbaik yang bisa Anda coba yaitu Niagahoster. Dengan fitur kecepatan, jaminan keamanan, dan berbagai manfaat lainnya, Anda bisa menemukan hosting yang sesuai kebutuhan. Baik dari tingkat pemula hingga level perusahaan. Menarik, bukan?

Penutup

Sekarang, Anda sudah mengetahui cara membuat form login yang menarik dengan HTML dan CSS. Dengan langkah yang sederhana, Anda sudah bisa memiliki form login yang menarik dan keren.

Namun, itu hanya satu contoh dari banyak cara untuk menggunakan HTML dan CSS, lho. Jika mempelajarinya lebih dalam, maka akan ada lebih banyak hal yang bisa Anda kreasikan.

Nah, untuk mendukung kemampuan Anda, silakan pelajari HTML di sini → Belajar HTML Lengkap untuk Pemula. Jangan lupa untuk mempelajari CSS juga agar ilmu Anda semakin lengkap, ya!



Source link

Author

admin

Leave a comment

Your email address will not be published.

WeCreativez WhatsApp Support
Tim support kami di sini untuk menjawab pertanyaanmu. Tanyakan apa saja pada kami!
? Halo... ada yg bisa kami bantu?
%d bloggers like this: