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. Atributaction
menentukan URL atau tujuan di mana data akan dikirimkan setelah formulir dikirim. Atributmethod
menunjukkan metode yang akan digunakan untuk mengirim data (biasanya "GET" atau "POST").<label>
: Digunakan untuk memberikan label atau keterangan kepada elemen formulir. Atributfor
menghubungkan label dengan elemen input berdasarkan nilaiid
.<input>
: Elemen input yang berbagai jenisnya, seperti teks (type="text"
), email (type="email"
), password (type="password"
), dan sebagainya. Atributname
adalah nama yang akan digunakan untuk mengidentifikasi data di server. Atributrequired
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 atributaction
.
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
<!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:
<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
<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
<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>
Komentar
Posting Komentar