Dibawah ini adalah contoh dari form Input untuk form input ini sebenarnya mempunyai banyak atribut seperti dalam pembuatan tabel ataupun paragraph tetapi untuk penjelasan tutorial ini saya hanya memberikan bagaimana cara membuat form input.
1. Input Text
Input Text
Hasil dari script di atas dapat dilihat seperti ini
2. Input Password
Input Password
Hasil dari script di atas dapat dilihat seperti di bawah ini
3. Input Tipe Radio
<html>
<title>Tipe Radio</title>
</body>
<form>
Jenis Kelamin<br>
<input type="radio" name="jk" value="pria" checked>Pria<br>
<input type="radio" name="jk" value="wanita">Wanita<br>
</form>
</body>
</html>
<title>Tipe Radio</title>
</body>
<form>
Jenis Kelamin<br>
<input type="radio" name="jk" value="pria" checked>Pria<br>
<input type="radio" name="jk" value="wanita">Wanita<br>
</form>
</body>
</html>
Hasil dari script di atas dapat dilihat seperti ini.
4. Input Tipe CekBok
<html>
<title>Tipe Cek Box</title>
</body>
<form>
Jenis Kendaraan yang dimiliki<br>
<input type="checkbox" name="kendaraan" value="Mobil">Mobil<br>
<input type="checkbox" name="kendaraan" value="Becak">Becak<br>
<input type="checkbox" name="kendaraan" value="Motor">Motor<br>
<input type="checkbox" name="kendaraan" value="Sepeda">Sepeda<br>
</form>
</body>
</html>
<title>Tipe Cek Box</title>
</body>
<form>
Jenis Kendaraan yang dimiliki<br>
<input type="checkbox" name="kendaraan" value="Mobil">Mobil<br>
<input type="checkbox" name="kendaraan" value="Becak">Becak<br>
<input type="checkbox" name="kendaraan" value="Motor">Motor<br>
<input type="checkbox" name="kendaraan" value="Sepeda">Sepeda<br>
</form>
</body>
</html>
Hasil dari script di atas dapat dilihat seperti ini
5. Input List Box
<html>
<title>Tipe ListBox</title>
</body>
<form>
Jenis Kendaraan yang dimiliki<br>
<select name="kendaraan" id="kendaraan">
<option value=""> Pilih Jenis Kendaraan</option>
<option value="Mobil"> Mobil</option>
<option value="Becak"> Becak</option>
<option value="Motor"> Motor</option>
<option value="Sepeda"> Sepeda</option>
</select>
</form>
</body>
</html>
<title>Tipe ListBox</title>
</body>
<form>
Jenis Kendaraan yang dimiliki<br>
<select name="kendaraan" id="kendaraan">
<option value=""> Pilih Jenis Kendaraan</option>
<option value="Mobil"> Mobil</option>
<option value="Becak"> Becak</option>
<option value="Motor"> Motor</option>
<option value="Sepeda"> Sepeda</option>
</select>
</form>
</body>
</html>
Hasil dari script di atas dapat dilihat seperti ini
Dan apabila kita menambahkan size pada <select>
<html>
<title>Tipe ListBox</title>
</body>
<form>
Jenis Kendaraan yang dimiliki<br>
<select name="kendaraan" id="kendaraan" size="6">
<option value=""> Pilih Jenis Kendaraan</option>
<option value="Mobil"> Mobil</option>
<option value="Becak"> Becak</option>
<option value="Motor"> Motor</option>
<option value="Sepeda"> Sepeda</option>
</select>
</form>
</body>
</html>
<title>Tipe ListBox</title>
</body>
<form>
Jenis Kendaraan yang dimiliki<br>
<select name="kendaraan" id="kendaraan" size="6">
<option value=""> Pilih Jenis Kendaraan</option>
<option value="Mobil"> Mobil</option>
<option value="Becak"> Becak</option>
<option value="Motor"> Motor</option>
<option value="Sepeda"> Sepeda</option>
</select>
</form>
</body>
</html>
Hasil dari script di atas dapat dilihat seperti ini
6. Tipe Button
<html>
<title>Tipe Button</title>
</body>
<form>
<input type="button" onclick="alert('Hai.... Selamat datang di Blog Saya')" value="Sapa!">
</form>
</body>
</html>
<title>Tipe Button</title>
</body>
<form>
<input type="button" onclick="alert('Hai.... Selamat datang di Blog Saya')" value="Sapa!">
</form>
</body>
</html>
Hasil dari script di atas dapat dilihat seperti ini
7. Tipe Tanggal
<html>
<title>Tipe Tanggal</title>
</body>
<form>
Masukkan Tanggal Lahir
<input type="date" name="lahir">
</form>
</body>
</html>
<title>Tipe Tanggal</title>
</body>
<form>
Masukkan Tanggal Lahir
<input type="date" name="lahir">
</form>
</body>
</html>
Hasil dari script di atas dapat dilihat seperti gambar di bawah
Semoga sedikit apa yang telah saya tuliskan di atas dapat berguna (Jika ingin belajar jangan pake Ilmu Copy Paste tapi silahkan diketik ulang supaya jari dan otak kita bisa menghafalnya).
0 Comments
