SlideShare una empresa de Scribd logo
1 de 20
HTML - Form Hyper Text Mark Up Language Pemograman Web (2010/2011) – Mar 3, 2011  Teknik Informatika, Universitas Islam Indonesia Follow  Hari Setiaji  on Twitter
Ready to step forward ? Pemograman Web (2010/2011) – Hari Setiaji, S.Kom Yes.. We can, web programming is  easy..
Remember Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <tag_name atribut=“value”> </tag> Or <tag_name atribut=“value” />
Pengenalan Form ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Form Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Atribut  <form>  tag Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Atribut  <input>   tag ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Text input ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],•  Contoh diatas jika menggunakan tag  input , kecuali  textarea Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Buttons ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],•  Perhatikan bahwa tag nya adalah  input , bukan “button” Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Checkboxes ,[object Object],[object Object],[object Object],[object Object],[object Object],Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
[object Object],[object Object],[object Object],[object Object],Radio buttons ,[object Object],Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Drop-down menu ,[object Object],[object Object],[object Object],[object Object],Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Hidden fields ,[object Object],[object Object],[object Object],[object Object],Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Contoh ,[object Object],[object Object],Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Contoh form Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Contoh form (2) Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Pengelompokan elemen dokumen ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Contoh <div id=&quot;mhs01&quot; class=&quot;mhs&quot;> <span class=&quot;nama&quot;> Adrian Marzuki </span> <br> <span class=&quot;alamat&quot;> Jl. Tubagus Ismail XI/5 </span> </div> <div id=&quot;mhs02&quot; class=&quot;mhs&quot;> <span class=&quot;nama&quot;> Dewi Purnama </span> <br> <span class=&quot;alamat&quot;> Jl. Cisitu Lama 24 </span> </div> <style type=&quot;text/css&quot;> .mhs {border: black solid 1; margin-bottom: 10; padding: 10} .nama {font: bold 20 Arial} .alamat {font-style: italic} </style> <div id=&quot;mhs01&quot; class=&quot;mhs&quot;> <span class=&quot;nama&quot;>Adrian Marzuki</span><br> ... Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
To do list.. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Finally Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

CSS Dasar #8 : Pseudo-class
CSS Dasar #8 : Pseudo-classCSS Dasar #8 : Pseudo-class
CSS Dasar #8 : Pseudo-class
 
Function dalam PHP
Function dalam PHPFunction dalam PHP
Function dalam PHP
 
Abstract Class & Interface
Abstract Class & InterfaceAbstract Class & Interface
Abstract Class & Interface
 
CSS Layouting #3 : Box Model
CSS Layouting #3 : Box ModelCSS Layouting #3 : Box Model
CSS Layouting #3 : Box Model
 
Diktat Pemrograman Web dengan laravel 5.4
Diktat Pemrograman Web dengan laravel 5.4Diktat Pemrograman Web dengan laravel 5.4
Diktat Pemrograman Web dengan laravel 5.4
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
 
HTML Dasar : #4 Paragraf
HTML Dasar : #4 ParagrafHTML Dasar : #4 Paragraf
HTML Dasar : #4 Paragraf
 
HTML Dasar : #10 Form
HTML Dasar : #10 FormHTML Dasar : #10 Form
HTML Dasar : #10 Form
 
Pengenalan html
Pengenalan htmlPengenalan html
Pengenalan html
 
[PBO] Pertemuan 3 - Pengenalan Pemrograman Berbasis Objek
[PBO] Pertemuan 3 - Pengenalan Pemrograman Berbasis Objek[PBO] Pertemuan 3 - Pengenalan Pemrograman Berbasis Objek
[PBO] Pertemuan 3 - Pengenalan Pemrograman Berbasis Objek
 
Materi CSS Dasar
Materi CSS DasarMateri CSS Dasar
Materi CSS Dasar
 
Html forms
Html formsHtml forms
Html forms
 
HTML Dasar : #9 Tabel
HTML Dasar : #9 TabelHTML Dasar : #9 Tabel
HTML Dasar : #9 Tabel
 
HTML Dasar : #7 Hyperlink
HTML Dasar : #7 HyperlinkHTML Dasar : #7 Hyperlink
HTML Dasar : #7 Hyperlink
 
CSS Dasar #7 : Selector
CSS Dasar #7 : SelectorCSS Dasar #7 : Selector
CSS Dasar #7 : Selector
 
CSS Dasar #10 : Specificity
CSS Dasar #10 : SpecificityCSS Dasar #10 : Specificity
CSS Dasar #10 : Specificity
 
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
 
Dom
DomDom
Dom
 
HTML Dasar : #6 List
HTML Dasar : #6 ListHTML Dasar : #6 List
HTML Dasar : #6 List
 
New Form Element in HTML5
New Form Element in HTML5New Form Element in HTML5
New Form Element in HTML5
 

Similar a HTML - Form

webdesign dasar : 09 mengubah tampilan form
webdesign dasar : 09 mengubah tampilan formwebdesign dasar : 09 mengubah tampilan form
webdesign dasar : 09 mengubah tampilan form
SMK Negeri 6 Malang
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
gueste0c708
 

Similar a HTML - Form (20)

HTML Dasar
HTML DasarHTML Dasar
HTML Dasar
 
Teknologi XML - Pengenalan Tree
Teknologi XML - Pengenalan TreeTeknologi XML - Pengenalan Tree
Teknologi XML - Pengenalan Tree
 
DTD - Atribut dan Entities
DTD - Atribut dan EntitiesDTD - Atribut dan Entities
DTD - Atribut dan Entities
 
Teknologi XML - Pengenalan DTD
Teknologi XML - Pengenalan DTDTeknologi XML - Pengenalan DTD
Teknologi XML - Pengenalan DTD
 
webdesign dasar : 08 form
webdesign dasar : 08 formwebdesign dasar : 08 form
webdesign dasar : 08 form
 
Web Programming - Cascading Style Sheet
Web Programming - Cascading Style Sheet Web Programming - Cascading Style Sheet
Web Programming - Cascading Style Sheet
 
Html Tingkat Lanjut dan Aplikasi pada Form
Html Tingkat Lanjut dan Aplikasi pada FormHtml Tingkat Lanjut dan Aplikasi pada Form
Html Tingkat Lanjut dan Aplikasi pada Form
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Web Programming - Javascript
Web Programming - JavascriptWeb Programming - Javascript
Web Programming - Javascript
 
07 form
07 form07 form
07 form
 
04. Penanganan Form
04. Penanganan Form04. Penanganan Form
04. Penanganan Form
 
Pemrograman web modul 1 dan 2
Pemrograman web  modul 1 dan 2Pemrograman web  modul 1 dan 2
Pemrograman web modul 1 dan 2
 
4 basic html form
4 basic html form4 basic html form
4 basic html form
 
HTML
HTMLHTML
HTML
 
Introduction to XPath
Introduction to XPathIntroduction to XPath
Introduction to XPath
 
Pemrograman Web & Perangkat Bergerak - materi Form
Pemrograman Web & Perangkat Bergerak - materi FormPemrograman Web & Perangkat Bergerak - materi Form
Pemrograman Web & Perangkat Bergerak - materi Form
 
Html dasar
Html dasarHtml dasar
Html dasar
 
webdesign dasar : 09 mengubah tampilan form
webdesign dasar : 09 mengubah tampilan formwebdesign dasar : 09 mengubah tampilan form
webdesign dasar : 09 mengubah tampilan form
 
11 form
11 form11 form
11 form
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
 

Más de Hari Setiaji

Más de Hari Setiaji (13)

Project Management Tools
Project Management ToolsProject Management Tools
Project Management Tools
 
Database Jaman Now
Database Jaman NowDatabase Jaman Now
Database Jaman Now
 
Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Web Programming - PHP
Web Programming - PHPWeb Programming - PHP
Web Programming - PHP
 
Tutorial Postgre SQL
Tutorial Postgre SQLTutorial Postgre SQL
Tutorial Postgre SQL
 
Pengenalan XML
Pengenalan XMLPengenalan XML
Pengenalan XML
 
Internet dan Web
Internet dan WebInternet dan Web
Internet dan Web
 
Perkembangan Web
Perkembangan WebPerkembangan Web
Perkembangan Web
 
Bab II Use Case Diagram
Bab II Use Case DiagramBab II Use Case Diagram
Bab II Use Case Diagram
 
Bab I Data Flow Diagram
Bab I Data Flow DiagramBab I Data Flow Diagram
Bab I Data Flow Diagram
 
Native Xml Tutorial
Native Xml TutorialNative Xml Tutorial
Native Xml Tutorial
 
Persentasi Ajax Native Xml
Persentasi Ajax Native XmlPersentasi Ajax Native Xml
Persentasi Ajax Native Xml
 
Distributed Database Using Oracle
Distributed Database Using OracleDistributed Database Using Oracle
Distributed Database Using Oracle
 

