SlideShare a Scribd company logo
1 of 12
WEBSITE FORM
Rifqi Safrian
17050974020
APAKAH FORM ITU???
Form merupakan salah satu bentuk halaman web yang
digunakan untuk menerima masukan dari pengguna, untuk
selanjutnya masukan dari pengguna tersebut diolah
menggunakan bahasa pemrograman web, baik secara server side
scripting(misalkan PHP, JSP) ataupun client-side scripting
(javascript). Form dapat digunakan untuk berbagai keperluan
seperti keperluan login, transaksi penjualan, mengumpulkan
informasi atau meminta feedbackdari pengguna, menawarkan
barang/jasa secara on-line dan sebagainya. Form sangat sering
kita jumpai dalam satu aplikasi sistem informasi berbasis web.
FORMAT UMUM PENULISAN PADA
FORM
Berikut ini adalah beberapa variasi yang dapat diterapkan pada atribut
<form>
Di antara elemen <form> dan </form> digunakan elemen – elemen HTML
<input> yang berfungsi untuk mendefinisikan input yang akan dimasukkan oleh
pengguna. Format umum dari penulisan elemen HTML <input> adalah sebagai
berikut :
Pada jenis masukan (input) dari halaman web minimal harus mempunyai atribut jenis (type),
nama (name) dan nilai (value) default. Disamping atribut type, masing-masing elemen input memiliki
atribut-atribut yang lain dan beberapa atribut tersebut berlaku untuk beberapa jenis elemen input.
Sebagai contoh adalah elemen <input> yang atribut TYPE-nya adalah text memiliki atribut antara
lain :
Name untuk menamai kotak
Value untuk menandai atau menampung
teks
Size mengatur ukuran teks pada kotak
Maxlength menentukan panjang maksimum
teks
3) CARA KERJA FORM
Form HTML digunakan untuk melewatkan data dari klien ke server. Kerja
Web bekerja didasarkan pada arsitektur client / server yang sangat dasar yang
dapat diringkas sebagai berikut : klien (web browser ) mengirim permintaan ke
server (misalnya apache , nginx , IIS , Tomcat , dan lain sebagainya ) ,
menggunakan protokol HTTP . Server menjawab requets dari form dengan
menggunakan protokol yang sama .
ELEMEN FORM HTML
TAG DESKRIPSI FORMAT UMUM TAG
<form> Mendefinisikan untuk form
bagi user
<form> </form>
<input> Mendefinisikan kontrol input
pada form
<form>
<input type="submit" value="Submit">
</form>
<textarea
>
Mendefinisikan kontrol input
berupa area teks pada form
<textarea rows="4" cols="50">………</textarea>
<label> Mendefinisikan label pada
tag elemen <input>
<form action="demo_form.asp">
<label for="buku">Buku</label>
<input type="radio" name="barang" id="buku" value="buku"><br>
</form>
<fieldset
>
Group dengan element yang
berhubungan satu sama lain didalam
form
<form> <fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset> </form >
<legend
>
Mendefinisikan judul untuk elemen
<fieldset>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset> </form>
<select> Merupakan daftar secara drop-down <select>
<option value="volvo">Volvo</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<button
>
Merupakan tombol yang dapat diklik <button type="button">Klik disini!</button>
reset Tombol untuk mengosongkan field
yang telah diisi
<INPUT TYPE=RESET>
CONTOH FORM SEDERHANA
<html>
<head>
<title> Form 1 </title>
</head>
<body>
<form name=”form1” method=”POST” action=”inputdata.php”>
Nama : <input type="text" name="nama"> <br><br>
Kelas: <input type="text" name="kelas" maxlength="2"> <br><br>
No : <input type="text" name="nomor" value="10"> <br><br>
Hobby: <input type="text" name="hobby" size="8"> <br><br>
Password: <input type="password" name="password">
<br><br>
<input type="submit" name="submit" value="Submit">&nbsp;&nbsp;&nbsp;<input type="reset"
name="reset" value="Reset">
</form> </body> </html>
TAMPILAN
FIN

More Related Content

