Tutorial belajar dasar HTML : Cara Membuat form di
HTML
Apa fungsi form ?Pada html atau web, kita memerlukan form sebagai tempat penginputan ketika kita mmbuat sebuah aplikasi yang memerlukan user untuk mengisi biodata, mengisi data dan lain-lain. Untuk membuat sebuah halaman login saja kita memerlukan sebuah form. Terbayang kan penting nya sebuah form pada aplikasi web?
Untuk membuat form, element yang di gunakan adalah element form atau
tag <form> dan akhiri dengan </form> lalu di tengah tengah antara
tag <form> pembuka dan </form> penutup kita memerlukan tag
<input> dan tag <button> sebagai tombol submit. Berikut akan saya
buat sebuah contoh form sederhana dan teman-teman bisa mengembangkan nya lebih
jauh.
membuat form dengan html
Dan jika menggunakan tabel agar lebih rapi :
Form
dengan bantuan tabel
Dan menggunakan css:
di bawah juga sudah saya sertakan
syntax penulisan nya agar mudah teman-teman coba langsung dan mudah-mudahan
lebih cepat untuk di pahami
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<head>
<style>
input{
border:1px solid black;
}
form{
background:#1ABC9C;
width:250px;
}
</style>
</head>
<body>
<h2>FORM SEDERHANA</h2>
<form>
<table>
<tr>
<td>nama </td><td><input type="text" name="nama"/></td>
</tr>
<tr>
<td>alamat</td><td><input type="text" name="alamat"/></td>
</tr>
<tr>
<td>umur</td><td><input type="text" name="umur"/></td>
</tr>
<tr>
<td>pekerjaan </td><td><input type="text" name="pekerjaan"/></td>
</tr>
<tr>
<td>hobi </td><td><input type="text" name="hobi"/></td>
</tr>
<tr>
<td>tanggal lahir</td><td><input type="date" name="tanggal_lahir"/></td>
</tr>
<tr>
<td><input type="submit" value="Oke"></td>
</tr>
</table>
</form>
</body>
|
Hasilnya:
Membuat
form dengan html
Penggunaan tag <input> untuk
mengatur type nya tambahkan atribut type=”typenya” ke dalam tag <input>.
Dan menentukan nama dari tiap-tiap tag <input> dengan name=”namanya”.
Untuk membuat jenis input dengan pengetikan text gunakan text, untuk tombol
menggunakan submit dan tanggal menggunakan date.
untuk penggunaan tag input sendiri
bisa di gunakan bukan hanya untuk penginputan text, melainkan untuk menginput
tanggal, membuat pemilihan dengan centang,
berikut beberapa contoh type pada
input :
- checkbox = pemilihan dengan jenis centang
- color = pemilihan gambar
- datetime = penginputan waktu
- submit = tombol submit
- search = inputan pencarian
- url = penginputan link
- text = penginputan text
- file = penginputan file (upload file)
- hidden = menyembunyikan inputan
- month = penginputan bulan
- time = penginputan waktu
- number = penginputan nomor
- password = penginputan password
- radio = pilihan centang
- button = membuat tombol
- reset = type tombol untuk mereset inputan
- email = penginputan email
- date = penginputan tanggal
jangan lupa untuk meletakkan type
input di atas ke dalam atribut type pada tag input pembuka seperti pada contoh
di atas
