Home » HtmlPHP » Tipe Tipe HTML Form dan Input

Tipe Tipe HTML Form dan Input

Membuat Tipe tipe pada input di HTML - Pada kesempatan kali ini, saya akan membagikan script tentang tipe tipe yang terdapat pada form di html, layaknya tipe text field, dan submit yang kita temukan pada postingan sebelumnya . Adapun tipe tipe yang akan kita buat yaitu

1. Text Field
2. Password Field
3. Radio Button
4. Checkbox
5. Submit Button
6. Email Field
7. Date
8. Text Area
    sebenarnya ada lebih dari 8 tipe, tapi disini kita hanya membahas 8, soalnya hanya 8 tipe itulah yang sering digunakan. Dalam penggunaannya, disini kita menggunakan Form dan table, kita menggunakan table agar tampilannya lebih rapi.  berikut script utamanya

    Buka Script:

    <html>
    <head>
    <title>Tipe HTML dan Input</title>
    </head>
    <body>
    isi conten(tipe)
    </body>
    </html>


    berikut script tipe inputnya 

    #TextField

    Nama
    NIM
    Buka Script:

    <form>
    <table border="0">
    <tr>
    <td>Nama</td>
    <td><input type="text" name="nama" size="15"/></td>
    </tr>
    <tr>
    <td>NIM</td>
    <td><input type="text" name="nim" size="15"/></td>
    </tr>
    </table>
    </form>

    #PasswordField
    Password
    Buka Script:

    <form>
    <table border="0">
    <tr>
    <td>Password</td>
    <td><input type="password" name="password" size="15"/></td>
    </tr>
    </table>
    </form>

    #RadioButton
    Jenis Kelamin:     Laki Laki    Perempuan


    Buka Script:

    <form>
    <table border="0">
    <tr>
    <td>Jenis Kelamin: </td>
    <td><input type="radio" name="jk" value="L"/>Laki Laki</td>
    <td><input type="radio" name="jk" value="P"/>Perempuan</td>
    </tr>
    </table>
    </form>

    #CheckBox
    Katagori: Web Artikel Buku 
    Buka Script:

    <form>
    <table border="0">
    <tr>
    <td>Katagori: </td>
    <td><input type="checkbox" name="katagori" value="artikel"/> Web Artikel </td>
    <td><input type="checkbox" name="katagori" value="buku"/> Buku </td>
    </tr>
    </table>
    </form>

    #SubmitButton
    Nama:
    Buka Script:

    <form method="post" action="simpan.php">
    <table border="0">
    <tr>
    <td>Nama: </td>
    <td><input type="text" name="nama" size="15"/> </td>
    <td><input type="submit" name="proses" value="Simpan"/></td>
    </tr>
    </table>
    </form>


    #EmailField
    Masukkan Email:
    Buka Script:

    <form>
    <table border="0"><tbody>
    <tr> <td>Masukkan Email: </td> <td><input name="email" size="15" type="email" /> </td> </tr>
    </tbody></table>
    </form>


    #Date
    Tanggal Lahir:
    Buka Script:

    <form>
    <table border="0"><tbody>
    <tr> <td>Tanggal Lahir: </td> <td><input name="tanggal" type="date" /> </td> </tr>
    </tbody></table>
    </form>


    #TextArea
    Alamat:
    Buka Script:

    <form>
    <table border="0"><tbody>
    <tr> <td>Alamat: </td> <td><textarea name="alamat" cols="55" rows="10"/></textarea></td> </tr>
    </tbody></table>
    </form>



    Semoga Bermanfaat


    Artikel Terkait:

    gaga

    0 comments:

    Ada pertanyaan?? Silahkan tanyakan di kotak komentar .. :)

    Subscribe to: Post Comments (Atom)