Skip to main content

MEMBUAT FORM REGISTRASI SEDERHANA MENGGUNAKAN HTML DAN CSS

          

          Mungkin dari anda yang lagi belajar tentang bahasa pemrograman komputer pasti pernah bertanya tentang cara pembuatan form registrasi pada sebuah website?.Pada topik pembahasan saat ini yaitu mengenai tentang cara membuat Form Registrasi sederhana menggunakan HTML dan CSS.Bagi anda yang sedang belajar tentang bahasa pemrograman komputer,langkah pertama yang harus anda lakukan adalah anda harus memiliki sebuah software text editor dikomputer anda guna menjalankan perintah dari program atau code yang anda buat.

            Ada berbagai macam jenis software text editor yang dapat anda gunakan untuk mejalankan sebuah program.Adapun jenis software tersebut seperti Notepad,Notepad++,Atom,Subleme Text,Vs.code dan yang lain-lain.Pada umumnya Software seperti Notepad sudah terinstall langsung disetiap perangkat komputer,dan anda tidak perlu mendownload nya.Anda bisa saja menggunakan Notepad dalam menjalankan Codingan ini.Akan tetapi saya merekomendasikan software Vs.code,karena memilki fitur dan keunggulan dibandingkan Software text editor yang lainnya.
            
            Dalam menjalankan program atau codingan pada topik kali ini saya menggunakan Software Text Editor Vs.code.Jika anda ingin menggunakan nya dan belum memilki nya,anda bisa mendownload nya dilaman situs website resminya https://code.visualstudio.com/download.Berikut tampilan software Vs.code ketika berhasil anda install dan dibuka.





















            Setelah anda buka Software Vs.code,kemudian buka Text File yang baru.Pilih language atau bahasa yang ingin anda gunakan.Selanjutnya tuliskan program atau code berikut ini.

Berikut Untuk Code HTML nya:

<html>
    <head>
            <title>
                Sign Up Form
            </title>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
            <div class="form-wrapper">
            <form>
    
            <h1>
                Sign Up 
            </h1>
            <input type="text" name="Name" placeholder="Name">
            <input type="text" name="UName" placeholder="UserName">
            <input type="email" name="email" placeholder="Email">
            <input type="Password" name="pass" placeholder="Password">
            <input type="Password" name="pass" placeholder=" Confirm Password">
            <input type="button" name="btn" value="Sign Up">
            
            </form>
        </div>
        </body>
        </html>


Berikut Untuk Code CSS nya:

*{
margin: 0px;
padding: 0px;
}

body{
background: white;
font-family: verdana;

}
.form-wrapper{
width:350px;
background: #545454;
padding: 40px 20px;
box-sizing: border-box;
position: fixed;
left: 50%;
top:50%;
transform: translate(-50%, -50%);

}


h1{
text-align: center;
color: white;
font-weight: normal;
margin-bottom: 20px;
}

input{
width: 100%;
background: none;
border: 1px solid white;
border-radius: 3px;
padding: 6px 15px ;
box-sizing: border-box;
margin-bottom: 20px;
font-size: 15px;
color:white;
}

input[ type="button"]{
background: #ffde59;
border: 0px;
cursor: pointer;
}

    
             Langkah selanjutnya silahkan anda save atau simpan codingan tersebut di dalam folder penyimpanan yang anda inginkan.Kemudian anda dapat menjalankan(RUN) codingan tersebut,maka hasilnya akan tampak seperti gambar atau tampilan berikut ini.






















SELAMAT MENCOBA!!!😇






Labels:

Comments

Post a Comment

Popular posts from this blog

Penyakit Jantung Pada Umumnya Dan Gejala Rematik Jantung

                          Kalau sifat yang benar dari salah satu diantara penyakit jantung umumnya sudah diketahui,biasanya dengan gampang dapat dilihat bahwa penyakit itu termasuk kedalam salah satu daripada lima golongan berikut; Pertama, rematik jantung. Kedua penyakit jantung peredaran darah,karena pembuluh-pembuluh nadi yang rusak atau tekanan darah tinggi. Ketiga  penyakit jantung sifilis. Keempat penyakit jantung bawaan. Kelima  penyakit jantung mengenai fungsi-fungsi,atau hal-hal dimana ada gangguan-gangguan yang menyusahkan didalam tugas jantung,meskipun biasanya tidak ada apa-apa yang salah dengan jaringan-jaringan anggota kecuali barangkali dengan berbagai jaringan saraf yang membantu dalam pengendalian gerakan jantung itu.               Tetapi golongan penyakit jantung yang manapun dia,kesusahan itu adalah biasanya melebihi kesanggupan diri si pender...
Post a Comment
Read more

Pentingnya Pemanasan Sebelum Melakukan Kegiatan Olahraga

        Kegiatan pemanasan sebelum melakukan kegiatan olahraga merupakan kegiatan yang sangat penting.Pemanasan yang kurang baik akan selalu mengundang resiko cedera baik yang bersifat ringan atau yang kronis oleh sebab itu pemanasan ini harus dilakukan secara baik dan tepat           Pemanasan yang tepat dan benar dapat memiliki keuntungan sebagai berikut: 1. menaikan suhu tubu secara perlahan 2. mengurangi resiko cedera 3. menstabilkan pernapasan dan detak jantung 4. mempersiapkan diri untuk melakukan aktivitas yang lebih berat                      Disamping itu tujuan pemanasan adalah mengulur,meregangkan,memanaskan dan mempersiapkan sekelompok otot yang akan digunakan pada olahraga inti yang akan dilakukan setelah selesai melakukan pemanasan.            kegiatan pemanasan dapat dilakukan dengan penguluran(stretching/pasif/statis...
Post a Comment
Read more

PENYAKIT DEGENERASI BUAH PINGGANG

                           Penyakit yang dinamai Degenerasi buah pinggang mungkin sekali disebabkan oleh keadaan dimana bangunan buah pinggang itu sendiri tersangkut dengan langsung atau oleh persediaan darah yang kurang kepada buah pinggang itu,sedangkan yang belakangan ini adalah biasanya disebabkan oleh pembuluh nadi yang mengeras (atteriosclerosis).Anggota-anggota tubuh biasanya mempunyai banyak tenaga cadangan dan penjagaan keselamatan yang agak luas,sehingga penyakit yang menimbulkan degenerasi itu sudah agak berjalan jauh sebelum ia menjadi nyata.Oleh sebab itu ,pada umumnya orang-orang yang sudah mencapai setengah umur dan orang-orang yang sudah lanjut usia yang mempunyai penyakit yang demikian dalam rupa yang nyata.               Satu pengertian tentang pekerjaan yang biasa dari buah pinggang akan menolong kita mengetahui beberapa diantara gejala-gejala,tanda-...
Post a Comment
Read more