MASRIADI, S.KOM, M.

KOM

Web Design (Desain Web)

masriadi@upiyptk.ac.id

Universitas Putra Indonesia “YPTK” Padang

 Elemen Dasar HTML
Form Pada Html

 Website tidak hanya digunakan untuk menampilkan

informasi saja, tetapi juga digunakan untuk mengambil
informasi atau data dari user atau pengunjung.

 Form merupakan salah satu bentuk pengumpulan data

maupun informasi yang terdiri dari pertanyaan-pertanyaan
singkat yang harus diisi oleh user atau pengunjung website.
Selain itu, form juga dapat digunakan untuk membuat formulir
registrasi maupun login ke website tertentu.

Universitas Putra Indonesia “YPTK” Padang

 Elemen Dasar HTML
Form Pada Html

 Salah satu cara untuk mengambil informasi dari pengunjung

ialah menggunakan Form.

Form dalam website bisa disamakan dengan formulir di dunia

nyata. Form dapat diisi, kemudian diproses dengan program
tertentu.

Untuk membuat form menggunakan bahasa HTML dapat

mengunakan element HTML yaitu <form> … </form>. Dalam
element form tersebut, harus ditambahkan element lain sesuai
dengan jenis inputan yang dipakai yaitu element <input>,
<label>, <textarea>, <select>, dan <button>.

Universitas Putra Indonesia “YPTK” Padang

 Elemen Dasar HTML
Form Pada Html

Php

Form Html Database

Universitas Putra Indonesia “YPTK” Padang

 Elemen Dasar HTML
Form Pada Html

 Form di HTML dibuat menggunakan tag <Form>. Tag

<Form> harus diberi atribut yaitu :

 Action yaitu: untuk menentukan aksi yang akan dilakukan

saat data dikirim.
 Method yaitu: metode pengiriman data.

POST atau GET merupakan method yang digunakan untuk

mengirim data ke suatu server untuk diolah.

Universitas Putra Indonesia “YPTK” Padang

 Elemen Dasar HTML
Form Pada Html
Contoh:

Kode html diatas masih kosong karna kita belum

menambahkan Field nya

Field  adalah ruas yang dapat diisi dengan data.

Universitas Putra Indonesia “YPTK” Padang

 Elemen Dasar HTML
Form Pada Html
Contoh:

Field memiliki atribut yang harus diberi:

 Type merupakan type dari field.

 Name merupakan nama dari field yang akan menjadi kunci
dan variabel di dalam program.

Universitas Putra Indonesia “YPTK” Padang

 Elemen Dasar HTML
Form Pada Html –Tag Input

 HTML Tag <input> merupakan tag pada HTML yang

digunakan untuk menciptakan bidang formulir yang
memungkinkan pengguna dalam memasukkan entry data.

 HTML Tag <input> memiliki jenis dan bentuk yang

bervariasi sesuai dengan kebutuhan dan nilai data yang
terkandung di dalamnya.

Tag <input> harus ditambahkan atribut seperti type, name

dan lainnya

Universitas Putra Indonesia “YPTK” Padang

 Elemen Dasar HTML
Form Pada Html –Tag Input

Contoh:

 Berikut ini macam macam input type pada html:

1. Input type text

Universitas Putra Indonesia “YPTK” Padang

 Elemen Dasar HTML
Form Pada Html –Tag Input

2. Input type number

3. Input type email

4. Input type password

5. Input type date

Universitas Putra Indonesia “YPTK” Padang

 Elemen Dasar HTML
Form Pada Html –Tag Input

6. Input type file

7. Input type radio

8. Input type checkbox

9. Input type reset dan hidden
10. Input type submit

Universitas Putra Indonesia “YPTK” Padang

Praktek -1

Universitas Putra Indonesia “YPTK” Padang

Output Program -1

Universitas Putra Indonesia “YPTK” Padang

Praktek-2

Universitas Putra Indonesia “YPTK” Padang

Output Program-2

Universitas Putra Indonesia “YPTK” Padang

 Elemen Dasar HTML
Form Pada Html –Tag Select

 Tag select di dalam HTML digunakan untuk membuat objek

form yang berupa list pilihan yang dapat dipilih oleh user.
Biasanya tag select digunakan untuk “memaksa” user memilih
salah satu dari pilihan yang tersedia.

 Pada penggunaan tag select ini, kita juga membutuhkan tag

option sebagai “isi” dari tag select.

Contoh :

Universitas Putra Indonesia “YPTK” Padang

Praktek-3

Universitas Putra Indonesia “YPTK” Padang

Praktek-3

Universitas Putra Indonesia “YPTK” Padang

Output Program-3

Universitas Putra Indonesia “YPTK” Padang

 TERIMA KASIH

Universitas Putra Indonesia “YPTK” Padang