Similar to Website form

Tugas atpi hania amani & puteri shafira nasution
Tugas atpi hania amani & puteri shafira nasutionTugas atpi hania amani & puteri shafira nasution
Tugas atpi hania amani & puteri shafira nasution
Febriy Y
 
Laporan pemrograman visual3
Laporan pemrograman visual3Laporan pemrograman visual3
Laporan pemrograman visual3
Fenty Hidayati
 
Tugas atpi arif rohman khakim dan samuel setiado
Tugas atpi arif rohman khakim dan samuel setiadoTugas atpi arif rohman khakim dan samuel setiado
Tugas atpi arif rohman khakim dan samuel setiado
Febriy Y
 

Similar to Website form (20)

Tugas atpi hania amani & puteri shafira nasution
Tugas atpi hania amani & puteri shafira nasutionTugas atpi hania amani & puteri shafira nasution
Tugas atpi hania amani & puteri shafira nasution
 
Tugas 3 matkul rekayasa web 0317
Tugas 3 matkul rekayasa web 0317Tugas 3 matkul rekayasa web 0317
Tugas 3 matkul rekayasa web 0317
 
Tugas7 ku-0316-dody alfad-1511510669
Tugas7 ku-0316-dody alfad-1511510669Tugas7 ku-0316-dody alfad-1511510669
Tugas7 ku-0316-dody alfad-1511510669
 
webdesign dasar : 08 form
webdesign dasar : 08 formwebdesign dasar : 08 form
webdesign dasar : 08 form
 
Cara Membuat Web Dasar
Cara Membuat Web DasarCara Membuat Web Dasar
Cara Membuat Web Dasar
 
Pemrograman-Berbasis-Web-Pertemuan-1.ppt
Pemrograman-Berbasis-Web-Pertemuan-1.pptPemrograman-Berbasis-Web-Pertemuan-1.ppt
Pemrograman-Berbasis-Web-Pertemuan-1.ppt
 
Tugas 7 rekayasa web 1312510231 Rostarina
Tugas 7 rekayasa web 1312510231 RostarinaTugas 7 rekayasa web 1312510231 Rostarina
Tugas 7 rekayasa web 1312510231 Rostarina
 
Tugas 7 – rekayasa web
Tugas 7 – rekayasa webTugas 7 – rekayasa web
Tugas 7 – rekayasa web
 
Tugas7 rekayasa web Ajat Sudrajat
Tugas7 rekayasa web Ajat SudrajatTugas7 rekayasa web Ajat Sudrajat
Tugas7 rekayasa web Ajat Sudrajat
 
Tugas 7 – rekayasa web
Tugas 7 – rekayasa webTugas 7 – rekayasa web
Tugas 7 – rekayasa web
 
Tugas 3 Pemrograman API
Tugas 3 Pemrograman APITugas 3 Pemrograman API
Tugas 3 Pemrograman API
 
Modul 2-form html-css
Modul 2-form html-cssModul 2-form html-css
Modul 2-form html-css
 
05. Affiliate Marketing & Webservices
05. Affiliate Marketing & Webservices05. Affiliate Marketing & Webservices
05. Affiliate Marketing & Webservices
 
Laporan pemrograman visual3
Laporan pemrograman visual3Laporan pemrograman visual3
Laporan pemrograman visual3
 
Tugas 7 ku– 0316 1311511529
Tugas 7   ku– 0316 1311511529Tugas 7   ku– 0316 1311511529
Tugas 7 ku– 0316 1311511529
 
Laporan
LaporanLaporan
Laporan
 
Edwinprassetyo-1100631028-tugas1
Edwinprassetyo-1100631028-tugas1Edwinprassetyo-1100631028-tugas1
Edwinprassetyo-1100631028-tugas1
 
Pemrograman Internet - HTML (2)
Pemrograman Internet - HTML (2)Pemrograman Internet - HTML (2)
Pemrograman Internet - HTML (2)
 
Tugas atpi arif rohman khakim dan samuel setiado
Tugas atpi arif rohman khakim dan samuel setiadoTugas atpi arif rohman khakim dan samuel setiado
Tugas atpi arif rohman khakim dan samuel setiado
 
