05 form-html

  • 3,028 views
Uploaded on

Special characters, table, form

Special characters, table, form

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,028
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
188
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Special Characters, Table, & Form Pertemuan ke-5 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 2. Agenda  Special Character  Tables  Form  Input  Attributes  Membuat web form Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. 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. 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. <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. Kode HTML table berikut? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. 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. 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. 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. 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. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. TUGAS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 26. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi