05 form-html

Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP

Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi

Special Characters, Special Characters, Table,Table, & Form & Form

Pertemuan ke-5Pertemuan ke-5



AgendaAgenda

Special CharacterSpecial Character TablesTables FormForm

InputInput AttributesAttributes Membuat web formMembuat web form



HTML Special CharactersHTML Special Characters

Terdapat beberapa karakter yang tidak Terdapat beberapa karakter yang tidak dapat ditampilkan secara tepat, seperti dapat ditampilkan secara tepat, seperti tanda lebih kecil < dan tanda lebih besar tanda lebih kecil < dan tanda lebih besar > browser menganggap kedua tanda →> browser menganggap kedua tanda →tersebut sebagai tanda awal dan akhir tersebut sebagai tanda awal dan akhir suatu tagsuatu tag

Dibutuhkan Dibutuhkan escape sequencesescape sequences yang yang diawali ampersand (&) dan diakhir titik diawali ampersand (&) dan diakhir titik koma (;)koma (;)



Referensi Special CharactersReferensi Special Characters

<< << >> >> ““ ““ ”” ”” && && – – —— ® ® ®®

™ ™ ™™ ©© ©© Nonbreaking spaceNonbreaking space



TableTable

<table> digunakan sebagai mark up data <table> digunakan sebagai mark up data dalam bentuk kolom dan barisdalam bentuk kolom dan baris

Contohnya kalendar di mana baris Contohnya kalendar di mana baris menunjukkan minggu dan kolom menunjukkan minggu dan kolom menunjukkan nama-nama harimenunjukkan nama-nama hari

Struktur <table> sederhana:Struktur <table> sederhana: <tr> baris→<tr> baris→ <th> baris heading→<th> baris heading→ <td> kolom→<td> kolom→



<table><table>

<caption> keterangan suatu table→<caption> keterangan suatu table→ <colgroup> mengelompokkan kolom→<colgroup> mengelompokkan kolom→ <thead> menambahkan heading→<thead> menambahkan heading→ <tfoot> menambahkan footer→<tfoot> menambahkan footer→ <tbody> mengelompokkan baris→<tbody> mengelompokkan baris→



Kode HTML table berikut?Kode HTML table berikut?



<table><table>

<caption>Contoh Table</caption><caption>Contoh Table</caption>

<tr><td>1:1</td><td>1:2</td></tr><tr><td>1:1</td><td>1:2</td></tr>




<table><table>



FormForm

Pengguna dapat mengirimkan data ke Pengguna dapat mengirimkan data ke server untuk dapat diolah melalui formserver untuk dapat diolah melalui form

Elemen form:Elemen form: inputinput

text, checkbox, radio, filetext, checkbox, radio, file textareatextarea selectselect



Input di HTML5Input di HTML5

EmailEmail

<input type=”email”><input type=”email”> URLURL

<input type=”url”><input type=”url”> TeleponTelepon

<input type=”tel”><input type=”tel”> SearchSearch

<input type=”search”><input type=”search”>

SliderSlider

<input type=”range”><input type=”range”> NomorNomor

<input type=”number”><input type=”number”> TanggalTanggal

<input type=”date”><input type=”date”> Tanggal & WaktuTanggal & Waktu

<input <input type=”datetime”>type=”datetime”>



Input di HTML5Input di HTML5 WarnaWarna

<input type=”color”><input type=”color”> Auto fokusAuto fokus

<input type=”text” autofocus><input type=”text” autofocus> PlaceholderPlaceholder

<input type=”email” placeholder=”<input type=”email” placeholder=”[email protected]@domain.com”>”>

Inplace editingInplace editing

<p contenteditable>Edit sini</p><p contenteditable>Edit sini</p>

mailto:[email protected]



Input di HTML5Input di HTML5

EmailEmail

<input type=”email”><input type=”email”> URLURL

<input type=”url”><input type=”url”> TeleponTelepon

<input type=”tel”><input type=”tel”> SearchSearch

<input type=”search”><input type=”search”>

SliderSlider

<input type=”range”><input type=”range”> NomorNomor

<input type=”number”><input type=”number”> TanggalTanggal

<input type=”date”><input type=”date”> Tanggal & WaktuTanggal & Waktu

<input <input type=”datetime”>type=”datetime”>



Struktur FormStruktur Form<form><form>

