1.1 Form - <label> ... </label>
1.2 Form - <input>
1.1 Tag <label> ... </label>
Tag
ini digunakan untuk membuat label dari sebuah alat input dan biasanya ditulis
sebelum tag <input>. Atribut yang biasa digunakan untuk tag
<label> adalah for yang diisi dengan nama id dari alat input
yang diberi label.
1.2 Tag <input>
Tag
<input> ini digunakan untuk membuat alat input untuk berbagai macam tipe.
Atribut yang digunakan ada tag ini yaitu :
- Name, nama identitas data yang akan dikirim
- Value, memberi nilai/isi data yang akan dikirim
- Size, mengatur lebar alat input
- Placeholder, mengatur tulisan yang tampil ketika nilainya kosong
- Disable, membuat input tidak daat diubah isinya
- Readonly, sama dengan disable tapi nilainya dapat diubah dengan skrip
- Type, menentukan type alat input
- Id, memberikan identitas data yang akan dikirim
Khusus tipe radio &
checkbox memiliki atribut checked. Adapun tipe input yang dapat
diberikan ada atribut type yaitu :
- Text, memasukan teks biasa
- Hidden, menyembunyikan input
- Password, memasukan password
- Radio, memberi pilihan beberapa nilai yang dapat di klik
- Checkbox, memberikan pilihan dengan tanda centang
- Submit, membuat tombol yang akan mengirim data ketika di klik
- Reset, membuat tombol yang akan mengosongkan formulir ketika di klik
- Button, membuat tombol biasa yang mempunyai fungsi lain
Tambahan pada HTML 5,
- Color, memilih warna
- Time, memasukan waktu
- Number, memasukan khusus angka
- Range, memilih angka pada batas tertentu dengan cara menggeser slider
- Date, memasuka tanggal
- Email, memasukan email
- Url, memasukan alamat url
Berikut adalah contoh script
dengan nama file form_input.html
<html>
<head>
<title>Form</title>
</head>
<body>
<form method="post"action="proses.php">
<label for="nama">Nama</label>
<input type="text" id="nama"> <br>
<label for="password">password</label>
<input type="password" id="password"><br>
<label for="jk">Jenis Kelamin</label>
<input type="radio" id="jk" value="L" checked>Laki-laki
<input type="radio" id="jk" value="P" checked>Perempuan <br>
<label for="status">Status</label>
<input type="checkbox" value="Y" id="status"> Menikah
<br>
<label for="tanggal">Tanggal Lahir</label>
<input type="date" id="tanggal"> <br>
<label for="warna">Warna Favorit</label>
<input type="color" id="warna"><br>
<label for="hp">No.Hp</label>
<input type="number" id="hp"><br>
<label for="berat">Berat Badan</label>
<input type="range" id="berat"><br>
<label for="email">Alamat Email</label>
<input type="email" id="email"><br>
<label for="website">Website</label>
<input type="url" id="website"><br>
<label for="jam">Jam Kerja</label>
<input type="time" id="jam"><br>
<input type="submit" value="Simpan">
</form>
</body>
</html>
Yang akan ditampilkan ada browser sebagai berikut :
.png)
0 Komentar