HTML Form
Apa itu HTML
Form? Mungkin sobat blogger yang mengunjungi blog ini sudah mengerti apa yang
dimaksud dengan HTML Form. HTML adalah HyperText Markup Language yaitu sebuah
bahasa yang digunakan untuk mendesain sebuah web. Form adalah sebuah formulir
atau lembar pengisian data. Jadi HTML Form adalah sebuah bahasa yang
digunakan untuk membuat sebuah formulir pada web. Langsung saja kita mulai penjelasannya.
digunakan untuk membuat sebuah formulir pada web. Langsung saja kita mulai penjelasannya.
Disini saya
akan membagi penjelasan menjadi 3 bagian yaitu :
1. HTML
Form
2. HTML
Input type
3. HTML
Input attribute
-
HTML Form
Seperti yang dijelaskan di atas HTML Form adalah
bahasa yang digunakan untuk membuat sebuah formulir di dalam web. Kode yang
digunakan untuk memasukkan / membuat sebuah formulir adalah <form> dan
ditutup oleh </form>. HTML Form itu sendiri terdiri dari :
a. Input
elemen
Yaitu input yang akan dimasukkan ke database, atau
tempat pengisian data.
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Nama Depan
: <br>
<input
type="text"><br>
Nama
Belakang : <br>
<input
type="text">
</form>
</body>
</html>
Hasil dari script di atas :
b. Submit
Button
Submit button itu adalah tombol yang digunakan
memasukkan data ke database atau ke pengontrol formulir.
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Nama Depan
: <br>
<input
type="text"><br>
Nama
Belakang : <br>
<input
type="text"><br>
<input
type="submit">
</form>
</body>
</html>
Hasil dari script di atas :
c. Action
attribute
Berisi alamat web yang akan dituju setelah mengklik
submit
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form
action="HTML Form.html">
Nama Depan
: <br>
<input
type="text"><br>
Nama
Belakang : <br>
<input
type="text"><br>
<input
type="submit">
</form>
</body>
</html>
Hasil dari script di atas :
d. Name
attribute
Name attribute ini bisa disebut sebagai nama dari
kolom yang akan diisi, misalkan kolom Nama lengkap. Atau kolom hobi.
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Nama Depan
: <br>
<input
type="text" name="namadepan"><br>
Nama
Belakang : <br>
<input
type="text" name="namabelakang"><br>
<input
type="submit">
</form>
</body>
</html>
Hasil dari script di atas :
e. Grouping
Form data
Grouping Form data adalah dimana formulir di dalam
1 halaman web, dibagi menjadi kelompok-kelompok sesuai dengan kategori data
yang diinputkan.
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<fieldset>
<legend>Nama</legend>
<form>
Nama Depan
: <br>
<input
type="text" name="namadepan"><br>
Nama
Belakang : <br>
<input
type="text" name="namabelakang"><br>
<input
type="submit">
</form>
</fieldset>
</body>
</html>
Hasil dari script di atas :
f.
Textarea elemen
Bagian dimana ada sebuah area umumnya berbentuk
persegi untuk memasukkan sebuah teks
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
<textarea
rows=10 cols=30></textarea>
</form>
</body>
</html>
Hasil dari script di atas :
g. Button
elemen
Sebuah tombol yang berfungsi sesuai apa yang kita
atur
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
<button
onclick="alert('Ini adalah contoh button')">Coba
Klik</button>
</form>
</body>
</html>
Hasil dari script di atas :
h. Keygen
elemen
Adalah elemen dimana data yang kita inputkan akan
dikodekan atau dienkripsi dengan metode pengkodean yang disediakan.
Contoh Script:
<!DOCTYPE
html>
<html>
<body>
<form>
Nama :
<br>
<input
type="text"><br>
Enkripsi :
<br>
<keygen
name="security">
<input
type="submit">
</form>
</body>
</html>
Hasil dari script di atas :
i.
Datalist elemen
Adalah elemen dimana kita disodorkan list atau
daftar data yang akan kita pilih
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form
action="keygen.html">
<input
list="jurusan">
<datalist
id="jurusan">
<option
value="Manajemen Informatika">
<option
value="Komputerisasi Akuntansi">
<option
value="Teknik Otomotif">
</form>
</body>
</html>
-
HTML Input
Type
Disini saya akan membahas berbagai macam tipe dari input
elemen.
a. Text
Tipe data yang diinputkan adalah sebuah teks
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
<input
type="text">
</form>
</body>
</html>
Hasil dari script di atas :
b. Password
Di tipe ini data yang diinputkan akan disembunyikan
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Nama
Lengkap : <br>
<input
type="text"><br>
Password :
<br>
<input
type="password">
</form>
</body>
</html>
Hasil dari script di atas :
c. Radio
Dimana tipe yang diinputkan adalah sebuah pilihan
dan hanya bisa memilih satu
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Jurusan :
<br>
<input
type="radio" name="jurusan" value="Manajemen
Informatika">Manajemen Informatika<br>
<input
type="radio" name="jurusan" value="Komputerisasi
Akuntansi">Komputerisasi Akuntansi<br>
<input
type="radio" name="jurusan" value="Teknik
Otomotif">Teknik Otomotif
</form>
</body>
</html>
Hasil dari script di atas :
d. Checkbox
Di tipe ini kita diberi pilihan dan bisa memilih
lebih dari satu
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Kendaraan
yang dipunya : <br>
<input
type="checkbox" name="kendaraan"
value="Sepeda">Sepeda<br>
<input
type="checkbox" name="kendaraan"
value="Motor">Motor<br>
<input
type="checkbox" name="kendaraan"
value="Mobil">Mobil
</form>
</body>
</html>
Hasil dari script di atas :
e. Number
Data yang diinputkan adalah angka. Dan kita bisa
mengatur minimum dan maksimum angka yang dimasukkan
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
<input
type="number" min="1" max="5">
</form>
</body>
</html>
Hasil dari script di atas :
f.
Date
Untuk menginputkan tanggal
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
<input
type="date">
</form>
</body>
</html>
Hasil dari script di atas :
g. Color
Digunakan untuk memasukkan data warna
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Warna
Favorit :
<input
type="color">
</form>
</body>
</html>
Hasil dari script di atas :
h. Range
Menginputkan data angka dimana data ini dibatasi
min dan max nya dan terdapat slider controlnya.
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Poin :
<input
type="range" min="1" max="10">
</form>
</body>
</html>
Hasil dari script di atas :
i.
Time
Untuk memilih waktu pengisian (tanpa zona waktu)
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Waktu :
<input
type="time">
</form>
</body>
</html>
Hasil dari script di atas :
j.
Datetime-local
Untuk memilih tanggal dan waktu (tanpa zona waktu)
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Acara Ulang
tahun anda :
<input
type="datetime-local">
</form>
</body>
</html>
k. Email
Dimana data yang diinputkan harus berupa sebuah
email
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Masukkan
email anda :
<input
type="email">
<input
type="submit">
</form>
</body>
</html>
Hasil dari script di atas :
l.
Search
Digunakan seperti search engine
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Search
:
<input
type="search">
</form>
</body>
</html>
Hasil dari script di atas :
m. URL
Digunakan untuk mensubmit website yang anda punya.
Mengisinya diawali dengan http://
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Masukkan
website anda :
<input
type="url" size="30">
</form>
</body>
</html>
Hasil dari script di atas :
-
HTML Input
Attribute
Input attribute bisa disebut sebagai hiasan atau
perlengkapan yang terdapat pada Input Elemen.
a. Value
Dimana kolom inputan sudah terisi namun bisa kita
ganti
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Nama Anda :
<input
type="text" value="Anang">
</form>
</body>
</html>
Hasil dari script di atas :
b. Readonly
Dimana kolom yang sudah ada isinya dan tidak bisa
diganti
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Nama Depan
: <br>
<input
type="text" value="Anang" readonly><br>
Nama
Belakang : <br>
<input
type="text">
</form>
</body>
</html>
Hasil dari script di atas :
c. Disabled
Dimana kolom nya menjadi tidak aktif
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Nama Depan
: <br>
<input
type="text" value="Anang" disabled><br>
Nama
Belakang : <br>
<input
type="text">
</form>
</body>
</html>
Hasil dari script di atas :
d. Size
Size adalah attribute yang kita gunakan untuk
mengatur ukuran panjang kolom inputan
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Nama Depan
: <br>
<input
type="text" value="Anang" size="40"><br>
Nama
Belakang : <br>
<input
type="text">
</form>
</body>
</html>
Hasil dari script di atas :
e. Maxlength
Digunakan untuk mengatur jumlah maksimum karakter
yang dapat diisikan
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Nama Depan
: <br>
<input
type="text" value="Anang"
maxlength="5"><br>
Nama
Belakang : <br>
<input
type="text">
</form>
</body>
</html>
Hasil dari script di atas :
f.
Formaction
Adalah dimana kita ingin membuat 2 buah tombol dan
2 tombol tersebut website tujuannya ingin kita buat berbeda
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form
action="HTML Form.html">
Nama Depan
: <br>
<input
type="text"><br>
Nama
Belakang : <br>
<input
type="text"><br>
<input
type="submit">
<input
type="submit" formaction="HTML Heading.html"
value="Submit 2">
</form>
</body>
</html>
Hasil dari script di atas :
g. Formmethod
Adalah dimana kita ingin membuat 2 metode
pengiriman inputan kita yaitu get dan post
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form
action="action_page.php" method="get">
Nama Depan: <input
type="text"><br>
Nama Belakang: <input
type="text"><br>
<input type="submit"
value="Submit dengan GET">
<input type="submit"
formmethod="post" formaction="demo_post.asp"
value="Submit dengan POST">
</form>
</form>
</body>
</html>
Hasil dari script di atas :
h. Formtarget
Dimana kita memberi target sendiri pada tombol
tertentu
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form
action="HTML Form.html" method="get">
Nama Depan: <input
type="text"><br>
Nama Belakang: <input type="text"><br>
<input type="submit"
formtarget="_blank" value="Submit">
</form>
</form>
</body>
</html>
Hasil dari script di atas :
i.
Height dan Width
Digunakan untuk mengatur ukuran inputan gambar
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
<input type="image"
src="w3schools.jpg" alt="Berita" width="104"
height="142">
</form>
</form>
</body>
</html>
Hasil dari script di atas :
j.
List attribute
Digunakan untuk membuat list yang didalamnya
menggunakan datalist
Contoh
Script :
<!DOCTYPE
html>
<html>
<body>
<form>
<input list="jurusan">
<datalist id="jurusan">
<option value="Manajemen
Informatika">
<option value="Komputerisasi
Akuntansi">
<option value="Teknik
Otomotif">
</form>
</form>
</body>
</html>
Hasil dari script di atas :
k. Min
and max attribute
Digunakan untuk memberi batas minimum dan maksimum
pada suatu inputan angka
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Masukkan
jumlah antara 1 - 5 :
<input
type="number" min="1" max="5">
</form>
</form>
</body>
</html>
Hasil dari script di atas :
l.
Multiple
Adalah digunakan untuk menginputkan banyak file
atau bisa disebut upload banyak file
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Upload file
:
<input
type="file" multiple>
</form>
</form>
</body>
</html>
Hasil dari script di atas :
m. Pattern
Digunakan untuk mengatur format atau bentuk teks
yang harus diisi. Contoh nya adalah 3 huruf kode negara seperti Indonesia=INA,
Jepang=JPN
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Kode Negara
: <input type="text" pattern="[A-Za-z]{3}" title="3
huruf kode negara">
</form>
</form>
</body>
</html>
Hasil dari script di atas :
n. Placeholder
Biasanya digunakan untuk memberi keterangan diisi
apa kolom itu
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Nama Depan
:
<input
type="text" placeholder="Nama Depan"><br>
Nama
Belakang :
<input
type="text" placeholder="Nama Belakang">
</form>
</form>
</body>
</html>
Hasil dari script di atas :
o. Required
Untuk membuat kolom yang ditandai dengan required
itu harus diisi
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Username :
<input
type="text" ><br>
Password :
<input
type="password"><br>
Kode Pos :
<input
type="text" required><br>
<input
type="submit">
</form>
</form>
</body>
</html>
Hasil dari script di atas :
p. Step
Digunakan untuk mengatur inputan angka yang
dimasukkan adalah kelipatan dari step yang kita tentukan.
Contoh Script :
<!DOCTYPE
html>
<html>
<body>
<form>
Masukkan
poin :
<input
type="number" step="3">
<input
type="submit">
</form>
</form>
</body>
</html>
Hasil dari script di atas :
