Cara Membuat Form Pendaftaran Dengan HTML

Himang
March 24, 2022
0 Comments
Home
CSS
HTML
Pemrograman Web
Cara Membuat Form Pendaftaran Dengan HTML

Himang.my.id - hallo teman-teman kembali lagi ni dengan saya diblog himang.my.id, kali ini saya ingin berbagi sedikit tentang Cara Membuat Form Pendaftaran Dengan HTML.

Cara Membuat Form Pendaftaran Dengan HTML

Sebuah website dibangun bukan hanya digunakan untuk memberikan informasi kepada para user atau pengguna. 

Tapi, website juga bisa digunakan untuk mendapatkan informasi seperti data diri dari pengunjung website. Bagaimana caranya? Ya tentu dengan menggunakan form.


Cara Membuat Form Pendaftaran dengan HTML

Untuk membuat form pendaftaran yang sederhana di HTML sangatlah mudah. Ada dua cara yang bisa Anda gunakan, yaitu bisa dengan menggunakan tabel dan juga bisa menggunakan div. 

Tapi, pada artikel kali ini kita akan membahas bagaimana cara membuat form pendaftaran yang sederhana yaitu dengan menggunakan tabel. Langsung saja, silakan simak langkah-langkahnya di bawah ini

Pertama copy semua kode form HTML dibawah ini  pastekan semua kode di notepad / sublime text anda.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Mendaftar</title>
</head>
<body>
    <div class="wrapper">
        <h2>Pendaftaran</h2>
        <form action="#">
          <div class="input-box">
            <input type="text" name="nama" placeholder="Masukan Nama Anda..." required>
          </div>
          <div class="input-box">
            <input type="email" name="email" placeholder="Masukan Email Anda..." required>
          </div>
          <div class="input-box">
            <input type="password" placeholder="Buat Kata Sandi..." required>
          </div>
          <div class="input-box">
            <input type="password" placeholder="Buat Kata Sandi..." required>
          </div>

          <div class="input-box button">
            <input type="Submit" value="Mendaftar">
          </div>
        </form>
      </div>
</body>
</html>
Nah setelah kode diatas di copy teman teman juga perlu tau atau perlu diperhatikan saat menggunakan form pendaftaran yang saya kasih.

Hal yang perlu Anda perhatikan saat membuat form pendaftaran:

  • Semua kolom input gunakan tag <input>
  • Untuk Nama  gunakan type=”text”
  • Email gunakan type=”email”
  • Untuk tombol simpan gunakan type=”submit” dan batal gunakna type=“reset”.
Setelah mengetahui yang diatas silahkan copy kode css dibawah ini agar tampilan form pendaftaran html menjadi lebih menarik, caranya buat new file pastekan kode ini di new file.

Sesudah itu save filenya dengan nama style.css agar cssnya terhubung dengan html yang diatas dan pastikan kode form pendaftaran html dan cssnya satu folder.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}
.wrapper{
  position: relative;
  max-width: 430px;
  width: 100%;
  background: #fff;
  padding: 34px;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper h2{
  position: relative;
  font-size: 22px;
  font-weight: 600;
  color: #333;
}
.wrapper h2::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 28px;
  border-radius: 12px;
  background: #4070f4;
}
.wrapper form{
  margin-top: 30px;
}
.wrapper form .input-box{
  height: 52px;
  margin: 18px 0;
}
form .input-box input{
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 400;
  color: #333;
  border: 1.5px solid #C7BEBE;
  border-bottom-width: 2.5px;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.input-box input:focus,
.input-box input:valid{
  border-color: #4070f4;
}

form h3{
  color: #707070;
  font-size: 14px;
  font-weight: 500;
  margin-left: 10px;
}
.input-box.button input{
  color: #fff;
  letter-spacing: 1px;
  border: none;
  background: #4070f4;
  cursor: pointer;
}
.input-box.button input:hover{
  background: #0e4bf1;
}
Nah setelah memasukan form pendaftaran html dan cssnya, silahkan perview sendiri bagaimana hasilnya, kalau berhasil harusnya formnya cukup  menarik.

Untuk teman-teman sudah menggunakan kode script diatas bisa memodifikasi sesuka kalian yang mana yang lebih dari presepektif teman-teman.

Dibawah ini saya memberikan kode yang sama namun hanya untuk satu file yang saya gabungkan langsung agar teman-teman bisa paste saja dan save satu file.

Jadi teman-teman bisa memilih kode scrpit yang pertama ataupun yang kedua terserah yang pasti hasil kode dibawah maupun atas sama saja cuma file diatas jadi dua (2) yakni html dan css pisah.

Sedangkan kode yang dibawah ini saya jadikan satu (1) yakni kode html dan cssnya saya gabungkan.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mendaftar</title>
    <style type="text/css">
      
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}
.wrapper{
  position: relative;
  max-width: 430px;
  width: 100%;
  background: #fff;
  padding: 34px;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper h2{
  position: relative;
  font-size: 22px;
  font-weight: 600;
  color: #333;
}
.wrapper h2::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 28px;
  border-radius: 12px;
  background: #4070f4;
}
.wrapper form{
  margin-top: 30px;
}
.wrapper form .input-box{
  height: 52px;
  margin: 18px 0;
}
form .input-box input{
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 15px;
  font-size: 17px;
  font-weight: 400;
  color: #333;
  border: 1.5px solid #C7BEBE;
  border-bottom-width: 2.5px;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.input-box input:focus,
.input-box input:valid{
  border-color: #4070f4;
}

form h3{
  color: #707070;
  font-size: 14px;
  font-weight: 500;
  margin-left: 10px;
}
.input-box.button input{
  color: #fff;
  letter-spacing: 1px;
  border: none;
  background: #4070f4;
  cursor: pointer;
}
.input-box.button input:hover{
  background: #0e4bf1;
}


    </style>
</head>
<body>
    <div class="wrapper">
        <h2>Pendaftaran</h2>
        <form action="#">
          <div class="input-box">
            <input type="text" name="nama" placeholder="Masukan Nama Anda..." required>
          </div>
          <div class="input-box">
            <input type="email" name="email" placeholder="Masukan Email Anda..." required>
          </div>
          <div class="input-box">
            <input type="password" placeholder="Buat Kata Sandi..." required>
          </div>
          <div class="input-box">
            <input type="password" placeholder="Buat Kata Sandi..." required>
          </div>

          <div class="input-box button">
            <input type="Submit" value="Mendaftar">
          </div>
        </form>
      </div>
</body>
</html>
Untuk hasilanya dari form pendaftaran dengan html harusnya seperti gambar dibawah ini.

Cara Membuat Form Pendaftaran Dengan HTML hasilnya

Kalau beda mungkin ada kode yang error pastikan kode harus lengkap semua...

Oke sekian dulu artikel Cara Membuat Form Pendaftaran Dengan HTML semoga  bermanfaat untuk teman-teman.

Jika ada pertanyaan bisa komentar dibawah okeh...
 
Terima kasih Sudah Berkunjung
Older Posts
Newer Posts

Blog authors

Himang
Himang
Hanya Penulis Biasa! Blogger

No comments

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan tampil lama karena akan dihapus sesegera mungkin. Oleh Admin Kami.