Scribd
Unggah
14 tayangan12 halaman

Cara Membuat Form HTML1

Dokumen ini menjelaskan cara membuat form HTML menggunakan tag <form> dan berbagai atributnya seperti action, method, type, name, value, placeholder, dan required. Selain itu, dokumen memberikan contoh field seperti input, textarea, dan select, serta cara menggabungkan elemen-elemen tersebut dalam formulir pendaftaran siswa. Pembaca juga diperkenalkan pada berbagai tipe input yang umum digunakan dalam form HTML.

Diunggah oleh

MUjiono Trisusilo
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
14 tayangan12 halaman

Cara Membuat Form HTML1

Dokumen ini menjelaskan cara membuat form HTML menggunakan tag <form> dan berbagai atributnya seperti action, method, type, name, value, placeholder, dan required. Selain itu, dokumen memberikan contoh field seperti input, textarea, dan select, serta cara menggabungkan elemen-elemen tersebut dalam formulir pendaftaran siswa. Pembaca juga diperkenalkan pada berbagai tipe input yang umum digunakan dalam form HTML.

Diunggah oleh

MUjiono Trisusilo
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 12

Belajar HTML Part 3: Cara Membuat Form HTML

Atribut di dalam Form HTML

Form HTML dapat kita buat menggunakan tag <form> dan penutup
</form>

Contoh Form:

<form action=”prosess-form.php” method=”GET”>

<!—letakkan field di sini 

</form>

Didalam tag form tersebut terdapat beberapa atribut:

Action untuk menentukan aksi yang akan dilakukan saat data form
dikirim. Pada atribut action kita isi dengan url yang akan memproses data
form. Pada contoh file yang akan memproses data form adalah prosess-
form.php

Method sebagai metode pengiriman data

Tetapi Form tersebut belum menampilkan data maupun formulir, karena


belum ada field form nya.

Apa itu Field?

Field adalah bagian yang kita gunakan untuk mengisi data, sesuai tipe
yang dibutuhkan. Yang sering kita temui adalah tag <input>.

Pindah Hosting ke Rumahweb Gratis

Contoh Field:

<input type=”text” name=”nama-lengkap” />


Didalam Field tersebut terdapat tag yang didalamnya ada beberapa
atribut yang harus diberikan;

Type merupakan type dari field, seperti textarea, password, checkbox,


sumbit dan lainnya

Name nama dari atribut name wajib ada dan beda, sebagai variable untuk
proses data

Hasilnya:

Belajar HTML Rumahweb – Membuat formulir HTML type textBelajar HTML


Rumahweb – Membuat form type text

Agar tampilan tidak hanya menampilkan form saja, kita perlu


menambahkan tabel atau label diatas tag <input>

Contoh Field:

<label> Nama: </label>

<input type=”text” name=”nama-lengkap” /><br />

Hasilnya:
Belajar HTML Rumahweb – Membuat label form type textBelajar HTML
Rumahweb – Membuat label form type text

Type dan name didalam atribut ini yang akan sering kita temui didalam
membuat form HTML. Perlu diketahui atribut type ini banyak macamnya.
Agar lebih jelas, mari lanjut pembahasannya.

Contoh Atribut

Atribut Type

Atribut type banyak sekali macamnya. Tetapi karena pembahasan kita


adalah Form HTML, berikut beberapa atribut type yang sering digunakan.

Text field untuk mengisi data berupa teks

Email field untuk mengisi data khusus email

Password field untuk mengisi data khusus password, nantinya hanya


menampilkan karakter bintang-bintang agar karakter password tidak
terbaca/terlihat nilai aslinya

Checkbox field untuk pengguna memilih nilai lebih dari satu sesuai pilihan
yang diberikan

Radio field untuk memilih salah satu nilai yang diberikan

Number field untuk mengisi data khusus angka

Date field untuk mengisi data khusus tanggal

File field untuk upload file didalam form

Submit field untuk tombol submit, agar form diproses oleh form action

Contoh:

<!DOCTYPE html>

<html>

<head><title>Belajar HTML – Membuat Form</title></head>

<body>

<form action=”prosess-form.php” method=”GET”>


<!—letakkan field di sini 

<label> Nama: </label>

<input type=”text” name=”nama-lengkap” /><br />

<label> Email: </label>

<input type=”email” name=”email” /><br />

<label> Password: </label>

<input type=”password” name=”password” /><br />

<label> Checkbox: </label>

<input type=”checkbox” name=”hobi” /> Membaca

<input type=”checkbox” name=”hobi” /> Menulis

<input type=”checkbox” name=”hobi” /> Olahraga <br />

<label> Radio: </label>

<input type=”radio” name=”jenis-kelamin” /> Pria

<input type=”radio” name=”jenis-kelamin” />Wanita<br />

<label> Number/angka: </label>

<input type=”number” name=”number” /><br />

