Thursday, September 11, 2014

Input Type HTML

Sebelum belajar <form> di html, perlu mengenal cara membuat komponen-komponen yang ada pada form, seperti kotak isian (text box), submit, button, checkbox, radio, password, file, reset dan lainnya. Ini adalah beberapa komponen yang diletakkan dalam suatu form. Jadi, sebelum membuat form, tahap awal yaitu mempalajari bagaimana cara membuat komponen itu, yang disebut dengan input type pada html.

- Text
Type text digunakan untuk membentuk kotak isian.

- Submit
Type submit digunakan untuk membuat tombol submit pada form (tombol ekesekusi) yang ditargetkan pada action.

-Button
Type button digunakan untuk membuat tombol tetapi defaultnya tidak ada aksi, kecuali jika memang diberikan seperti melalui javascript dengan parameter id. Berbede dengan submit yang khusus untuk eksekusi.

- Checkbox
Type checkbox digunakan untuk memilih pilihan dengan memberi tanda centang. Pilihan boleh lebih dari satu. Jika ingin membuat pilihan terpilih secara default, beri nilai checked.

-Radio
Type radio mirip dengan checkbox dar segi fungsi, tetapi berbeda dalam tampilan, dan hanya satu pilihan yang dapat dipilih dalam satu waktu.

- Password
Type password digunakan untuk membuat teks isian dalam bentuk password (bulat-bulat hitam), ketika teks dimasukkan ke dalamnya.

- File
Type file digunakan untuk upload file dokumen (gambar, file, video).

- Reset
Type reset digunakan untuk membatalkan (mereset) form, mengembalikan keadaan form seperti semula.

-Hidden
Type hidden digunakan untuk membuat suatu elemen yang tidak tampak tetapi ada, nilainya akan dikirimkan ke server (via php).

Elemen penting lain form adalah <textarea>, meskipun bukan tergolong ke dalam input type - tetapi berdiri sendiri. Textarea digunakan untuk membuat teks isian, tempat menulis isi artikel jika dijelaskan lebih sederhana, sedangkan text isian biasa - untuk judul artikel. Lebih gamblangnya seperti itu.

Elemen kedua adalah <select> untuk membuat daftar pilihan secara vertikal. Hanya satu pilihan yang dapat dipilih dalam satu waktu.

Dari penjabaran di atas, berikut penulisannya dalam kode html. input.html:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Input type html</title>
            <!-- Css ini hanya tambahan, hanya untuk mempercantik tampilan
            elemen form, tidak menjadi syarat.
            -->
            <style type="text/css">
            body{background-color:#F5F5F5;}
            input{border:1px solid #BFBFBF;padding:6px;margin-bottom:5px;}
            input.sz{width:300px;}
            input:focus{border:1px solid #000;}
            .bt{padding:6px;font-weight:bold;-moz-border-radius:2px;
            -webkit-border-radius:2px;border-radius:2px;border:1px solid #2D6066;
            width:100px;background-color:#03B9D0;color:#fff;
            }
            .bt:hover{
            background-color :#02AABF;-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
            -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
            box-shadow: 0 0 1px rgba(0,0,0, .75);
            border:1px solid #2E3131;
            }
            textarea{width:500px;height:300px;font-family:Tahoma, Verdana; font-size:12px;}
            </style>
        </head>
    <body>
    <form>
    <!-- text-->
    <input type="text" maxlength="40" name="nama" class="sz" />
    <br />
    <!-- submit-->
    <input type="submit" value="Simpan" class="bt"/>
    <br />
    <!-- button-->
    <input type="button" value="Go" class="bt"/>
    <br />
    <!-- checkbox-->
    <input type="checkbox" name="pisang" value="Pisang" checked> Pisang
    <input type="checkbox" name="apel" value="Apel"> Apel
    <input type="checkbox" name="melon" value="Melon"> Melon
    <input type="checkbox" name="Pir" value="Melon" checked> Pir

    <br />
    <!-- radio-->
    <input type="radio" name="radio1" value="Pisang" checked> Pisang
    <input type="radio" name="radio1" value="Apel"> Apel
    <input type="radio" name="radio1" value="Melon"> Melon
    <input type="radio" name="radio1" value="Melon"> Pir

    <br />
    <!-- password-->
    <input type="password" maxlength="20" class="sz" name="mypass" />
    <br />
    <!-- file-->
    <input type="file" name="fileU" class="sz" />
    <br />
    <!-- file-->
    <input type="reset" value="Batalkan" class="bt"/>
    <br />
    <!-- hidden-->
    <input type="hidden" value="123dh3298ag3" name="idunik"/>
    <br />
    <!-- texarea-->
    <textarea name="txtarea"></textarea>
    <br />
    <!-- select-->
    <select name="pilih">
    <option value="arsenal">Arsenal</option>
    <option value="chelsea">Chelsea</option>
    <option value="mu">Manchester United</option>
    <option value="lvpool">Liverpool</option>

    <br />
    <br />
    </select>
    </form>
    </body>
</html>


Keterangan: Penambahan atribut class digunakan untuk memanggil css, bukan bagian dari input type.

Tampilan input type.

^Baca juga: Membuat form dengan tag <form>.

Referensi tulisan:
  1. <input>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 11 September 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

No comments:

Post a Comment