Minggu, 28 Oktober 2012

Membuat Daftar (Sign Up) pada HTML

Tentunya kalian pernah membuat ID Yahoo atau Gmail dan lain sebagainya, seperti pada gambar berikut :

Bagaimana caranya? Langsung kita masuk ke koding :)


<html>
<head>
    <title>Pertemuan 5</title>
</head>
<body>
   
    <form name="formulir"    method="post" action="ACO.html">

    <center>
    <table>
        <tr>
        <td colspan="2">
        <h5 style="width:280px;">Personal</h5>
        <hr />
            <tr>
            <td>Name</td> <td><input type="text" name="Cristoforus" value="" placeholder="First Name">
                            <input type="text" name="Kaunang" value="" placeholder="Last Name"></td>
            </tr>
            <tr>
            <td>Gender</td>
                <td><select style="width:280px;">
                <option value="">-Select One-</option>
                <option value="html">Male</option>
                <option value="html">Female</option>
                </select></td>
            </tr>
            <tr>
            <td>Birthday</td>
                <td><select>
                <option value="">-Select Month-</option>
                <option value="html">January</option>
                <option value="html">February</option>
                <option value="html">March</option>
                <option value="html">April</option>
                <option value="html">May</option>
                <option value="html">Juny</option>
                <option value="html">July</option>
                <option value="html">August</option>
                <option value="html">September</option>
                <option value="html">November</option>
                <option value="html">December</option>
                </select>
                <input type="text" name="" value="" style="width:40px;" placeholder="Day">
                <input type="text" name="" value="" style="width:40px;" placeholder="Year"></td>
            </tr>
            <tr>
                <td>Country</td>
                <td><select>
                <option value="">-Select Country-</option>
                <option value="html">Argentina</option>
                <option value="html">Bahrain</option>
                <option value="html">Costa Rica</option>
                <option value="html">Denmark</option>
                <option value="html">Ethiopia</option>
                <option value="html">France</option>
                <option value="html">Germany</option>
                <option value="html">Hungary</option>
                <option value="html">Indonesia</option>
                <option value="html">Jamaika</option>
                <option value="html">Karibia</option>
                </select></td>
            </tr>
            <tr>
                <td>Language</td>
                <td><select>
                <option value="">-Select Country-</option>
                <option value="html">Argentina</option>
                <option value="html">Bahrain</option>
                <option value="html">Costa Rica</option>
                <option value="html">Denmark</option>
                <option value="html">Ethiopia</option>
                <option value="html">France</option>
                <option value="html">Germany</option>
                <option value="html">Hungary</option>
                <option value="html">Indonesia</option>
                <option value="html">Jamaika</option>
                <option value="html">Karibia</option>
                </select></td>
            </tr>
        </td>
        </tr>
           
        <tr>
        <td colspan="2">
        <br />
        <br />
            <h5>Select an ID and Password</h5>
            <hr />
            <tr>
                <td>Itoo! ID and Email</td>
                <td><input type="text" name="chester_271291" value="" placeholder="chester_271291">
                    @
                    <select>
                    <option value="">-Select Email-</option>
                    <option value="html">itoo.com</option>
                    <option value="html">fapfap.com</option>
                    </select>
                </td>
            </tr>
           
            <tr>
            <td>Password</td><td><input type="password" name="mautaubanget" value=""></td>
            </tr>
           
            <tr>
            <td>Re-Type Password</td><td><input type="password" name="mautaubanget" value=""></td>
            </tr>
        </td>
        </tr>
       

        <tr>
        <td colspan="2">
        <br />
        <br />
            <h5>In case you forget your ID or Password ... </h5>
            <hr />
            <tr>
            <td>Alternate Email (optional)</td> <td><input type="text" name="" value="" placeholder="Alternate"></td>
            </tr>
            <tr>
            <td>Secret Question 1</td>
                <td><select>
                <option value="">-Select One-</option>
                <option value="html">Susu siapa yang paling enak?</option>
                <option value="html">Berapa PIKO meter "punya" Garry Hernandar?</option>
                <option value="html">Apa bahan bakar yang baik untuk kendaraan?</option>
                </td>
            </tr>
            <tr>
            <td>Your Answer</td> <td><input type="text" name="" value=""></td>
            </tr>
            <tr>
            <td>Secret Question 2</td>
                <td><select>
                <option value="">-Select One-</option>
                <option value="html">Mengapa Wisely Sugianto tidak masuk 2 hari?</option>
                <option value="html">Berapa 1 porsi Mie EFSE?</option>
                <option value="html">Apa minuman yang baik sehabis makan EFSE?</option>
                </td>
            </tr>
           
            <tr>
            <td>Your Answer</td> <td><input type="text" name="" value=""></td>
            </tr>
        </td>
        </tr>
    </table>
    </center>
    </form>
</body>
</html>

Panjang ya, saya jd males jelasinnya, wkwkwk
Pembuatan ini hanya menggunakan 1 tabel utama. Lalu ada pemakaian <option value.. > itu seperti pembuatan Combo Box yang dapat memilih dari isi Combo Box itu tersebut.
Dan penggunaan tulisan bayangan

<td>Alternate Email (optional)</td> <td><input type="text" name="" value="" placeholder="Alternate"></td>

<value placeholder> lah yang membuat tulisan "Alternate" bisa menjadi tulisan bayangan.
Sisanya penggunaman gabungan dari List dan Tabel.
Selamat mencoba, Terima Kasih :)

Tidak ada komentar:

Posting Komentar