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→

<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?

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

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

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

Inplace editingInplace editing

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

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>

</form></form>

Informasi PribadiInformasi Pribadi(nama)(nama)

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

<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)

<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="contoh@domain.com" required>placeholder="contoh@domain.com" required>

</li></li>

Informasi PribadiInformasi Pribadi(Telepon)(Telepon)

<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)

<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)

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

required>required>

</li></li>

Alamat PengirimanAlamat Pengiriman(Negara)(Negara)

<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)

<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)

<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)

<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)

<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

05. HTML 4.ppt

Membuat Form Input Dengan HTML Region Pada Oracle APEX 42

HTML Form & CSS - · PDF fileJenis-Jenis Form Inputan TEXT PASSWORD RADIO button CHECKBOX COMBO BOX TEXTAREA

latihan html

Membuat Website dengan menggunakan HTML - dinus.ac.iddinus.ac.id/repository/docs/ajar/Pengenalan_HTML.pdf · B. Pengenalan kode HTML Masing-masing baris

Master HTML

Pert 05 HTML dan Web Programming

PENGANTAR HTML - CORE · DanangWahyu Utomo, M.Kom, M.CS Objectives Basic HTML HTML headings HTML paragraphs HTML links HTML images

Pengantar HTML

Form HTML - ILMu iTu KeBuTuHaN | Try To Be beTTer aplikasi web, teknik pengiriman form dapat dilakukan melalui tiga metode: POST, GET, dan kombinasi keduanya. Dalam konteks PHP, parameter-parameter

HTML: Teks

Tutorial html

HTML tugas

Kurikulum Pelatihan Sesi I Sesi II Sesi III · PDF file2.Membuat hyperlink 3.Membuat form lengkap ... - HTML Form - PHP . Modul Pelatihan PHP Sesi IV ... pendaftaran peserta pelatihan)

Form HTML - · PDF fileMampu menangani masukan data dari form HTML Mampu membuat dan memproses beragam elemen kontrol ... Buat halaman login sederhana seperti sebagai berikut:

Belajar html!!

Analisa dan perancangan sistem 05 form

BAB IV DESKRIPSI KERJA PRAKTEK SURABAYAsir.stikom.edu/id/eprint/178/7/BAB IV.pdf · 2014-05-19 · Kasbon Alasan Pengajuan Di Setujui? Menyerahkan Form Kasbon 1 1 Form Kasbon 1 Form

05 materi Hyperlink HTML

PANDUAN HTML