<label> Tanggal: </label>

<input type=”date” name=”tanggal” /><br />

<label> File: </label>

<input type=”file” name=”file” /><br />

<label> Submit: </label>


<input type=”submit” name=”submit” /><br />

</form>

</body>

</html>

Hasilnya:

Belajar HTML Rumahweb – Mengenal atribut type name valueBelajar HTML


Rumahweb – Mengenal atribut type

Atribut Name

Atribut name digunakan sebagai pengenal atau variable untuk proses


data dan harus berbeda dengan name lain. Name ini tidak akan
ditampilkan dibrowser.

Atribut Value

Atribut Value digunakan untuk memberikan nilai default didalam form

Contoh:
<form action=”prosess-form.php” method=”GET”>

<!—letakkan field di sini 

<label> Nama: </label>

<input type=”text” name=”nama-lengkap” value=”Sri” /><br />

</form>

Atribut Placeholder

Atribut placeholder digunakan untuk memberikan teks bantuan didalam


field. Selain itu, Atribut ini akan muncul apabila form dalam keadaan
kosong atau saat belum kita isi.

Contoh:

<form action=”prosess-form.php” method=”GET”>

<!—letakkan field di sini 

<label> Nama Lengkap dan gelar: </label>

<input type=”text” name=”nama-lengkap” placeholder=”Ir. H.


Soekarno” /><br />

<input type=”submit” name=”submit” /><br />

</form>

Atribut Required

Atribut Required digunakan agar field wajib diisi. Apabila tidak diisi maka
akan menghasilkan warning tertentu

Contoh:

<form action=”prosess-form.php” method=”GET”>

<!—letakkan field di sini 


<label> Alamat email: </label>

<input type=”email” name=”nama-lengkap” required/><br />

<input type=”submit” name=”submit” /><br />

</form>

Elemen lain di form HTML

<select>

Elemen yang digunakan untuk membuat list drop-down

</textarea>

Elemen yang digunakan teks untuk multi baris, biasanya digunakan untuk
mengisi form komentar

Contoh:

<form action=”prosess-form.php” method=”GET”>

<!—letakkan field di sini 

<label> Isi Komentar: </label>

<textarea name=”komentar” rows=”4” cols=”50” ></textarea> <br


/><br />

<label> Asal Kota: </label>

<select name=”kota”>

<option value=”sleman”> Sleman</option>

<option value=”bantul”> Bantul</option>

<option value=”gunungkidul”> Gunung Kidul</option>


<option value=”kulonprogo”> Kulon Progo</option>

<option value=”yogyakota”> Yogyakarta Kota</option>

</select>

</form>

Hasilnya:

Contoh membuat formulir pendaftaran HTML

Dalam latihan kali ini kita akan menggabungkan beberapa type dan
elemen. Sekaligus menggunakan tabel agar nama dan form terlihat rapi.

Contoh:

<!DOCTYPE html>
<html>

<head><title>Belajar HTML – Membuat Form</title></head>

<body>

<form action=”prosessForm.php” method=”GET”>

<!—letakkan field di sini 

<fieldset>

<legend><h1>Formulir Pendaftaran Siswa</h1></legend>

<table>

<tr>

<td>Nama Calon Siswa</td>

<td>:</td>

<td><input type=”name” name=”nama” required/><br /></td>

</tr>

<tr>

<td>Tempat/Tanggal Lahir</td>

<td>:</td>

<td><input type=”name” name=”tempatLahir”/> <input


type=”date” name=”tanggal” /></td>

</tr>

<tr>

<td>Agama</td>

<td>:</td>

<td><select name=”agama”>

<option value=”islam”> Islam</option>

<option value=”kristen”> Kristen</option>

<option value=”katolik”> Katolik</option>


<option value=”budha”> Budha</option>

<option value=”hindu”> Hindu</option>

</select></td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><textarea name=”komentar” rows=”4” cols=”50”


></textarea> </td>

</tr>

<tr>

<td>No Telp/Hp</td>

<td>:</td>

<td><input type=”number” name=”number” /></td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td>:</td>

<td><input type=”radio” name=”jenisKelamin” /> Pria

<input type=”radio” name=”jenisKelamin” /> Wanita</td>

</tr>

<tr>

<td>Hobi</td>

<td>:</td>

<td><input type=”checkbox” name=”hobi” /> Membaca </input>


<input type=”checkbox” name=”hobi” /> Menulis </input>

<input type=”checkbox” name=”hobi” /> Olahraga


</input></td>

</tr>

<tr>

<td>Pas Foto</td>

<td>:</td>

<td><input type=”file” name=”foto” /></td>

</tr>

<tr>

<td><input type=”submit” name=”submit”


value=”SUBMIT”/></td>

<td></td>

<td></td>

</tr>

</table>

</fieldset>

</form>

</body>

</html>

Hasilnya:

Anda mungkin juga menyukai