Materi Pemrograman Web

Materi Pemrograman Web
Ilwan Syafrinal, M.Kom
Diharapkan siswa dapat membuat formulir sederhana

Diharapkan mahasiswa bisa membuat tabel data
a. Form
Elemen <form> dalam HTML digunakan untuk membuat formulir interaktif di halaman
web. Formulir ini memungkinkan pengguna untuk mengirimkan data, seperti input teks,
pilihan, atau pengunggahan file, ke server web untuk diproses. Elemen <form> dapat berisi
berbagai elemen input, seperti <input>, <select>, <textarea>, radio, radio group dan lainnya.
Praktikum:
Silakan buka lagi folder websaya yang di C:\xampp\htdocs\websaya
Kemudian buka notepad++ atau vs code➔buat file baru kemudian simpan dengan nama
latihan3.html
Selanjutnya ketikkan kode untuk menghasilkan tampilan seperti gambar dibawah ini (untuk
kodingan berada di bawah gambar)
Contoh form data siswa dibawai ini:

Kodingan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Data Siswa SMA</title>
</head>
<body>
<h2>Formulir Data Siswa SMA</h2>
<form action="#" method="post">

<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama
Anda" required><br><br>
Untuk tipe
<label for="kelas">Kelas:</label> text
<input type="text" id="kelas" name="kelas" placeholder="Masukkan kelas
<label for="jurusan">Jurusan:</label>
<select id="jurusan" name="jurusan" required>
<option value="">Pilih Jurusan</option>
<option value="IPA">IPA</option>
<option value="IPS">IPS</option> Untuk select
<option value="Bahasa">Bahasa</option>
<option value="Seni">Seni</option>
</select><br><br>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="Masukkan alamat email
<label for="pass">Password:</label>
<input type="password" name="password" placeholder="Masukkan password
Untuk email
<input type="submit" value="Kirim"> dan password
</form>
Untuk submit atau
tombol kirim
</body>
</html>
Penjelasan dari kode diatas:

1. <form action="#" method="post">
Action : Menentukan URL atau alamat server tempat formulir akan dikirimkan untuk
diproses.
Method : Menentukan metode HTTP yang akan digunakan untuk mengirimkan data
formulir. Metode yang umum digunakan adalah "post" dan "get".
2. <label for="kelas">Kelas:</label>
Digunakan untuk label dari formulir
3. <input type="text" name="nama" placeholder="Masukkan nama Anda" required>
Berikut adalah beberapa atribut yang sering digunakan bersama dengan elemen <input> :
type: Atribut ini menentukan jenis kontrol input yang akan ditampilkan. Beberapa nilai yang
umum digunakan termasuk:
• text: Kotak teks untuk memasukkan teks.

• Email: Kotak teks untuk memasukkan email
• password: Kotak teks yang menyembunyikan karakter yang dimasukkan.
• checkbox: Kotak centang yang memungkinkan pengguna memilih satu atau lebih
pilihan.
• Select: digunakan untuk pilihan atau opsi (dropdown)
• radio: Tombol radio yang memungkinkan pengguna memilih satu dari beberapa
pilihan.
• submit: Tombol untuk mengirimkan formulir.
• file: Tombol untuk mengunggah file.
name: Atribut ini menentukan nama yang akan diberikan pada kontrol input. Nama ini akan
digunakan ketika data dikirimkan ke server.
value: Atribut ini menentukan nilai awal atau nilai yang akan dikirimkan ke server saat
formulir dikirimkan.
placeholder: Atribut ini menampilkan teks placeholder di dalam kotak input yang
memberikan petunjuk kepada pengguna tentang jenis informasi yang diharapkan.
required: Atribut ini menandakan bahwa kontrol input tersebut harus diisi sebelum formulir
dapat dikirimkan.
disabled: Atribut ini menonaktifkan kontrol input sehingga tidak dapat diubah oleh
pengguna.
readonly: Atribut ini mengatur kontrol input menjadi hanya baca sehingga tidak dapat
diubah oleh pengguna, tetapi nilai dapat dikirimkan ke server saat formulir dikirimkan.
4. Textarea (untuk membuat text dari multi-baris atau pengguna dapat memasukan
lebih dari 1 baris)
Silakan ketik kode dibawah ini di file latihan3.html
<textarea name="alamat" rows="4" cols="50" placeholder="Tulis alamat di
sini..."></textarea><br><br>
Hasil Kode
5. Radio button: Tombol radio yang memungkinkan pengguna memilih satu dari beberapa
pilihan.
Untuk mencoba silakan ketik kode dibawah ini di gabung dengan kode sebelumnya saja
<input type="radio" id="laki-laki" name="jenis-kelamin" value="laki-laki"
required><label for="laki-laki">Laki-laki</label><br>
<input type="radio" id="perempuan" name="jenis-kelamin" value="perempuan"

