Cara membuat form registrasi menggunakan HTML Dan CSS

Selasa, 21 September 2021

Pict B1X

Templat formulir registrasi merupakan bagian berarti untuk web website mana juga buat berkembang di dunia online ini serta hari ini kita hendak buatnya memakai Html serta Css. Terakhir kali kami membuat desain formulir Registrasi. Hari ini motif utama kami merupakan membuat formulir registrasi memakai Html serta css dengan kode sumber. Jadi, ayo kita mengadakan.

Formulir buat pendaftaran

Formulir registrasi digunakan buat membuat akun pengguna di web website. Pengguna mendatangi web website buat bermacam tujuan. Web website bisa menjual kursus, produk, tema, plugin serta ebook dll. Buat itu, mereka wajib mengumpulkan data dari pengguna sehingga web website bisa mengirimkan produknya kepada penggunanya tanpa mengalami kesalahan apa juga. Bila pengguna tidak hendak membuat akun di web website tanpa mengisi seluruh bidang ini, hingga web website tidak hendak bisa membagikan layanannya kepada penggunanya.

Formulir Html ini mengumpulkan banyak data dari penggunanya sehingga tidak boleh terdapat mungkin kesalahan dalam sediakan layanan mereka. Formulir ini terbuat memakai Html serta Css serta ialah formulir responsif dengan kode sumber.

Kami sudah membuat latar balik yang indah yang nampak luar biasa serta serasi dengan warna formulir. Setelah itu mempunyai sebagian bidang serta foto.

Nama depan
Nama belakang
Email
Password
Confirm password
Check box untuk menerima privacy dan cookies website
Tombol registrasi sekarang
Password File SC = B1X;

Bidang terdapat di sisi kiri serta foto terdapat di sisi kanan kotak. Ini mempunyai bacaan di bagian atas" Formulir registrasi" setelah itu mempunyai sebagian bidang.

Seluruh perihal ini muncul di situ buat mengumpulkan data. Kala Kamu mulai memasukkan data Kamu di bidang. Setelah itu bidang berganti jadi bidang yang indah buat memasukkan informasi. Setelah itu mempunyai foto di sisi kanan yang nampak luar biasa. Foto ini berhubungan dengan tipe web. Ini menampilkan jenis web website.

Bagaimana cara membuat form registrasi responsive?

Kita lumayan buatnya dengan cuma memakai 3 bahasa serta sangat gampang buat membuat formulir registrasi ini. Kamu cuma butuh mendownload editor kode semacam vs code ataupun sublime dll. Setelah itu buka serta buat 3 file Html serta css dengan ekstensi. html, serta. css ekstensi ini dibutuhkan buat membuat file Kamu.

Source Code HTML

Buat file HTML kemudian simpan. Salin kode HTML di dasar ini serta tempel ke file Kamu. Html digunakan buat membuat bidang serta meningkatkan foto. Namun dengan itu, kami tidak bisa mendesain formulir registrasi ini.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Form Registrasi by B1Xploit </title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">  <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper" style="background-image: url('bg-registration-form-2.jpg');"> <div class="inner"> <form action=""> <h3>Registration Form</h3> <div class="form-group"> <div class="form-wrapper"> <label for="">First Name</label> <input type="text" class="form-control"> </div> <div class="form-wrapper"> <label for="">Last Name</label> <input type="text" class="form-control"> </div> </div> <div class="form-wrapper"> <label for="">Email</label> <input type="text" class="form-control"> </div> <div class="form-wrapper"> <label for="">Password</label> <input type="password" class="form-control"> </div> <div class="form-wrapper"> <label for="">Confirm Password</label> <input type="password" class="form-control"> </div> <div class="checkbox"> <label> <input type="checkbox"> I caccept the Terms of Use & Privacy Policy. <span class="checkmark"></span> </label> </div> <button>Register Now</button> </form> </div> </div> </body> </html>

Source Code CSS

