Membuat Form Mahasiswa dengan HTML [Part 1]

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat Form Mahasiswa dengan HTML [Part 1]"

Budi Darmali
7 tahun lalu
Tontonan:

2 Membuat Form Mahasiswa dengan HTML [Part 1] Oleh: Fajar Hakiki Selamat malam sahabat Jago Coding, pada malam yang indah 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. Aslmu'alaikum Wr.Wb Selamat malam sahabat Jago Coding, pada malam yang indah 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. Berikut source code untuk mebuat form dengan nama index.html. <html> <head><title>data MAHASISWA</title></head> <body> <form action="proses.php" method="post"> <table width="452" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000" style="padding: 2px"> <td height="40" align="center" bgcolor="#000"><font color="#ffffff"> <b>input DATA MAHASISWA</b></font></td> <td bgcolor="#ffffff"><table width="452" border="0" align="center" cellpadding="5" cellspacing="0"> <td width="113">nama</td><td width="11">:</td> <td width="237"><input name="nama" type="text" size="30" maxlength="30"></td> <td>npm</td> <td><input name="npm" type="text" size="" maxlength="30"></td>

3 <td>no. HP</td> <td><input name="hp" type="text" size="30" maxlength="30"></td> <td>mata Kuliah</td> <td> value="pemrogramaninternet dan E-commerce">PemrogramanInternet dan E-commerce<br> value="pemrograman Berorientasi Objek">Pemrograman Berorientasi Objek<br> value="sistem Operasi">Sistem Operasi<br> value="grafika Komputasi">Grafika Komputasi<br> value="metode Numerik">Metode Numerik<br> value="teori Bahasa Automata">Teori Bahasa Automata<br> value="bahasa Inggris">Bahasa Inggris<br> </td> <td>jam</td> <td> <select name="jam"> <option>-- Jam Kuliah --</option> <option>senin, WIB</option> <option>senin, WIB</option> <option>selasa, WIB</option> <option>selasa, WIB</option> <option>selasa, WIB</option> <option>rabu, WIB</option> <option>kamis, WIB</option> </select> </td> <td>saran/komentar</td> <td><textarea name="saran" cols="30" rows="5"></textarea></td>

4 value="simpan"> </td> </table> </form> </body> </html> <td></td> <td></td> <td><input type="submit" name="submit" Penjelasan source code program : 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, npm mahasiswa, no hp mhasiswa, mata kuliah yang di ambil oleh mahasiswa, jam kulian sesuai mata kuliah yang di pilih serta memberika komentar bagi masing2 mahasiswa. 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 digunakan untuk mebuat baris pada tabel di tutup dengan. Tag <td> di gunakan untuk membuat kolom. Seperti yang di jelaskan di atas tag 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 npm dan No. HP semuanya tersusun rapi dengan baris dan kolom. Masing-masing field memiliki size yang sama dengan maxlength (panjang huruf) yang di bisa di

5 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 yangtelah di tentukan maka inputan karakter ke 31 tidak akan di tampilkan pada field. Seperti inputan yang lainnya, dalam inputan jenis radio button ini masih menggunakan baris dan kolom supaya tertata rapi. Inputan radio buton ini di gunakan untuk memasukkan mata kuliah yang telah di definisikan sebelumnya pada source code index.php. Pada radio button ini name nya harus sama untuk semua radio button yaitu matkul. Namun, untuk value semua nya harus berbeda antar satu sama lain. Di kerenakan value ini lah yang kan di tampilkan pada output ketika data mata kuliah di pilih. Selanjutnya kita hanya menulis mata kuliah apa saja yang di ambil supaya terlihat di form mahasiswa sebelum di inputkan. Selanjutnya untuk menetukan jam kuliah sesuai dengan mata kuliah yang ada. Untuk menentukan jam kuliah kita menggunakan jenis inputan berupa combo box. Untuk membuat inputan jenis combo box, bisa di gunakan tag <select> dan<option>. Pada form inputan jenis check box, namedi letakkan pada tag <select>. Selain itu, user yang mingisi data dapat memilih satu pilihan yang di tampilkan berupa drop down list. Untuk mengambil nilai (value) dari form jenis combo box, dapat langsung mengaksesnya sesuai dengan name nya. Selanjutanya untuk menampilkan saran dan komentar bisa menggunakan text area. Untuk membuat inputan jenis text area bisan menggunakan tag <textarea> dan di akhiri </textarea>. Berbeda dengan inputan text hanya bisa menginput baris text area. Untuk mengambil nilai atu value dari form jenis text area, bisa langsung mengaksesnya sesuai dengan namenya. 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. 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. Sekian, akan di lanjutkan pada tutorila selanjutnya untuk menampilkan data inputan pada form. Terimakasih, semoga bermanfaat :) Tentang Penulis Fajar Hakiki My name is Fitrian Fajar Hakiki, Informatics Engineering students at UNIB. I Love My Fams, My Sis, My Bro, My Friend, & everything. I'm Little Progremmer. I'm Young Entrepreneur. I have DREAMS but I'm not a DREAMER

dokumen-dokumen yang mirip

Penggunaan Operator - operator pada PHP

Penggunaan Operator - operator pada PHP Oleh: Fajar Hakiki Selamat malam sahabat Jago Coding, pada malam yang indah ini saya akan membahas tentang operator-operator pada php. Berikut akan di sajikan source