required><label for="perempuan">Perempuan</label><br>
Hasil Kode diatas
Tugas
Silakan buat sebuah formulir pendaftara anggota perputakaan di SMA, terdiri dari
informasi diri, pilihan kelas, pilihan tingkat.
b. Table
Elemen <table> dalam HTML digunakan untuk membuat tabel yang terdiri dari baris dan
kolom. Tabel ini berguna untuk menampilkan data secara terstruktur dan dapat dengan
mudah dibaca oleh pengguna.
Berikut adalah struktur umum dari elemen <table>:
• <table>: Menandai awal dan akhir dari tabel.

• <thead> (opsional): Menandai bagian kepala dari tabel.
• <tr>: Menandai baris dalam bagian kepala tabel.
• <th>: Menandai sel header dalam baris kepala tabel.
• <tbody> (opsional): Menandai bagian tubuh dari tabel.
• <tr>: Menandai baris dalam bagian tubuh tabel.
• <td>: Menandai sel data dalam baris tubuh tabel.
• <tfoot> (opsional): Menandai bagian kaki dari tabel.
• <tr>: Menandai baris dalam bagian kaki tabel.
• <td>: Menandai sel data dalam baris kaki tabel.
Berikut adalah contoh penggunaan elemen <table> dalam HTML:
Silakan buka lagi file latihan3.html, kemudian setelah </form> tambahkan kode tabel
berikut
<h2>Data Siswa Kelas X</h2>
<table border="1">
Digunakan untuk memberi garis tabel
<thead>
<tr>
<th>Nama</th>
<th>NIS</th> Judul table dan ini menjadi jumlah
<th>Gender</th> kolomnya
<th>Alamat</th>
<th>Jurusan</th>
</tr>
</thead>
<tbody> <tr> untuk baris dari tabel
<tr>
<td>Si B</td>
<td>123456</td>
<td>Laki-laki</td> Isi data dan
<td>Batam</td> seterusnya
<td>IPA</td>
</tr> <td> untuk kolom dari tabel
<tr>
<td>Si C</td>
<td>654321</td>
<td>Perempuan</td>
<td>Batam</td>
<td>IPA</td>
</tr>
</tbody>
</table>
Hasil dari kode table diatas
Hasil Keseluruhan Aplikasi kita untuk materi ini

Silakan dicoba untuk pembelajaran materi ini, semua kode ini masih dalam satu file
latihan3.html, semua kode berada didalam <body> </body>

Materi Pemrograman Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi Pemrograman Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Materi Pemrograman Web

Ilwan Syafrinal, M.Kom

Diharapkan siswa dapat membuat formulir sederhana

Contoh form data siswa dibawai ini:

<h2>Formulir Data Siswa SMA</h2>

<form action="#" method="post">

Penjelasan dari kode diatas:

• text: Kotak teks untuk memasukkan teks.

<input type="radio" id="perempuan" name="jenis-kelamin" value="perempuan"

Hasil Kode diatas

Berikut adalah struktur umum dari elemen <table>:

• <table>: Menandai awal dan akhir dari tabel.

Hasil dari kode table diatas

Hasil Keseluruhan Aplikasi kita untuk materi ini

Anda mungkin juga menyukai