Scribd
Unggah
12 tayangan21 halaman

Membuat Form Dan Input

Diunggah oleh

Suwarty atd
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
12 tayangan21 halaman

Membuat Form Dan Input

Diunggah oleh

Suwarty atd
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 21

Membuat Form dan Input

 Form ini biasa dipakai untuk mengumpulkan data dari


pengunjung website.
 Biasanya, dalam sebuah website terdapat satu atau lebih form,
seperti form pencarian, registrasi dan lain sebagainya.
 Sebuah form, mempunyai beragam kontrol, seperti text input,
Button, Combo box dan lainnya.
 Sebuah form diawali dengan tag <form> Top of Form, dan
setiap kontrol-kontrol yang dibutuhkan ditempatkan di dalam
tag ini.
Contoh

FORM atau sering disebut sebagai FORMULIR seperti formulir


pendaftaran siswa baru, formulir pembuatan KTP dan lain
sebagainya.
Control-control Form

 Setiap control pada form bisa dibuat dengan mamakai tag <input>.
Dan yang membedakan tipe dari control tersebut berada pada atribut
type (tipe kontrol).
 Berikut ini adalah sebagian tipe kontrol yang biasa ditemui :
1. Label
2. Text
3. Text Area
4. Combo Box
5. Submit/Button
Tag Form dan Input
1. Label

 Label dipakai untuk menambahkan keterangan pada setiap input data.


 Contoh :

<label for=”Name”> Keterangan Input </label>


 Atribut for diisi dengan isi dari atribut name pada kontrol yang ingin
diberi label.
2. Text

 Text merupakan control input ini bisa diisi dengan teks yang
mempunyai kata yang pendek hanya satu baris.
 Contoh :
 Apabila text input yang akan ditampilkan ingin mempunyai nilai,
maka perlu tuliskan nilai tersebut di dalam atribut value.

 Dengan begitu, ketika halaman dibuka, text input ini secara otomatis
akan terisi dengan nilai dari atribut value.
3. Text Area
 Fungsinya seperti Input Text, Tetapi Textarea bisa diisi lebih dari satu
baris, bisa dipakai untuk isian yang panjang, seperti alamat, deskripsi,
atau biodata.
 Berbeda dengan kontrol lainnya yang menggunakan tag <input>, text
area memiliki tag sendiri yaitu <textarea>. Dan apa yang terdapat di
dalam tag ini adalah value dari kontrol tersebut.
4. Combo Box
 Combo Box merupakan kontrol ketika diklik memiliki beberapa pilihan.
 Formatnya sama seperti pembuatan Daftar/List namun dengan tag yang
berbeda.
5. Submit/Button
 Submit atau Button merupakan tombol yang bisa di klik. Pemakaian atribut
value pada kontrol ini bisa merubah text yang ada di dalamnya.
<input type=”submit” value=”kirimkan data” />
Bukalah file baru, simpan dengan nama file latihan6.html, lalu ketikkan coding
HTML berikut pada file latihan6.html
<html>
<head>
<title>Form</title>
</head>
<body>
<form>
<label for="nama">Nama</label>
<input type="text" name="nama"><br></br>
<label for="alamat">Alamat</label>
<textarea name="alamat"></textarea<br></br>
<label for="kota">Kota</label>
<select name="kota">
<option>Pekanbaru</option>
<option>Bangkinang</option>
<option>Pasirpangarayan</option>
<option>Duri</option>
<option>Rengat</option>
</select>
<input type="submit" value="kirimkan data">
</form>
</body>
</html>
Hasil
Membuat Tabel

 Fungsi utama table HTML adalah membantu pembuat website


menampilkan informasi dalam format grid yang dapat mempermudah
audiens memahami dan menginterpretasikan data.
 Bagi web developer, table HTML berguna dalam menampilkan
informasi secara lebih terstruktur dan jelas.
 Table HTML juga membantu dalam membuat desain responsif agar
situs web terlihat kompatibel di semua perangkat, baik desktop, tablet,
ataupun smartphone.
Elemen Utama Table
 <table>: digunakan untuk membuat tabel itu sendiri. Semua elemen lain
yang membentuk tabel akan diletakkan di dalam tag ini.
 <tr>: berfungsi untuk membuat baris baru dalam tabel. Setiap baris dalam
tabel HTML dimulai dengan tag dan diakhiri dengan tag </tr>.
 <th>: dipakai untuk membuat sel header dalam tabel. Sel header biasanya
digunakan untuk memberikan judul pada kolom atau baris.
Elemen <th> secara otomatis akan menebalkan dan meratakan teks ke
tengah.
 <td>: digunakan untuk membuat sel data dalam tabel. adalah tempat di
mana data aktual disimpan di dalam tabel.
Elemen Utama Table
 <caption>: berfungsi memberikan judul atau keterangan untuk tabel.
 <thead>: dimanfaatkan untuk mengelompokkan bagian header dari tabel.
 <tbody>: dipakai untuk mengelompokkan bagian utama atau body dari
tabel.
 <tfoot>: digunakan untuk mengelompokkan bagian footer dari tabel.
Biasanya digunakan untuk menjumlahkan data atau memberikan catatan
kaki.
 <colgroup> dan <col>: kedua elemen ini dipakai untuk mengatur properti
kolom, seperti lebar kolom.
 <span>: dipakai untuk menggabungkan beberapa sel menjadi satu sel
besar, baik secara horizontal menggunakan atribut colspan atau secara
vertikal menggunakan atribut rowspan.
Cara Membuat Tabel di HTML
 Dalam pembuatan tabel di HTML, kita akan menggunakan berbagai elemen
yang telah disebutkan sebelumnya, seperti <table>, <tr>, <th>, dan <td>.

<table>
</table>
 Jika sudah, tambahkan baris ke dalam tabel menggunakan
elemen <tr>. Setiap baris ini akan mengandung sel data atau sel header.
 Dalam setiap baris, dapat menambahkan sel header menggunakan <th> atau
sel data menggunakan <td>
Contoh
 Hasil coding tersebut tidak akan memiliki garis
 Untuk menampilkan garis pada tabel, beri nilai
atribut border=1 pada tag <table> atau bisa
tambahkan border lewat CSS.

Hasilnya :
Contoh
<! DOCTYPE html> <tr>
<html> <d>1984</td>
<body> <td>George Orwell</td>
<table border="1"> </tr>
<tr> <tr>
<th> Judul Buku</th> <td>The Great Gatsby</td>
<th>Penulis</th> <td>F. Scott Fitzgerald</td>
</tr> </tr>
<tr> </table>
<td>To Kill a Mockingbird</td> </body>
<td>Harper Lee</td> </html>
</tr>
Keterangan

 Contoh di atas, yang digunakan adalah elemen <table> untuk


membuat tabel dasar.
 Elemen <th> berfungsi untuk membuat header tabel, yaitu "Judul
Buku" dan "Penulis". Elemen <tr> dipakai membuat baris baru dalam
tabel dan setiap baris tersebut berisi dua elemen <td> yang
merupakan sel data dalam tabel.
 Atribut border dalam elemen <table> digunakan untuk menambahkan
border ke tabel.
Hasil atau Output
Latihan

 Tuliskan kode tabel di atas dan tambahkan beberapa data lagi, lalu
simpan dalam file latihan7.html

Anda mungkin juga menyukai