Membuat Form Register dengan HTML & CSS

Setelah kita belajar membuat form login, sekarang kita belajar membuat form register. Bagi kalian yang belum baca bagaimana cara membuat login form silahkan baca Login Form

Baca Juga Belajar programming untuk pemula

Seperti apa register form dan apa fungsinya serta bagaimana cara membuatnya? Mari kita sama - sama siapkan sesajennya terlebih dahulu sebelum otak kita menguras banyak resource dari tubuh kita. 

kurang lebih kita akan melakukan design seperti tampak pada gambar, dimana dari gambar tersebut kita bisa memulai dengan membuka code editor kesayangan kita, bagi yang ingin tahu lebih banyak tentang code editor bisa baca disini code editor lengkap dari A - Z

Dalam hal ini saya akan membuka code editor android saya yaitu acode. Salah satu bentuk kemajuan teknologi yang saya nikmati adalah menggunakan program komputer yang dapat dijalankan di android. Berikut penampakan Acode. 

Bentuknya yang elegant dan ringan ini mebuat saya tertarik untuk menggunakannya meskipun ada beberapa IDE lain. Baiklah kita tidak akan berlama - lama dengan ini semua. Kita akan langsung mulai ngoding, dan membuat Register Form dengan menggunakan HTML, CSS dan BOOTSTRAP. 

Pertama buatlah sebuah form dengan method post yang didalamnya terdapat 3 buah element div memiliki class form-group, class tersebut adalah milik framework bernama bootstrap, jadi dengan bantuan bootatsrap kita tidak perlu puyeng - puyeng membuat kode css, bagi kamu yang suka tantangan boleh kalian ngulik sendiri ya. Setelah 3 element div dibuat, buatlah pada masing - masing div sebuah input dengan class form-control, ini juga sama punya bootstrap, pada input bedakan atribut dari masing - masing input, input pertama type nya harus text, kedua email dan ketiga password, masing - masing input bedakan name dan id nya pastikan aktikan required nya dengan nilai true. Sehingga kalo kalian membuatnya maka harusnya seperti gambar di bawah ini.

Buat kalian yang mau copas kodenya silahkan, tapi saran ane mendingan kalian ketik ulang ya, biar kalian lebih lancar mengetik dan memahami apa yang sedang kalian buat.

Source code

Register Form

<form method="post">

  <div class="form-group">

  </div>

  <div class="form-group">

    <input type="text" name="username" id="username" placeholder="Username" class="form-control" required>

  </div>

  <div class="form-group">

    <input type="email" name="email" id="email" placeholder="Email" class="form-control" required>

  </div>

  <div class="form-group">

    <input type="password" name="ps" id="ps" placeholder="Password" class="form-control" required>

  </div>

  <div class="form-group">

    <input type="submit" name="simpanUser" class="btn btn-primary btn-block">

  </div>

</form>