www.TIFKOM.net

Blog Komputer - Blog tentang tips, informasi dan panduan tentang belajar komputer, website, programming, desain grafis, database, jaringan, software dan SEO yang terlengkap dan terbaru.

Cara Membuat Tabel dan Form HTML





cara membuat tabel dan form di html

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.





Tag : HTML, website
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).

Back To Top