Último

Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfAksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
JarzaniIsmail
 
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
pipinafindraputri1
 
Kenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).pptKenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).ppt
novibernadina
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
nabilafarahdiba95
 

Último (20)

Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfAksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
 
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
Modul 2 - Bagaimana membangun lingkungan belajar yang mendukung transisi PAUD...
 
Konseptual Model Keperawatan Jiwa pada manusia
Konseptual Model Keperawatan Jiwa pada manusiaKonseptual Model Keperawatan Jiwa pada manusia
Konseptual Model Keperawatan Jiwa pada manusia
 
Prakarsa Perubahan dan kanvas ATAP (1).pptx
Prakarsa Perubahan dan kanvas ATAP (1).pptxPrakarsa Perubahan dan kanvas ATAP (1).pptx
Prakarsa Perubahan dan kanvas ATAP (1).pptx
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsx
 
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
 
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
BAHAN PAPARAN UU DESA NOMOR 3 TAHUN 2024
 
MODUL AJAR BAHASA INDONESIA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INDONESIA KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR BAHASA INDONESIA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR BAHASA INDONESIA KELAS 6 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]
 
PANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptx
PANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptxPANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptx
PANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptx
 
Kenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).pptKenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).ppt
 
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdfMODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR IPAS KELAS 3 KURIKULUM MERDEKA.pdf
 
668579210-Visi-Gp-Berdasarkan-Tahapan-Bagja.pdf
668579210-Visi-Gp-Berdasarkan-Tahapan-Bagja.pdf668579210-Visi-Gp-Berdasarkan-Tahapan-Bagja.pdf
668579210-Visi-Gp-Berdasarkan-Tahapan-Bagja.pdf
 
Memperkasakan Dialog Prestasi Sekolah.pptx
Memperkasakan Dialog Prestasi Sekolah.pptxMemperkasakan Dialog Prestasi Sekolah.pptx
Memperkasakan Dialog Prestasi Sekolah.pptx
 
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
Intellectual Discourse Business in Islamic Perspective - Mej Dr Mohd Adib Abd...
 
PPT Mean Median Modus data tunggal .pptx
PPT Mean Median Modus data tunggal .pptxPPT Mean Median Modus data tunggal .pptx
PPT Mean Median Modus data tunggal .pptx
 
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR SENI RUPA KELAS 6 KURIKULUM MERDEKA.pdf
 
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptxDEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
 
Topik 4_Eksplorasi Konsep LK Kelompok_Pendidikan Berkelanjutan
Topik 4_Eksplorasi Konsep LK Kelompok_Pendidikan BerkelanjutanTopik 4_Eksplorasi Konsep LK Kelompok_Pendidikan Berkelanjutan
Topik 4_Eksplorasi Konsep LK Kelompok_Pendidikan Berkelanjutan
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
 

HTML - Form

  • 1. HTML - Form Hyper Text Mark Up Language Pemograman Web (2010/2011) – Mar 3, 2011 Teknik Informatika, Universitas Islam Indonesia Follow Hari Setiaji on Twitter
  • 2. Ready to step forward ? Pemograman Web (2010/2011) – Hari Setiaji, S.Kom Yes.. We can, web programming is easy..
  • 3. Remember Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <tag_name atribut=“value”> </tag> Or <tag_name atribut=“value” />
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. Contoh form Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  • 16. Contoh form (2) Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  • 17.
  • 18. Contoh <div id=&quot;mhs01&quot; class=&quot;mhs&quot;> <span class=&quot;nama&quot;> Adrian Marzuki </span> <br> <span class=&quot;alamat&quot;> Jl. Tubagus Ismail XI/5 </span> </div> <div id=&quot;mhs02&quot; class=&quot;mhs&quot;> <span class=&quot;nama&quot;> Dewi Purnama </span> <br> <span class=&quot;alamat&quot;> Jl. Cisitu Lama 24 </span> </div> <style type=&quot;text/css&quot;> .mhs {border: black solid 1; margin-bottom: 10; padding: 10} .nama {font: bold 20 Arial} .alamat {font-style: italic} </style> <div id=&quot;mhs01&quot; class=&quot;mhs&quot;> <span class=&quot;nama&quot;>Adrian Marzuki</span><br> ... Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  • 19. To do list.. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
  • 20. Finally Pemograman Web (2010/2011) – Hari Setiaji, S.Kom

Notas del editor

  1. Pemrograman Web
  2. Pemrograman Web