Selamat soreeee sahabat Kumpulan Artikel TI, pada Sore yang cerah ini saya akan berbagi tutorial tentang membuat form sederhana dengan html. pada tutorial ini, kita hanya membuat desain tampilan form saja. Pada tutorial selanjutnya akan di buat bagaimana menampilkan data yang telah di inputkan pada form.
Okee, langsung saja kita coba okeeyyyyy...
Berikut source code untuk mebuat form dengan nama index.html.
Berikut ini beberapa penjelasan tentang source code:
Dalam membuat form ini diperlukan beberap tag inputan berupa input text, combo box, radio button, dan text area. Dimana masing-masing input ini digunakan untuk masukkan nama mahasiswa, nim mahasiswa, jurusan mhasiswa,
Dalam membuat struktur html kita perlu membuat beberapa tag-tag yang harus ada pada data html itu sendiri. Pada source code di atas terdapat tag <html> yang di gunakan untuk membuat document html. Tag <head> di gunakan untuk membuat title dari html yang kita buat atau menambahkan script css maupun java script.
Pada tag <body> untuk menuliskan semua struktur html yang di perlukandalam membuat form, dalam tag <body>ini lah kita bebas berkreasi untuk menambahkan atribut-atribut guna memberikan hasil form yang terbaik.
Tag <form> di gunakan untuk mengatur pengolahan form. Pada tag <form> di atas method yang di gunakan berupa post. Method dari sebuah form menentukan bagaimana data inputan form di kirim. Action dari sebuah form mementukan di mana data inputan dari form diproses. Action pada index,php ini yaitu proses.php semua data yang di inputkan akan di proses di dalam proses.php (pada tutorial selanjutnya).
Tag <table> di gunakan membuat tabel. Di dalam tabel terdapat atribut width untuk menentukan lebar tabel, border untuk menentukan border pada tabel, align untuk mengatur posisi tabelyang di buat, cell padding menentukan jarak antar cell, cell spacing untuk menentukan jarak spasi antar cell, bg color untuk mentukan warna tabel dan padding untuk menentukan jarak padding dari tabel.
Tag <tr> digunakan untuk mebuat baris pada tabel di tutup dengan </tr>.
Tag <td> di gunakan untuk membuat kolom.
Tag <td> di gunakan untuk membuat kolom.
Seperti yang di jelaskan di atas tag <tr> digunakan untuk membuat baris pada tabel. Pada kasus ini menggunakan tabel supaya semua form baik inputan dan hasil output terlihat rapi. Pada tag <td> selanjuta nya terdapat tag input yang di gunakan menampilkan field yang dapat di gunakan untuk melakukan input data berupa nama. Dalam tag <input> juga terdapat atribut name=nama di gunakan pada proses.php dengan type input berupa text dan size input ini 30 merupakan panjang dari field yang di buat serta maxlength merupakan panjang huruf yang dapat di inputkan.
Sama hal nya dengan nim,nama,alamat semuanya tersusun rapi dengan baris dan kolom. Masing-masing field memiliki size yang sama dengan maxlength (panjang huruf) yang di bisa di masukkan sebanyak 30 karakter. Pada maxlength ini kita hanya bisa memasukkan inputan sebanyak karakter yang telah di tentukan pada atribut nya. Jika kita memasukkan inputan kurang dari atau sama dengan panjang karakter data yang inputkan masing akan terlihat di field nya. Namun, jika kita memasukkan inputan lebih dari maxlength yang telah di tentukan maka inputan karakter ke 31 tidak akan di tampilkan
pada field.
pada field.
Selanjutanya untuk menampilkanya. Maka semua
yang di inputkan akan tampil. <td><input type="submit" name="submit" value="SIMPAN"> </td> Pada source code di atas merupakan button simpan untuk manyimpan data yang telah di inputkan dari semua jenis inputan. Inputan ini bertipe submit
dengan nama submit. Value untuk menampilkan “SUBMIT” button pada form mahasiswa.
yang di inputkan akan tampil. <td><input type="submit" name="submit" value="SIMPAN"> </td> Pada source code di atas merupakan button simpan untuk manyimpan data yang telah di inputkan dari semua jenis inputan. Inputan ini bertipe submit
dengan nama submit. Value untuk menampilkan “SUBMIT” button pada form mahasiswa.
Tag </table> untuk menutup tag <table> yang di gunakan untuk mebuat table. Tag </form> untuk menutup tag <form> yang di gunakan untuk penangan file. Tag </body> untuk menutup tag <body> serta tag </html> untuk mengakhiri tag <html> pada doc html.
Terimakasih, semoga bermanfaat..
Tidak ada komentar:
Posting Komentar