Membuat Form Mahasiswa dengan HTML [Part 1]

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.

INPUT DATA MAHASISWA

Nama : NPM : No. HP : Mata Kuliah : PemrogramanInternet dan E-commerce Pemrograman Berorientasi Objek Sistem Operasi Grafika Komputasi Metode Numerik Teori Bahasa Automata Bahasa Inggris Jam : <select name="jam"> -- Jam Kuliah -- Senin, 08.00 WIB Senin, 14.00 WIB Selasa, 08.00 WIB Selasa, 11.00 WIB Selasa, 14.00 WIB Rabu, 11.00 WIB Kamis, 09.00 WIB Saran/Komentar : 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 yang di gunakan untuk membuat document html. Tag di gunakan untuk membuat title dari html yang kita buat atau menambahkan script css maupun java script. Pada tag untuk menuliskan semua struktur html yang di perlukandalam membuat form, dalam tag ini lah kita bebas berkreasi untuk menambahkan atribut-atribut guna memberikan hasil form yang terbaik. Tag di gunakan untuk mengatur pengolahan form. Pada tag 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 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 digunakan untuk membuat baris pada tabel. Pada kasus ini menggunakan tabel supaya semua form baik inputan dan hasil output terlihat rapi. Pada tag 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 di gunakan untuk membuat kolom. Seperti yang di jelaskan di atas tag selanjuta nya terdapat tag input yang di gunakan menampilkan field yang dapat di gunakan untuk melakukan input data berupa nama. Dalam tag 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 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. 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 dan di akhiri . 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. untuk menutup tag yang di gunakan untuk mebuat table. Tag untuk menutup tag yang di gunakan untuk penangan file. Tag untuk menutup tag serta tag untuk mengakhiri tag 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 × Report "Membuat Form Mahasiswa dengan HTML [Part 1]" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close