<fieldset><legend>Informasi Pribadi</legend><fieldset><legend>Informasi Pribadi</legend>

</fieldset></fieldset>

<fieldset><fieldset><legend>Alamat Pengiriman</legend><legend>Alamat Pengiriman</legend>


<fieldset><fieldset><legend>Detil Kartu</legend><legend>Detil Kartu</legend>


<fieldset><fieldset>

<button type="submit">Beli!</button><button type="submit">Beli!</button>


</form></form>

Informasi PribadiInformasi Pribadi(nama)(nama)

<ol><!-- buka list →<ol><!-- buka list →

<li><li>

<label for="name">Nama:</label><label for="name">Nama:</label>

<input id="name" name="name" type="text" <input id="name" name="name" type="text"

placeholder="First and last name" required placeholder="First and last name" required

autofocus>autofocus>

</li></li>



Informasi PribadiInformasi Pribadi(Email)(Email)

<li><li>

<label for="email">Email:</label><label for="email">Email:</label>

<input id="email" name="email" type="email" <input id="email" name="email" type="email"

placeholder="[email protected]" required>placeholder="[email protected]" required>

</li></li>

Informasi PribadiInformasi Pribadi(Telepon)(Telepon)

<li><li>

<label for="phone">Telepon:</label><label for="phone">Telepon:</label>

<input id="phone" name="phone" type="tel" <input id="phone" name="phone" type="tel"

placeholder="Contoh +62217771234" required>placeholder="Contoh +62217771234" required>

</li></li>

</ol></ol>



Alamat PengirimanAlamat Pengiriman(Alamat)(Alamat)

<ol><ol>

<li><li>

<label for="address">Alamat</label><label for="address">Alamat</label>

<textarea id="address" name="address" rows="5" <textarea id="address" name="address" rows="5"

required></textarea>required></textarea>

</li></li>



Alamat PengirimanAlamat Pengiriman(Kode Pos)(Kode Pos)

<li><li>

<label for="postcode">Kode pos</label><label for="postcode">Kode pos</label>

<input id="postcode" name="postcode" type="text" <input id="postcode" name="postcode" type="text"

required>required>

</li></li>



Alamat PengirimanAlamat Pengiriman(Negara)(Negara)

<li><li>

<label for="country">Negara</label><label for="country">Negara</label>

<input id="country" name="country" type="text" <input id="country" name="country" type="text"

required>required>

</li></li>

</ol></ol>



Detil KartuDetil Kartu(Tipe Kartu)(Tipe Kartu)

<fieldset><fieldset>

<legend>Tipe Kartu</legend><legend>Tipe Kartu</legend>

<ol><li><input id="visa" name="cardtype" <ol><li><input id="visa" name="cardtype"

type="radio"><label for="visa">VISA</label></li>type="radio"><label for="visa">VISA</label></li>

<li><input id="amex" name="cardtype" <li><input id="amex" name="cardtype"

type="radio"><label for="amex">AmEx</label></li>type="radio"><label for="amex">AmEx</label></li>

<li><input id="mastercard" name="cardtype" <li><input id="mastercard" name="cardtype"

type="radio"><label type="radio"><label

for="mastercard">Mastercard</label></li>for="mastercard">Mastercard</label></li>

</ol></ol>




Detil KartuDetil Kartu(Nomer Kartu)(Nomer Kartu)

<li><li>

<label for="cardnumber">Nomor Kartu</label><label for="cardnumber">Nomor Kartu</label>

<input id="cardnumber" name="cardnumber" <input id="cardnumber" name="cardnumber"

type="number" required>type="number" required>

</li></li>



Detil KartuDetil Kartu(Kode Keamanan)(Kode Keamanan)

<li><li>

<label for="secure">Kode Keamanan</label><label for="secure">Kode Keamanan</label>

<input id="secure" name="secure" type="number" <input id="secure" name="secure" type="number"

required>required>

</li></li>



Detil KartuDetil Kartu(Nama di Kartu)(Nama di Kartu)

<li><li>

<label for="namecard">Nama di Kartu</label><label for="namecard">Nama di Kartu</label>

<input id="namecard" name="namecard" type="text" <input id="namecard" name="namecard" type="text"

placeholder="Exact name as on the card" placeholder="Exact name as on the card"

required>required>

</li></li>



TUGASTUGAS

05 form-html

Education

Transcript of 05 form-html