Pengertian Microsoft Office InfoPath.docx
Pengertian Microsoft Office InfoPath.docxPengertian Microsoft Office InfoPath.docx
Pengertian Microsoft Office InfoPath.docx
 

Recently uploaded

Kisi kisi Ujian sekolah mata pelajaran IPA 2024.docx
Kisi kisi Ujian sekolah mata pelajaran IPA 2024.docxKisi kisi Ujian sekolah mata pelajaran IPA 2024.docx
Kisi kisi Ujian sekolah mata pelajaran IPA 2024.docx
FitriaSarmida1
 
,,,,,,,,,,,,,,,,,,,,,,Swamedikasi 3.pptx
,,,,,,,,,,,,,,,,,,,,,,Swamedikasi 3.pptx,,,,,,,,,,,,,,,,,,,,,,Swamedikasi 3.pptx
,,,,,,,,,,,,,,,,,,,,,,Swamedikasi 3.pptx
furqanridha
 
Surat Pribadi dan Surat Dinas 7 SMP ppt.pdf
Surat Pribadi dan Surat Dinas 7 SMP ppt.pdfSurat Pribadi dan Surat Dinas 7 SMP ppt.pdf
Surat Pribadi dan Surat Dinas 7 SMP ppt.pdf
EirinELS
 
ATP MM FASE E MATEMATIKA KELAS X KURIKULUM MERDEKA
ATP MM FASE E MATEMATIKA KELAS X KURIKULUM MERDEKAATP MM FASE E MATEMATIKA KELAS X KURIKULUM MERDEKA
ATP MM FASE E MATEMATIKA KELAS X KURIKULUM MERDEKA
VeonaHartanti
 
kerajaan-kerajaan hindu-budha di indonesia.ppt
kerajaan-kerajaan hindu-budha di indonesia.pptkerajaan-kerajaan hindu-budha di indonesia.ppt
kerajaan-kerajaan hindu-budha di indonesia.ppt
putrisari631
 

Recently uploaded (20)

Dokumentasi Penilaian Kinerja-Disiplin Positif-Aprilia.docx
Dokumentasi Penilaian Kinerja-Disiplin Positif-Aprilia.docxDokumentasi Penilaian Kinerja-Disiplin Positif-Aprilia.docx
Dokumentasi Penilaian Kinerja-Disiplin Positif-Aprilia.docx
 
MATERI TENTANG SUMBER ENERGI KELAS 4 TEMA 2 K13
MATERI TENTANG SUMBER ENERGI KELAS 4 TEMA 2 K13MATERI TENTANG SUMBER ENERGI KELAS 4 TEMA 2 K13
MATERI TENTANG SUMBER ENERGI KELAS 4 TEMA 2 K13
 
MODUL AJAR IPAS KELAS 5 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 5 KURIKULUM MERDEKA.pdfMODUL AJAR IPAS KELAS 5 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 5 KURIKULUM MERDEKA.pdf
 
Modul Ajar IPAS Kelas 4 Fase B Kurikulum Merdeka [abdiera.com]
Modul Ajar IPAS Kelas 4 Fase B Kurikulum Merdeka [abdiera.com]Modul Ajar IPAS Kelas 4 Fase B Kurikulum Merdeka [abdiera.com]
Modul Ajar IPAS Kelas 4 Fase B Kurikulum Merdeka [abdiera.com]
 
Kisi kisi Ujian sekolah mata pelajaran IPA 2024.docx
Kisi kisi Ujian sekolah mata pelajaran IPA 2024.docxKisi kisi Ujian sekolah mata pelajaran IPA 2024.docx
Kisi kisi Ujian sekolah mata pelajaran IPA 2024.docx
 
MODUL AJAR BAHASA INDONESIA KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INDONESIA KELAS 3 KURIKULUM MERDEKA.pdfMODUL AJAR BAHASA INDONESIA KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INDONESIA KELAS 3 KURIKULUM MERDEKA.pdf
 
