Hosting Unlimited Indonesia

Minggu, 22 Maret 2015

Home » , » Ayo Belajar HTML (Membuat Form Input Tambahan) Part 04

Ayo Belajar HTML (Membuat Form Input Tambahan) Part 04

By No comments
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

 

  First name:
 
  Last name:
 
  Alamat:

Hasil dari script di atas dapat dilihat seperti ini
Nama Depan:

Nama Belakang:

Alamat:


2. Input Password

Input Password

 

  Masukkan ID:
 

 Masukkan Pasword:
 
               

Hasil dari script di atas dapat dilihat seperti di bawah ini
Masukkan ID:

Masukkan Pasword:


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>

Hasil dari script di atas dapat dilihat seperti ini.
Jenis Kelamin
Pria
Wanita

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>

Hasil dari script di atas dapat dilihat seperti ini
Jenis Kendaraan yang dimiliki
Mobil
Becak
Motor
Sepeda

 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>

Hasil dari script di atas dapat dilihat seperti ini
Jenis Kendaraan yang dimiliki

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>

Hasil dari script di atas dapat dilihat seperti ini
Jenis Kendaraan yang dimiliki

 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>

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>

Hasil dari script di atas dapat dilihat seperti gambar di bawah
Masukkan Tanggal Lahir

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).
Comments
0 Comments

0 komentar:

Posting Komentar