05 form-html

3,240 views
3,167 views

Published on

Special characters, table, form

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,240
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
194
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

05 form-html

  1. 1. Special Characters, Table, & Form Pertemuan ke-5 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  2. 2. Agenda  Special Character  Tables  Form  Input  Attributes  Membuat web form Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  3. 3. HTML Special Characters  Terdapat beberapa karakter yang tidak dapat ditampilkan secara tepat, seperti tanda lebih kecil < dan tanda lebih besar > → browser menganggap kedua tanda tersebut sebagai tanda awal dan akhir suatu tag  Dibutuhkan escape sequences yang diawali ampersand (&) dan diakhir titik koma (;) Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  4. 4. Referensi Special Characters  < &lt;  ™ &trade;  > &gt;  © &copy;  “ &ldquo;  Nonbreaking space  ” &rdquo; &nbsp;  & &amp;  – &mdash;  ® &reg; Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  5. 5. Table  <table> digunakan sebagai mark up data dalam bentuk kolom dan baris  Contohnya kalendar di mana baris menunjukkan minggu dan kolom menunjukkan nama-nama hari  Struktur <table> sederhana:  <tr> → baris  <th> → baris heading  <td> → kolom Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  6. 6. <table>  <caption> → keterangan suatu table  <colgroup> → mengelompokkan kolom  <thead> → menambahkan heading  <tfoot> → menambahkan footer  <tbody> → mengelompokkan baris Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  7. 7. Kode HTML table berikut? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  8. 8. <table> <caption>Contoh Table</caption> <tr><td>1:1</td><td>1:2</td></tr> <tr><td>2:1</td><td>2:2</td></tr> <tr><td>3:1</td><td>3:2</td></tr> <tr><td>4:1</td><td>4:2</td></tr> <table> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  9. 9. Form  Pengguna dapat mengirimkan data ke server untuk dapat diolah melalui form  Elemen form:  input  text, checkbox, radio, file  textarea  select Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  10. 10. Input di HTML5 Email  Slider <input type=”email”> <input type=”range”> URL  Nomor <input type=”url”> <input type=”number”> Telepon  Tanggal <input type=”tel”> <input type=”date”> Search  Tanggal & Waktu <input type=”search”> <input type=”datetime”> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  11. 11. Input di HTML5 Warna <input type=”color”> Auto fokus <input type=”text” autofocus> Placeholder <input type=”email” placeholder=” saya@domain.com”> Inplace editing <p contenteditable>Edit sini</p> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  12. 12. Input di HTML5 Email  Slider <input type=”email”> <input type=”range”> URL  Nomor <input type=”url”> <input type=”number”> Telepon  Tanggal <input type=”tel”> <input type=”date”> Search  Tanggal & Waktu <input type=”search”> <input type=”datetime”> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  13. 13. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  14. 14. Struktur Form <form> <fieldset><legend>Informasi Pribadi</legend> </fieldset> <fieldset> <legend>Alamat Pengiriman</legend> </fieldset> <fieldset> <legend>Detil Kartu</legend> </fieldset> <fieldset> <button type="submit">Beli!</button> </fieldset> </form> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  15. 15. Informasi Pribadi (nama) <ol><!-- buka list → <li> <label for="name">Nama:</label> <input id="name" name="name" type="text" placeholder="First and last name" required autofocus> </li> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  16. 16. Informasi Pribadi (Email) <li> <label for="email">Email:</label> <input id="email" name="email" type="email" placeholder="contoh@domain.com" required> </li> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  17. 17. Informasi Pribadi (Telepon) <li> <label for="phone">Telepon:</label> <input id="phone" name="phone" type="tel" placeholder="Contoh +62217771234" required> </li> </ol><!-- tutup list --> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  18. 18. Alamat Pengiriman (Alamat) <ol> <li> <label for="address">Alamat</label> <textarea id="address" name="address" rows="5" required></textarea> </li> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  19. 19. Alamat Pengiriman (Kode Pos) <li> <label for="postcode">Kode pos</label> <input id="postcode" name="postcode" type="text" required> </li> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  20. 20. Alamat Pengiriman (Negara) <li> <label for="country">Negara</label> <input id="country" name="country" type="text" required> </li> </ol> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  21. 21. Detil Kartu (Tipe Kartu) <fieldset> <legend>Tipe Kartu</legend> <ol><li><input id="visa" name="cardtype" type="radio"><label for="visa">VISA</label></li> <li><input id="amex" name="cardtype" type="radio"><label for="amex">AmEx</label></li> <li><input id="mastercard" name="cardtype" type="radio"><label for="mastercard">Mastercard</label></li> </ol> </fieldset> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  22. 22. Detil Kartu (Nomer Kartu) <li> <label for="cardnumber">Nomor Kartu</label> <input id="cardnumber" name="cardnumber" type="number" required> </li> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  23. 23. Detil Kartu (Kode Keamanan) <li> <label for="secure">Kode Keamanan</label> <input id="secure" name="secure" type="number" required> </li> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  24. 24. Detil Kartu (Nama di Kartu) <li> <label for="namecard">Nama di Kartu</label> <input id="namecard" name="namecard" type="text" placeholder="Exact name as on the card" required> </li> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  25. 25. TUGAS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  26. 26. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi

×