Minggu, 07 Oktober 2012

Pembuatan Form pada HTML

Diberikan sebuah contoh seperti pada gambar berikut :

Bagaimana caranya? Mari kita bahas.



<html>
<head>
    <title>Pertemuan 4</title>
    <style type="text/css">
    .form
    {
        margin:20px 100px;
    }
    </style>
</head>
<body>
    <img src="portal.jpg">
<table width = 100% height = 70%>

    <tr>
    <td>
        <center>
        <table width = 20% height = 30%>
        <div class="form">
        <h3 align="center"> LOGIN</h3>
            <form><tr>
            <td>Nama</td>        <td>:</td> <td><input type="text" name="nama"><br></td></tr>
            <tr>
            <td>Password</td>    <td>:</td> <td><input type="text" name="password"></td>
            </form></tr>
        </div>
        </center>
    </table>
   
    <button type="button">Masuk</button>
    </td>
    </tr>

    <tr>
    <td align="center"><hr />
        Universitas Bunda Mulia
    </td>
    </tr>

</table>

</body>
</html>

Terdapat fungsi <style> itu kita sudah mulai memakai CSS. CSS akan kita bahas lebih lanjut lagi setelah kita menggunakan HTML untuk pemula :)
Pembuatan Form pada HTML menggunakan fungsi <form> pada bagian <body>. Didalam <form> kita berikan sebuah label "Nama" dan ":" lalu untuk TextBoxnya menggunakan fungsi <input> dan dengan <type> "text" lalu ada "name" itu untuk penyesuaian kalimat seperti jika NIM salah atau Password tidak benar.
Lalu juga ada <button> untuk membuat tombol.
\
Hampir saja saya lupa, mengapa saya menggunakan <table> ? Itu agar form terlihat rapi. Jika saya gunakan <Border> pada tabel, maka akan seperti gambar dibawah ini

Selamat Mencoba ^^



Tidak ada komentar:

Posting Komentar