🌐
Miniclass Web
  • Miniclass Web
  • 1. Pengenalan Pemrograman Web
    • Cara Kerja Website
    • Pengenalan Backend dan Frontend
    • HTTP Request dan HTTP Response
  • 2. HTML
    • Pengenalan HTML
    • Text Formatting
    • Link
    • Media
    • List
    • Table
    • Form
    • Grouping
  • 3. CSS
    • Pengenalan CSS
    • Selector CSS
    • Text Formatting
    • Background
    • Border
    • Height dan Width
    • Spacing
    • Layouting
    • Responsive Design
    • Membuat Template Web Responsive
  • 4. Javascript
    • Pengenalan JavaScript
    • Javascript for Java developer
    • Array
    • Fungsi
    • Manipulasi DOM
    • Event
    • Fetch API
    • Object JavaScript
    • UI Component Lanjutan
  • 5. Node.js
    • Pengenalan Node.js
    • Membuat Server HTTP
    • Routing
    • Import Export
    • Node Package Manager
    • Nodemon
  • 6. Express.js
    • Pengenalan Express.js
    • HTTP Method
    • Menerima Data dari URL
    • Middleware
    • Menerima Data dari Body
    • Mengunggah File
    • Menampilkan File dalam Folder
    • Menyimpan Data ke Database MySQL
  • 7. Modern Frontend Development
    • ECMAScript
    • Transpiler
    • Module Bundler
  • 8. React Fundamental
    • Pengenalan React JS
    • Props
    • Event
    • State
    • Conditional Rendering
    • Component Mapping
    • Side Effect
    • Custom Hook
  • 9. React State Management
    • Lifting State Up
    • Context
    • Reducer
  • 10. React Performance
    • Debounce
    • Throttling
    • Memoization
    • Profiling
  • 11. React Testing
    • Component Testing
    • Hook Testing
    • Mocking
    • End to End Testing
  • 12. Object Relational Mapping
    • Pengenalan Object Relational Mapping
  • 13. Document Oriented Database
    • Document Oriented Database
    • Object Document Mapping
  • 14. Web Service
    • REST
    • GraphQL
  • 15. Autentikasi
    • JSON Web Token
    • Membuat Web Service Sederhana
  • 16. Microservices
    • Microservices
    • Microservices Gateway
    • Message Queue
    • Remote Procedure Call
    • Membuat Micro Service Sederhana
  • 18. Caching
Powered by GitBook
On this page
  • 1 Permasalahan
  • 2. Penjelasan Form
  • 3. Membuat Form Pada Website
  • 3.1. Tag Form
  • 3.2. Tag Input
  • 3.3. Tag Label
  • 4. Contoh Kasus Membuat Form Login
  • 4.1. Membuat Form dan Input
  • 4.2. Menerapkan Label
  • 4.3. Hasil Akhir

Was this helpful?

  1. 2. HTML

Form

1 Permasalahan

Web tidak hanya digunakan untuk menampilkan informasi saja, akan tetapi digunakan untuk mengambil informasi atau data dari pengunjung. Salah satu cara untuk mengambil informasi dari pengunjung adalah dengan menggunakan form. Pada topik ini akan dibahas bagaimana cara membuat form menggunakan HTML.

2. Penjelasan Form

Form digunakan untuk menerima data dari inputan user, biasanya diterapkan pada form login, pendaftaran, transaksi, dan sebagainya.

Form dalam web bisa disamakan dengan formulir di dunia nyata. Form dapat diisi, kemudian diproses menggunakan bahasa pemrograman tertentu.

3. Membuat Form Pada Website

3.1. Tag Form

Form di HTML dapat kita buat dengan tag <form>. nantinya semua tag input akan dimasukkan ke dalam tag ini

<form>
  <!-- input form ada disini -->
</form>

Kode html diatas tidak akan menghasilkan apa-apa. Karena kita belum membuat input-nya.

3.2. Tag Input

Agar web dapat menerima inputan dari user, maka kita perlu membuat beberapa input di dalam form yang dibuat. Untuk membuat input kita bisa menggunakan tag <input />

<form>
  <input type="text" name="username" placeholder="john doe" />
</form>

Input memiliki beberapa attribut yang harus diberikan :

  • type merupakan tipe dari input. Ada beberapa tipe input yang dapat digunakan, yaitu text, number, submit, checkbox, radio, email, file, password

  • name merupakan nama dari input yang akan menjadi kunci dan variabel di dalam program.

  • placeholder merupakan keterangan atau petunjuk yang mendeskripsikan nilai seperti apa yang harusnya diinputkan oleh user. Attribute ini hanya berguna apabila type dari input adalah text, email, dan password.

3.3. Tag Label

Tag <label> digunakan untuk memberikan label pada input yang sudah dibuat, sehingga user akan mengetahui data apa yang harus diinputkan pada input tersebut, misalnya username

Untuk menerapkan label pada input, kita bisa memasukkan tag <input> kedalam tag <label>. Tujuannya agar ketika user melakukan klik pada label, maka cursor akan otomatis fokus ke input yang ada di dalam label tersebut.

<label>
  Username:
  <input type="text" name="username" placeholder="john doe" />
</label>

4. Contoh Kasus Membuat Form Login

Agar lebih memahami cara membuat form pada HTML, kita akan membuat sebuah form login sederhana yang memiliki beberapa input sebagai berikut :

  • Input username atau email

  • Input password

  • Checkbox untuk remember me

  • Tombol untuk login

4.1. Membuat Form dan Input

Langkah pertama yang akan dilakukan untuk membuat form login pada web, adalah dengan membuat inputnya menggunakan tag input dengan type yang berbeda - beda sesuai kebutuhan. Jangan lupa untuk membungkus semua tag input tersebut dengan tag form.

<form>
  <input type="text" name="username" placeholder="john doe" />
  <input type="password" name="password" />
  <input type="checkbox" name="remember" />
  <input type="submit" name="submit" value="Login" />
</form>

4.2. Menerapkan Label

Agar user tau data apa yang perlu dimasukkan ke dalam form, maka kita perlu menerapkan label pada masing - masing input yang sudah dibuat sebelumnya

<form>
  <label>
    Username:
    <input type="text" name="username" placeholder="john doe" />
  </label>

  <label>
    Password:
    <input type="password" name="password" />
  </label>

  <label>
    <input type="checkbox" name="remember" />
    Remember me
  </label>

  <input type="submit" name="submit" value="Login" />
</form>

4.3. Hasil Akhir

Berikut hasil akhir dari contoh kasus form login yang kita buat, jangan lupa tambahkan struktur dasar HTML agar file HTML kita valid

<html>
  <head>
    <title>Form Login</title>
  </head>
  <body>
    <form>
      <label>
        Username:
        <input type="text" name="username" placeholder="john doe" />
      </label>

      <label>
        Password:
        <input type="password" name="password" />
      </label>

      <label>
        <input type="checkbox" name="remember" />
        Remember me
      </label>

      <input type="submit" name="submit" value="Login" />
    </form>
  </body>
</html>
PreviousTableNextGrouping

Last updated 4 years ago

Was this helpful?