Html

Cara membuat form di html

DAY - 4 PKL DI ISTN

 Dihari ke 4 ini kita membuat suatu from di html apa si yang di maksud dengan frorm html?

Elemen <form> dalam HTML adalah suatu cara untuk mengelompokkan dan mengatur elemen-elemen formulir di dalam halaman web. Formulir HTML digunakan untuk mengumpulkan input dari pengguna, seperti teks, angka, pilihan, dan lainnya. Elemen <form> memungkinkan Anda mengatur dan mengendalikan cara data dikirimkan ke server atau diolah di sisi klien.

  • <form>: Elemen utama yang mengelompokkan dan mengatur elemen-elemen formulir di dalamnya. Atribut action menentukan URL atau tujuan di mana data akan dikirimkan setelah formulir dikirim. Atribut method menunjukkan metode yang akan digunakan untuk mengirim data (biasanya "GET" atau "POST").

  • <label>: Digunakan untuk memberikan label atau keterangan kepada elemen formulir. Atribut for menghubungkan label dengan elemen input berdasarkan nilai id.

  • <input>: Elemen input yang berbagai jenisnya, seperti teks (type="text"), email (type="email"), password (type="password"), dan sebagainya. Atribut name adalah nama yang akan digunakan untuk mengidentifikasi data di server. Atribut required menunjukkan bahwa input tersebut wajib diisi sebelum formulir dapat dikirim.

  • <br>: Tag line break (baris baru) untuk membuat baris baru setelah setiap elemen input.

  • <input type="submit">: Tombol "Submit" yang, jika diklik, akan mengirimkan data formulir ke tujuan yang ditentukan dalam atribut action.

Elemen <form> memberikan struktur yang terorganisir untuk mengumpulkan data dari pengguna dan mengirimkannya ke tempat yang sesuai, seperti server web, untuk pengolahan lebih lanjut.

contoh form html yang saya buat:


tampilan login 


tampilan login 


codingan html :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Login</title>
</head>
<h2>Masukan Data admin</h2>
<form action="file:///D:/web%20gw/new%201.html" method="post">
<table border="1" width="50%">
<tr><th colspan="3" bgcolor="black">
<marquee><font color="white">Form Input Data admin</font></marquee></th></tr>

<tr>
<td width="40%">NIK
<td width="1px">:
<td><input style="width:150px;" type="text" name="nik" value="" placeholder="Masukan NIK Anda" required>
</tr>

<tr>
<td>Nama Karyawan
<td>:
<td><input style="width:300px;" type="text" name="nama_karyawan" value="" placeholder="Masukan Nama Anda" required>
</tr>
 
<tr>
<td>Tanggal Lahir
<td>:
<td><input style="width:150px;" type="date" name="tanggal_lahir" value="" placeholder="Tanggal Lahir Anda" required>
</tr>
 
<tr>
<td>Alamat
<td>:
<td><input style="width:450px;" type="text" name="alamat" value="" placeholder="Alamat Anda" required>
</tr>
 
<tr>
<td>Status
<td>:
<td>
<input type="radio" name="status" value="Aktif" >Aktif
<input type="radio" name="status" value="Tidak Aktif" >Tidak Aktif
</tr>

<tr>
<td>Keterangan
<td>:
<td><input style="width:450px;" type="text" name="keterangan" value="" placeholder="Catatan Anda" required>
</tr>
<tr> 
<body>
    <td><label for="password">Password:</label>
<td>:
<td>
    <input type="password" id="password" name="password">
</body>
</tr>
<tr>
    <td>level
<td>:
<td>
<input type="radio" name="level" value="administrator" >administrator
<input type="radio" name="level" value="HRD" >HRD
<input type="radio" name="level" value="Owner" >Owner
<input type="radio" name="level" value="kasir" >kasir
<input type="radio" name="level" value="staf" >staf


<tr>
<td>
<td>
<td>
<input type="Submit" name="Simpan" value="Simpan">
<input type="Reset" name="Reset" value="Reset">

</tr> 
</table>
</form>
<tr>
<body>
    <h1>Login sebagai supplier</h1>
    <form action="file:///D:/web%20gw/table%20baru%20nih.html" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br>

        <input type="submit" value="Login">
    </form>
</body>
<tr>
<body>
<form action="file:///D:/web%20gw/tabel%20eps%202.html" method="post">
         <input type="submit" value="daftar produk">
</form>
</body>
</html>

tabel ke 1: 




membuat table produk

codingan :

<html>
<h2>LIST PRODUKK </h2>
<table border="1" width="100%">
  <tr bgcolor="#FAEBD7">
    <th><font color="#black">No</font></th>
    <th><font color="#black">id_produk</font></th>
<th><font color="#black">Nama_produk</font></th>
    <th><font color="#black"> Harga</font></th>
    <th><font color="#black">Gambar </font></th>