Sekali lagi buat file CSS serta simpan di folder. CSS merupakan bahasa markup serta kami sudah memakainya buat mendesain formulir registrasi kami sebab tanpa CSS kami tidak bisa mendesain formulir kami. Saat ini responsif di seluruh fitur. Salin kode di dasar ini serta rekatkan ke file Kamu.

Oleh sebab itu, dengan mempraktikkan seluruh langkah ini Kamu bisa dengan gampang membuat formulir registrasi buat web website Kamu.

@font-face { font-family: "Muli-Regular"; src: url("../fonts/muli/Muli-Regular.ttf"); } @font-face { font-family: "Muli-SemiBold"; src: url("../fonts/muli/Muli-SemiBold.ttf"); } @font-face { font-family: "Muli-Bold"; src: url("../fonts/muli/Muli-Bold.ttf"); } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: "Muli-Regular"; color: #666; font-size: 13px; margin: 0; } input, textarea, select, button { font-family: "Muli-Regular"; color: #333; font-size: 13px; } p, h1, h2, h3, h4, h5, h6, ul { margin: 0; } img { max-width: 100%; } ul { padding-left: 0; margin-bottom: 0; } a:hover { text-decoration: none; } :focus { outline: none; } .wrapper { min-height: 100vh; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center; } .inner { min-width: 850px; margin: auto; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); padding-top: 68px; padding-bottom: 48px; background: url("registration-form-2.jpg"); opacity: 9; } .inner h3 { text-transform: uppercase; font-size: 22px; font-family: "Muli-Bold"; text-align: center; margin-bottom: 32px; color: #333; letter-spacing: 2px; } form { width: 50%; padding-left: 45px; } .form-group { display: flex; } .form-group .form-wrapper { width: 50%; } .form-group .form-wrapper:first-child { margin-right: 20px; } .form-wrapper { margin-bottom: 17px; } .form-wrapper label { margin-bottom: 9px; display: block; } .form-control { border: 1px solid #ccc; display: block; width: 100%; height: 40px; padding: 0 20px; border-radius: 20px; font-family: "Muli-Bold"; background: none; } .form-control:focus { border: 1.5px solid #3575D3 ; } select { -moz-appearance: none; -webkit-appearance: none; cursor: pointer; padding-left: 20px; } select option[value=""][disabled] { display: none; } button { border: none; width: 152px; height: 40px; margin: auto; margin-top: 29px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; background: #3575D3 ; font-size: 13px; color: #fff; text-transform: uppercase; font-family: "Muli-SemiBold"; border-radius: 20px; overflow: hidden; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } button:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #262626 ; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } button:hover:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .checkbox { position: relative; } .checkbox label { padding-left: 22px; cursor: pointer; } .checkbox input { position: absolute; opacity: 0; cursor: pointer; } .checkbox input:checked ~ .checkmark:after { display: block; } .checkmark { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 12px; width: 13px; border-radius: 2px; background-color: #ebebeb; border: 1px solid #ccc; font-family: Material-Design-Iconic-Font; color: #000; font-size: 10px; font-weight: bolder; } .checkmark:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; content: '\f26b'; } @media (max-width: 991px) { .inner { min-width: 768px; } } @media (max-width: 767px) { .inner { min-width: auto; background: none; padding-top: 0; padding-bottom: 0; } form { width: 100%; padding-right: 15px; padding-left: 15px; } }

Bila Kamu masih tidak bisa buatnya memakai baris kode di atas. Jangan takut kami memiliki pemecahan buat permasalahan ini buat Kamu. Download file di dasar ini serta simpan ke pc Kamu. Setelah itu ekstrak file- nya serta jalankan file tersebut. Kamu hendak dapat memperoleh output Kamu di browser Kamu.

Bila Kamu suka hingga wajib menjajaki serta berpendapat di dasar ini.

Terima kasih sudah membaca postingan ini.

Download Source Code

B1XPLOIT File Size 78kb

Jika tidak terdownload otomatis silahkan klik Download Ulang. Dan jika link rusak silahkan lapor melalui halaman Contact Us.

Cara membuat form registrasi menggunakan HTML Dan CSS

B1XPLOIT Selasa, 21 September 2021 edit Tags: Programming