/*membuat pemutar video*/
SELAMAT DATANG DI "msaehulhadi.blogspot.com" Silahkan Download atau unduh tutorial yang anda inginkan jika itu bermanfa'at....!!

Senin, 09 Februari 2015

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. Dan jika menggunakan tabel agar lebih rapi, serta 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.
ini utnuk koding htmlnya..

<html>
<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>
</html>


 hasilnya adalah :


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

Tidak ada komentar:

Posting Komentar