<th><font color="#black">Status</font></th>
<th><font color="#black">Keterangan</font></th>
  </tr>
  <tr>
   <td>1</td>
    <td>1245782</td>
    <td>wafelo</td>
    <td>jajanan anak</td>
   <td>Rp.4000</td>
    <td>< img src="link gambar"></td>
<td>terkirim</td>
<td>tersedia</td>
  </tr>
  <tr>
<td>2</td>
<td>12459782</td>
    <td>tenggo</td>
    <td>jajan anak</td>
    <td>Rp.4000</td>
   <td>< img src="link gambar"></td>
    <td>terkirim</td>
    <td>tersedia</td>
  </tr>
<td>3</td>
<td>12459882</td>
    <td>nabati</td>
    <td>jajan anak</td>
    <td>Rp.4000</td>
   <td>< img src="link gambar"></td>
    <td>terkirim</td>
    <td>tersedia</td>
<\tr>
</table>
</html>



tabel ke -2 


disini kita membuat table supplier


codingan tabel ke- 2 

<html>
<h2>LIST SUPPLIER </h2>
<table border="1" width="100%">
  <tr bgcolor="#FAEBD7">
    <th><font color="#black">No</font></th>
    <th><font color="#black">id_Supplier</font></th>
<th><font color="#black">Nama_supplier</font></th>
    <th><font color="#black"> Deskripsi</font></th>
    <th><font color="#black">alamat</font></th>
<th><font color="#black">email</font></th>
<th><font color="#black">telepon</font></th>
   <th><font color="#black">status</font></th>
  </tr>
  <tr>
   <td>1</td>
    <td>1392392</td>
    <td>nevan</td>
    <td>barang tersedia</td>
   <td>bekasi</td>
    <td>nevaaaan@gmail.com</td>
<td>092838382</td>
<td>tidak aktif</td>
  </tr>
  <tr>
<td>2</td>
<td>12454849</td>
    <td>Agata</td>
    <td>barang rusak</td>
    <td>bekasii</td>
   <td>taaaaaa@gmail.com</td>
    <td>02737387282</td>
    <td>aktif</td>
  </tr>
<td>3</td>
<td>1243939</td>
    <td>azlaai</td>
    <td>djsikwowo</td>
    <td>jiwie</td>
   <td>azlaaaa@gmail.com</td>
    <td>02728228</td>
    <td>aktif</td>
<\tr>
</table>
</html>

tabel ke 3

membuat table admin

codingan : 

<html>

<h2>List profil admin</h2>
<table border="1" width="100%">
  <tr bgcolor="#FAEDB7">
    <th><font color="#black">No</font></th>
    <th><font color="#black">id admin</font></thk>
<th><font color="#black">Nama admin</font></th>
<th><font color="#black">level</font></th>
    <th><font color="#black">email</font></th>
    <th><font color="#black">telepon</font></th>
<th><font color="#black">username</font></th>
<th><font color="#black">password</font></th>
<th><font color="#black">status</font></th>
<th><font color="#black">keterangan</font></th>
  </tr>
  <tr>
   <td>1</td>
    <td>00889911</td>
    <td>ucup</td>
    <td>administrator</td>
    <td>ucupganteng@gmail.com</td>
<td>09890887</td>
<td>ucupe</td>
<td>123</td>
<td>aktif</td>
<td>berangkat</td>
  </tr>
  <tr>
<td>2</td>
<td>09099090</td>
    <td>apes</td>
    <td>administrator</td>
    <td>budi09@gmail.com</td>
    <td>09767</td>
    <td>apese</td>
<td>123</td>
<td>aktif</td>
<td>belum mandi</td>
  </tr>
  <tr>
<td>3</td>
<td>097385783758</td>
    <td>ripat</td>
    <td>owner</td>
    <td>rupat09@gmail.com</td>
    <td>0908w08eq9w8e</td>
    <td>09765326278</td>
<td>123</td>
<td>tidak aktif</td>
<td>jalan kaki</td>
  </tr>
  <tr>
<td>4</td>
<td>090843647823462</td>
    <td>udin</td>
    <td>HRD</td>
    <td>udin09@gmail.com</td>
    <td>udine</td>
    <td>udine</td>
<td>123</td>
<td>aktif</td>
<td>jalan-jalan</td>
  </tr>
</html> 


kgiatan selama di istn :

sebelum kita pkl kita terlebih dahulu membersihkan ruangan yang kita tempati agar nyaman buat belajar dan beraktifitas



















disini kita membahas materi tentang form bersama guru pembimbing kita


setelah di beri materi dari guru pembimbing kita, kita langsung mempraktikan apa yang sebelumnya di jelaskan









Komentar

Postingan Populer