SISTEM SARAF OTONOM_.SISTEM SARAF OTONOM
SISTEM SARAF OTONOM_.SISTEM SARAF OTONOMSISTEM SARAF OTONOM_.SISTEM SARAF OTONOM
SISTEM SARAF OTONOM_.SISTEM SARAF OTONOM
 
Materi Pertemuan 3 Bagian 2Materi Pertemuan 3 Bagian 2.pptx
Materi Pertemuan 3 Bagian 2Materi Pertemuan 3 Bagian 2.pptxMateri Pertemuan 3 Bagian 2Materi Pertemuan 3 Bagian 2.pptx
Materi Pertemuan 3 Bagian 2Materi Pertemuan 3 Bagian 2.pptx
 
MODUL AJAR MATEMATIKA KELAS 5 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 5 KURIKULUM MERDEKA.pdfMODUL AJAR MATEMATIKA KELAS 5 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 5 KURIKULUM MERDEKA.pdf
 
,,,,,,,,,,,,,,,,,,,,,,Swamedikasi 3.pptx
,,,,,,,,,,,,,,,,,,,,,,Swamedikasi 3.pptx,,,,,,,,,,,,,,,,,,,,,,Swamedikasi 3.pptx
,,,,,,,,,,,,,,,,,,,,,,Swamedikasi 3.pptx
 
Surat Pribadi dan Surat Dinas 7 SMP ppt.pdf
Surat Pribadi dan Surat Dinas 7 SMP ppt.pdfSurat Pribadi dan Surat Dinas 7 SMP ppt.pdf
Surat Pribadi dan Surat Dinas 7 SMP ppt.pdf
 
Materi Pertemuan 3 Bagian 1 Materi Pertemuan 3 Bagian 1.pptx
Materi Pertemuan 3 Bagian 1 Materi Pertemuan 3 Bagian 1.pptxMateri Pertemuan 3 Bagian 1 Materi Pertemuan 3 Bagian 1.pptx
Materi Pertemuan 3 Bagian 1 Materi Pertemuan 3 Bagian 1.pptx
 
PPT PENDIDIKAN KELAS RANGKAP MODUL 3 KELOMPOK 3.pptx
PPT PENDIDIKAN KELAS RANGKAP MODUL 3 KELOMPOK 3.pptxPPT PENDIDIKAN KELAS RANGKAP MODUL 3 KELOMPOK 3.pptx
PPT PENDIDIKAN KELAS RANGKAP MODUL 3 KELOMPOK 3.pptx
 
ATP MM FASE E MATEMATIKA KELAS X KURIKULUM MERDEKA
ATP MM FASE E MATEMATIKA KELAS X KURIKULUM MERDEKAATP MM FASE E MATEMATIKA KELAS X KURIKULUM MERDEKA
ATP MM FASE E MATEMATIKA KELAS X KURIKULUM MERDEKA
 
BAB 1 BEBATAN DAN BALUTAN DALAM PERTOLONGAN CEMAS
BAB 1 BEBATAN DAN BALUTAN DALAM PERTOLONGAN CEMASBAB 1 BEBATAN DAN BALUTAN DALAM PERTOLONGAN CEMAS
BAB 1 BEBATAN DAN BALUTAN DALAM PERTOLONGAN CEMAS
 
kerajaan-kerajaan hindu-budha di indonesia.ppt
kerajaan-kerajaan hindu-budha di indonesia.pptkerajaan-kerajaan hindu-budha di indonesia.ppt
kerajaan-kerajaan hindu-budha di indonesia.ppt
 
Bioteknologi Konvensional dan Modern kelas 9 SMP
Bioteknologi Konvensional dan Modern  kelas 9 SMPBioteknologi Konvensional dan Modern  kelas 9 SMP
Bioteknologi Konvensional dan Modern kelas 9 SMP
 
MODUL AJAR SENI MUSIK KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI MUSIK KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR SENI MUSIK KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI MUSIK KELAS 6 KURIKULUM MERDEKA.pdf
 
