Advertisement here

contoh program form html dan penjelasanya

SOBAT WINDOWS
13 Mar, 2021

contoh program form html dan penjelasannya 


Daftar list

contoh program link html 

contoh program link html dan penjelasanya

contoh program form html

contoh program form html dan penjelasanya

contoh program html 5 dan semantik





<html>
    <head>
        <titel>
            <form pendaftaran></form>
        </titel>
    </head>
    <bodY>
        <form method="post" action="#">
            <fieldset>
                <legend><b>FORM PENDAFTARAN</b></legend>
                <table>
                    <tr>
                        <td>Nama Lengkap</td>
                        <td>:</td>
                        <td><input type="text" name="nama"/></td>
                    </tr>
                    <tr>
                        <td>Tempat Lahir </td>
                        <td>:</td>
                        <td><input type="text" name="text" /></td>
                    </tr>
                        <tr>
                    <td>Tanggal Lahir</td>
                    <td>:</td>
                    <td>
                        <input type="date" name="date" />
                    </td>
                    <tr>
                        <td>Agama</td>
                        <td>:</td>
                        <td><select name="agama">
                            <option value="">--pilih--</option> 
                            <option value="islam">islam</option>
                            <option value="protestan">protestan</option>
                            <option value="katolik">katolik</option>
                            <option value="hindu">hindu</option>
                            <option value="budha">budha</option>   
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Jenis Kelamin</td>
                        <td>:</td>
                        <td>
                            <input type="radio" name="jk" value="laki-laki" />
                            Laki-laki
                            <input type="radio" name="jk" value="perempuan" />
                            Perempuan
                        </td>
                    </tr>
                    </tr>
                    <tr>
                        <td>Alamat</td>
                        <td>:</td>
                        <td>
                        <textarea cols="25" rows="5"
                        placeholder="masukkan alamat di sini"></textarea> 
                        </td>
                        </tr>
                        <tr>
                        <td>E-mail</td>
                        <td>:</td>
                        <td><input type="text" name="text" /></td>
                        </tr>
                        <tr>
                        <td>No hp</td>
                        <td>:</td>
                        <td><input type="text" name="text" /></td>
                        </tr>
                        <tr>
                            <td>Kota</td>
                            <td>:</td>
                            <td><select name="kota">
                                <option value="">--pilih--</option> 
                                <option value="Bontang">Bontang</option>
                                <option value="Sangata">Sangata</option>
                                <option value="Samarinda">Samarinda</option>
                                <option value="Tenggarong">Tenggarong</option>
                                <option value="Balikpapan">Balikpapan</option>   
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                    <tr>
                    <td>
                        <input type="submit" value="kirim" />
                        <input type="reset" value="batal"/>
                    </td>
                </tr>
                </table>
            </fieldset>
        </form>  
    </bodY>
</html>

Keterangan baris :          

ü  Baris 8 :metode pengiriman data form.

ü  Baris 9-10 : fieldset mengelompokkan elemen-elemen pada form.sedangkan legend memberi judul pada kelompok elemen form.

ü  Baris 11-21 : <table>di gunakan untuk membuat table dan di dalamnya terdapat elemen pembentuk baris<tr> dan kolom<td>serta terdapat juga element yang di gunakan untuk memasukkan data bertipe karakter yang terdiri dari huruf,angka maupun symbol<input type=””>

ü  Baris 22-27 :membuat kolom dan membuat input tanggal,bulan,tahun.

ü  Baris 28-40 : <td>membuat kolom dan <select>membuat sebuah dropdown

Yang barisi daftar list<option>,serta value yang digunakan untuk menampung data yang dikirim atau di proses pada server atau halaman yang di tuju.

ü  Baris  41-49 : <td>membuat kolom dan membuat input pilihan yang tersedia serta <value> menampung data.

ü  Baris 52-69 : <td>membuat sebuah kolom dan <textarea>memasukkan teks lebih dari satu baris kemudian mengatur kolom dari text dan mengatur baris area.

ü  70-82 :<td> membuat sebuah kolom dan <select> sebuah dropdown yang barisi daftar list<option>, serta value yang di gunakan untuk menampung data yang dikirim atau di proses pada server atau halaman yang dituju.

ü  83-93 : membuat sebuah baris kolom dan menggunakan submit agar semua data dari elemen form dikirim ke server atau halaman lain Ketika di klik, kemudian juga menggunakan elemen reset yang di gunakakan untuk membersihkan data daru elemen form Ketika di klik


Next Post Previous Post
No Comment
Add Comment
comment url