1 / 10

Desain Web Pertemuan 5

Desain Web Pertemuan 5. Fakultas Teknologi Informasi Universitas Budi Luhur. FORM. Form digunakan untuk mengumpulkan informasi dari user. Untuk membuat form digunakan tag <form>…</form>. Pasangan tag tsb diletakkan di antara <BODY>…</BODY>.

nathalie-dumont
Download Presentation

Desain Web Pertemuan 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Desain Web Pertemuan 5 FakultasTeknologiInformasi Universitas Budi Luhur

  2. FORM • Form digunakanuntukmengumpulkaninformasidari user. • Untukmembuat form digunakan tag <form>…</form>. Pasangan tag tsbdiletakkandiantara <BODY>…</BODY>. • Dalamsebuah form bisaterdapatbanyak element

  3. BentukUmum Form • <form method=“post/get” action=“” name=“”> • </form> • METHOD => menentukancaramengirimkan data yang diinputkan user ke server. Ada 2 cara yang dapatdipakaiyaitu GET dan POST • ACTION => menentukanlokasi file yang akanmemproses data. • NAME => menentukannama form. Namainiberfungsisebagai variable yang akandikirimkanke target dalamatribut ACTION.

  4. FORM - Textfield / Textbox • berbentukkotakinputansatubaristunggal yang digunakanuntukmemasukkan data berupateksmaupunangka. • <input type=”text”> • Atribut : • size=> menunjukkanpanjangnyakolom. • Value => menunjukkandefault text yang ditampilkan. • Name => namatextfield • Readonly=readonly => membuat textbox tidakbisadiisi • Maxlength => menentukanpanjangmaksimum

  5. FORM – Password Field • Prinsipkerjanyasamadengan TEXTFIELD, hanyasajakarakter yang diketikkandigantidengankarakter *****. • <INPUT TYPE=”PASSWORD”> • Atribut yang dimilikisamadengan textbox

  6. FORM - Textarea • Digunakanuntukmemasukkanbeberapabaris text • <textarea ></textarea> • Atribut : • Name => namatextarea • Cols => jumlahkolom yang akantampil • Rows => jumlahbaris yang akantampil

  7. Form - Checkbox • Digunakanuntukmembuatkotakpilihan. • Biasadigunakanjika group pilihanbisadipilihlebihdarisatu (misalnyadalampemilihanhoby, warnakesukaan) • <input type=“checkbox”> LABEL • Atribut : • Name => nama checkbox (dalam 1 group memilikinama yang berbeda • value => nilai / data yang akandikirimkanke server • Checked=checked => membuat checkbox terpilih • Disabled=disabled => membuat checkbox tidakbisadipilih

  8. FORM – Radio Button • Kegunaannyasamadengan checkbox hanyasajabentuknyalingkaran. • Biasadigunakanjikadalamsebuah group pilihan, hanyasatu yang bisadipilih (misalnyadalampemilihan agama danjeniskelamin) • <input type=”radio”> LABEL • Atribut : • Name => nama radio button (dalam 1 group memilikinama yang sama • value => nilai / data yang akandikirimkanke server • Checked=checked => membuat radio button terpilih • disabled=disabled => membuat radio button ditidakbisadipilih

  9. FORM – Combobox / Dropdown • Digunakanuntukmembuatdaftar menu. • <select name=”menu”> <option value=”isi1”>pilihan 1</option> < option value=”isi2”>pilihan 2</option> < option value=”isi3”>pilihan 3</option> • </select> • Atribut option : • Selected=‘selected’ => memberikannilai default pilihan yang dipilih • Atribut select : • Name => namacombobox • Size => menentukanjumlahpilihan yang ditampilkan • Multiple=multiple => membuatcomboboxbisadipilihlebihdari 1

  10. FORM - Button SUBMIT BUTTON • Digunakanuntukmengirimkan data yang dimasukkanmelalui form olehpengunjungkeserver. • Data dalam form baruakandikirimsetelahtombolinidiklik • <input type=“submit”name=‘tombol’ value=”kirim”> RESET BUTTON • Digunakanuntukmembatalkan data yang telahdiketikdi form sehinnga form menjadikosong. • <input type=”reset” value=”batal” name=‘tombol’>

More Related