Artikel kali ini akan menyajikan pembelajaran tentang html yaitu bagaimana membuat tabel dan form di HTML. Anda akan diberikan pengenalan tentang tag - tag yang digunakan pada pembuatan tabel dan form ini, serta juga diberikan contohnya.
Langsung saja disimak penjelasan di bawah ini:
A. Langkah membuat table
Table didefenisikan dengan tag <table>...</table>. Sebuah tabel terdiri dari baris dan kolom.
Untuk membuat table silahkan ketikkan syntak berikut ini:
<html>
<head><title>Membuat Tabel HTML</title></head>
<body>
<table border="1">
<caption> Contoh Tabel </caption>
<th>I</th>
<th>I</th>
<tr>
<td> Baris 1, kolom 1</td>
<td> Baris 1, kolom 2</td>
</tr>
<tr>
<td> Baris 2, kolom 1</td>
<td> Baris 2, kolom 2</td>
</tr>
</table
</body>
</html>
Silahkan di copy ke Notepad++ dan simpan dengan .html
Berikut ini adalah penjelasan dari tag - tag, yaitu:
- Tag <th>...</th>: untuk mendefenisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah.
- Tag <tr>...</tr>: untuk mendefenisikan sebuah baris dalam tabel
- Tag <td>...</td>: untuk mendefenisikan sebuah sel data pada tabel
- Tag <caption>: untuk mendefenisikan tulisan untuk judul tabel. Posisi default dari judul adalah center pada bagian paling atas tabel.
- Atribut border: untuk menentukan ketebalan tepi tabel
B. Langkah membuat Form dan Input
1.Form
Form HTML digunakan untuk mengirimkan data ke server. Tag yang digunakan untuk membuat form HTML:
<form>...</form>
2. Input Elemen pada Form
Elemen form yang paling penting adalah elemen <input>. Elemen <input> digunakan untuk memilih informasi pengguna. Sebuah elemen <input> dapat bervariasi, tergantung pada jenis atribut. Elemen <input> dapat dari type text field, checkbox, password, radio button, submit button dan lainnya. Atribut type untuk mendefenisikan format yang akan dipakai di dalam form:
<input type=" ">
Jenis <input> yang paling umum digunakan:
<table border="1">
<th>Tipe</th>
<th>Deskripsi</th>
<tr>
<td><pre><input type="text"></pre></td>
<td>untuk memasukkan suatu nilai text</td>
</tr>
<tr>
<td><pre><input type="password"></pre></td>
<td>untuk memasukkan suatu password</td>
</tr>
<tr>
<td><pre><input type="radio"></pre></td>
<td>untuk menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih</td>
</tr>
<tr>
<td><pre><input type="checkbox"></pre></td>
<td>menyediakan beberapa, bisa lebih dari satu pilihan yang dipilih</td>
</tr>
<tr>
<td><pre><textarea>...</textarea></pre></td>
<td>inputan untuk text lebih dari satu baris</td>
</tr>
<tr>
<td><pre><input type="submit"></pre></td>
<td>sebuah tombol submit digunakan untuk mengirim data dari form ke server</td>
</tr>
<tr>
<td><pre><input type="reset"></pre></td>
<td>mereset semua input yang ada pada Form</td>
</tr>
</table>
Perhatikan contoh berikut ini:
<html>
<head><title>Membuat input pada form</title></head>
<body>
<form name="form1" action="post.php" method="post">
Username: <br/>
<input type="text" name="nama"><br/>
Password: <br/>
<input type="password" name="password"><br/>
Alamat: <br/>
<textarea name="alamat"></textarea><br/>
Jenis Kelamin: <br/>
<input type="radio" name="jk" value="Pria">Pria</input><br/>
<input type="radio" name="jk" value="Wanita">Wanita</input><br/>
Hobbi:<<br/>
<input type="checkbox" name="hobbi" value="olahraga">Olahraga</input><br/>
<input type="checkbox" name="hobbi" value="komputer">Komputer</input><br/>
<input type="checkbox" name="hobbi" value="musik">Musik</input><br/>
<input type="checkbox" name="hobbi" value="membaca">Membaca</input><br/>
<input type="submit" value="submit"><input type="reset" value="reset">
</form>
</body>
</html>
Silahkan di copy ke Notepad++ dan simpan dengan .html
Contoh di atas adalah membuat sebuah form dengan inputan username, password, alamat, jenis kelamin, hobbi dengan input type yang berbeda - beda seperti text, password, textarea, radio, checkbox.
0 Komentar untuk "Cara Membuat Tabel dan Form HTML"
Terimakasih sudah membaca blog saya, silahkan tinggalkan komentar yang membangun, pertanyaan yang sopan dan sesuai topik. No spam (link aktif pasti dihapus).