Materi Pertemuan 4 Materi Pertemuan 4.pptx
Materi Pertemuan 4 Materi Pertemuan 4.pptxMateri Pertemuan 4 Materi Pertemuan 4.pptx
Materi Pertemuan 4 Materi Pertemuan 4.pptx
 
Kegiatan Komunitas Belajar dalam sekolah .pptx
Kegiatan Komunitas Belajar dalam sekolah .pptxKegiatan Komunitas Belajar dalam sekolah .pptx
Kegiatan Komunitas Belajar dalam sekolah .pptx
 

Website form

  • 2. APAKAH FORM ITU??? Form merupakan salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting(misalkan PHP, JSP) ataupun client-side scripting (javascript). Form dapat digunakan untuk berbagai keperluan seperti keperluan login, transaksi penjualan, mengumpulkan informasi atau meminta feedbackdari pengguna, menawarkan barang/jasa secara on-line dan sebagainya. Form sangat sering kita jumpai dalam satu aplikasi sistem informasi berbasis web.
  • 4. Berikut ini adalah beberapa variasi yang dapat diterapkan pada atribut <form>
  • 5. Di antara elemen <form> dan </form> digunakan elemen – elemen HTML <input> yang berfungsi untuk mendefinisikan input yang akan dimasukkan oleh pengguna. Format umum dari penulisan elemen HTML <input> adalah sebagai berikut :
  • 6. Pada jenis masukan (input) dari halaman web minimal harus mempunyai atribut jenis (type), nama (name) dan nilai (value) default. Disamping atribut type, masing-masing elemen input memiliki atribut-atribut yang lain dan beberapa atribut tersebut berlaku untuk beberapa jenis elemen input. Sebagai contoh adalah elemen <input> yang atribut TYPE-nya adalah text memiliki atribut antara lain : Name untuk menamai kotak Value untuk menandai atau menampung teks Size mengatur ukuran teks pada kotak Maxlength menentukan panjang maksimum teks
  • 7. 3) CARA KERJA FORM Form HTML digunakan untuk melewatkan data dari klien ke server. Kerja Web bekerja didasarkan pada arsitektur client / server yang sangat dasar yang dapat diringkas sebagai berikut : klien (web browser ) mengirim permintaan ke server (misalnya apache , nginx , IIS , Tomcat , dan lain sebagainya ) , menggunakan protokol HTTP . Server menjawab requets dari form dengan menggunakan protokol yang sama .
  • 8. ELEMEN FORM HTML TAG DESKRIPSI FORMAT UMUM TAG <form> Mendefinisikan untuk form bagi user <form> </form> <input> Mendefinisikan kontrol input pada form <form> <input type="submit" value="Submit"> </form> <textarea > Mendefinisikan kontrol input berupa area teks pada form <textarea rows="4" cols="50">………</textarea> <label> Mendefinisikan label pada tag elemen <input> <form action="demo_form.asp"> <label for="buku">Buku</label> <input type="radio" name="barang" id="buku" value="buku"><br> </form>
  • 9. <fieldset > Group dengan element yang berhubungan satu sama lain didalam form <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form > <legend > Mendefinisikan judul untuk elemen <fieldset> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form> <select> Merupakan daftar secara drop-down <select> <option value="volvo">Volvo</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <button > Merupakan tombol yang dapat diklik <button type="button">Klik disini!</button> reset Tombol untuk mengosongkan field yang telah diisi <INPUT TYPE=RESET>
  • 10. CONTOH FORM SEDERHANA <html> <head> <title> Form 1 </title> </head> <body> <form name=”form1” method=”POST” action=”inputdata.php”> Nama : <input type="text" name="nama"> <br><br> Kelas: <input type="text" name="kelas" maxlength="2"> <br><br> No : <input type="text" name="nomor" value="10"> <br><br> Hobby: <input type="text" name="hobby" size="8"> <br><br> Password: <input type="password" name="password"> <br><br> <input type="submit" name="submit" value="Submit">&nbsp;&nbsp;&nbsp;<input type="reset" name="reset" value="Reset"> </form> </body> </html>
  • 12. FIN