Scribd
Unggah
1 tayangan12 halaman

Script HTML Form

Dokumen ini menjelaskan berbagai jenis elemen input dalam HTML, termasuk <input>, <select>, dan <textarea>, serta cara penggunaannya dalam form. Setiap elemen memiliki tipe dan fungsi spesifik, seperti input teks, angka, email, password, dan lainnya. Selain itu, dokumen juga memberikan contoh kode untuk membuat form login dan pendaftaran.

Diunggah oleh

smk almadina
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
1 tayangan12 halaman

Script HTML Form

Dokumen ini menjelaskan berbagai jenis elemen input dalam HTML, termasuk <input>, <select>, dan <textarea>, serta cara penggunaannya dalam form. Setiap elemen memiliki tipe dan fungsi spesifik, seperti input teks, angka, email, password, dan lainnya. Selain itu, dokumen juga memberikan contoh kode untuk membuat form login dan pendaftaran.

Diunggah oleh

smk almadina
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

Tag <input>

Input memiliki bermacam-macam tipe misalnya jika ingin membuat input teks seperti di atas maka type=teks, jika ingin membuat input
berupa password maka type=password, dan lain sebagainya.

Berikut ini macam macam input type pada html:

1. Input type text

Type text digunakan untuk membuat field untuk teks biasa. Tidak ada pembatasan huruf jadi dapat diisi angka, huruf dan karakter.
Contoh untuk menanyakan username.

1 <input type="text" name="username" />

2. Input type number

Type number digunakan untuk membuat kolom isian angka. Selain angka tidak akan bisa dimasukkan ke kolom ini. Contoh penggunaan
untuk menanyakan umur.

1 <input type="number" name="umur" />

3. Input type email

Type email untuk membuat field kusus email. Saat user mengisinya dengan teks yang bukan email address maka akan muncul warning.

1 <input type="email" name="email" />

4. Input type password

Type password digunakan untuk membuat field untuk password. Saat user mengisinya maka teks tidak dapat dibaca.

1 <input type="password" name="password" />

5. Input type date


Type date untuk membuat kolom isian tanggal. Saat user mengisinya maka akan ada tampilan kalender untuk mempermudah mengisinya.

1 <input type="date" name="tanggal" />

6. Input type file

Type file untuk membuat form upload file. Tampilan field ini berupa tombol jika di-klik maka akan menampilkan file browser untuk
memilih file mana yang akan diupload.

1 <input type="file" name="lampiran" />

7. Input type radio

Type radio berfungsi untuk membuat pilihan berupa bulatan.

Untuk membuat radio button di html tag <input> harus lebih dari 1 dan menggunakan type radio. Setiap tag harus memiliki name yang
sama dan tag tersebut harus ditambahkan atribut value yang berisi data yang akan dikirimkan. Misalnya untuk membuat field jenis
kelamin:

1 Jenis kelamin:<br />


2 <input type="radio" name="jeniskelamin" value="pria"> Pria<br>
3 <input type="radio" name="jeniskelamin" value="wanita"> Wanita<br>

Penjelasan: Kedua field di atas menggunakan atribut type=”radio”. Dengan name yang sama yaitu “jeniskelamin” menandakan kedua field
tersebut untuk mengisinya harus memilih salah satu (user hanya dapat memilih pria atau wanita, tidak bisa kedua-duanya).

8. Input type checkbox

Type checkbox digunakan untuk membuat field centang pada pilihan.

Untuk membuat checkbox di html dapat menggunakan sintak <input> dengan type checkbox dan atribut name. Selain itu, atribut value
harus digunakan untuk mendefinisikan data yang akan dikirimkan. Misalnya untuk membuat pertanyaan berupa ceklist:

1 Saya bersedia mengikuti aturan forum


2 <input type="checkbox" name="bersedia_ikut" value="ya">
9. Input type reset

Type reset digunakan untuk membuat tombol reset pengisian data. Jika user menekan tombol reset maka semua isian yang sudah diisi
pada form akan direset atau dihapus sehingga user dapat mengisi dari awal lagi.

1 <input type="reset" value="Reset">

10. Input type hidden

Type hidden untuk membuat field yang disembunyikan. Biasanya type hidden digunakan web developer untuk mengirimkan data yang
tidak perlu diisi oleh user, misalnya kode verifikasi halaman untuk keamanan web, id dari user dan sebagainya. Field ini tidak akan tampil
di halaman web.

1 <input type="hidden" name="userid" value="3487">

11. Input type submit

Type submit digunakan untuk membuat tombol kirim. Ini adalah tipe input yang wajib digunakan saat membuat sebuah form. Jika tombol
ini di-klik user maka form akan diproses oleh file yang sudah ditentukan di atribut action pada tag <form>.

1 <input type="submit" value="Kirim">

Jika kita menggabungkan semua input type di atas menjadi satu form maka akan menjadi:

1 <html>
2 <head><title>Belajar Form</title></head>
3 <body>
4 <form action="submit.php" method="POST">
5 <p>Username: <input type="text" name="username" /></p>
6 <p>Umur: <input type="number" name="umur" /></p>
7 <p>E-mail: <input type="email" name="email" /></p>
8 <p>Password: <input type="password" name="password" /></p>
9 <p>Tanggal Lahir: <input type="date" name="tanggallahir" /></p>
10 <p>Foto: <input type="file" name="foto" /><br /></p>
11 <p>Jenis kelamin:
12 <input type="radio" name="jeniskelamin" value="pria"> Pria
13 <input type="radio" name="jeniskelamin" value="wanita"> Wanita</p>
14 <br /><br />
15 <p>Saya bersedia mengikuti aturan forum
16 <input type="checkbox" name="bersedia_ikut" value="ya"></p><br /><br />
17 <input type="hidden" name="userid" value="3487">
18 <input type="reset" value="Reset"> <input type="button" name="submit" value="submit" />
19 </form>
20 </body>
21 </html>

Hasilnya:
Selain tag <input> dengan berbagai macam tipenya. Terdapat beberapa tag yang dapat digunakan untuk membuat field dalam form. Lihat
juga materi tentang struktur html.

Tag <select>

Tag <select> digunakan untuk membuat form inputan berdasarkan pilihan yang sudah disediakan.

Cara Membuat Select Option di HTML

Select Option dibuat menggunakan tag <select> dengan atribut name. Lalu di dalam select ditambahkan daftar pilihan-pilihan
menggunakan tag <option> dengan atribut value. Agar lebih jelas berikut contohnya:

1 <select name="jurusan">
2 <option value="informatika">Teknik Informatika</option>
3 <option value="komputer">Teknik Komputer</option>
4 <option value="telekomunikasi">Teknik Telekomunikasi</option>
5 <option value="elektronika">Teknik Elektronika</option>
6 </select>

Perbedaan antara select dengan input adalah tag <select> biasanya berupa menu dropdown yang value-nya berada pada tag <option>
sedangkan tag <input> berupa checkbox atau radio button yang harus mendefinisikan value-nya di dalam atribut tag <input>. Untuk lebih
jelasnya berikut ini contoh kode perbedaannya:

1 <select name="jurusan">
2 <option value="informatika">Teknik Informatika</option>
3 <option value="komputer">Teknik Komputer</option>
4 <option value="telekomunikasi">Teknik Telekomunikasi</option>
5 <option value="elektronika">Teknik Elektronika</option>
6 </select>
7
8 <input type="checkbox" name="jurusan2" value="informatika"> Teknik Informatika<br>
9 <input type="checkbox" name="jurusan2" value="komputer"> Teknik Komputer<br>
10 <input type="checkbox" name="jurusan2" value="telekomunikasi"> Teknik Telekomunikasi<br>
11 <input type="checkbox" name="jurusan2" value="elektronika"> Teknik Elektronika<br><br>
Tag <textarea>

Tag <textarea> digunakan untuk membuat field berupa text namun dengan ukuran yang lebih besar. Perbedaannya dengan input type
text adalah pada ukurannya.

Penggunaan pada halaman web biasanya untuk menginputkan teks yang lebih banyak seperti paragraf atau bahkan konten tulisan 1
halaman. Berbeda dengan input type text yang hanya digunakan untuk menginputkan 1 kalimat.

Cara membuat textarea:

1 <textarea rows="5" cols="100" name="diskripsi">


2 ini adalah isi dari textarea. boleh diisi banyak kata mulai dari 1 kata, 1 paragraf hingga 1 halaman penuh.
3 </textarea>

Atribut rows digunakan untuk menentukan tinggi dari textarea, sedangkan cols digunakan untuk menentukan lebar dari textarea.

Ketiga tag di atas <input>, <select> dan <textarea> adalah elemen-elemen untuk menginputkan data. Dalam form juga terdapat elemen-
elemen yang digunakan untuk mempercantik tampilan diantaranya adalah <label>, <fieldset> <legend> dan <button>.

Tag <label>

Tag <label> digunakan untuk memberi label, keterangan atau judul pada sebuah field. Tag <label> disarankan menggunakan atribut for
yang fungsinya jika teks label tersebut di-klik maka kursor akan mengarah ke field tujuan. Agar label dan field terhubung maka pada field
harus menggunakan atribut id dengan value atau isi yang sama dengan atribut for. Contoh:

1 <label for="idusername">Username:</label> <input id="idusername" type="text" name="username" />

Penjelasan: Isi atribut for dan atribut id sama yaitu “idusername”.

Tag <fieldset> dan Tag <legend>

Tag <fieldset> digunakan untuk mengelompokkan field yang saling terkait, misalnya fieldset tentang alamat berisikan field jalan,
kecamatan, kabupaten dan provinsi.
1 <fieldset>
2 <legend>Alamat:</legend>
3 <p>Jalan: <input type="text" name="jalan"></p>
4 <p>Desa: <input type="text" name="desa"></p>
5 <p>Kecamatan: <input type="text" name="kecamatan"></p>
6 <p>Kabupaten: <input type="text" name="kabupaten"></p>
7 <p>Provinsi: <input type="text" name="provinsi"></p>
8 </fieldset>

Lihat juga: membuat tabel di HTML dengan mudah.

Setelah memahami fungsi masing-masing elemen beserta potongan kode HTML pada tiap elemen, kita dapat mencoba membuat beberapa
form diantaranya adalah form login dan pendaftaran.

Cara membuat Form login dengan HTML

Untuk membuat form login dengan HTML, field yang dibutuhkan adalah username dan password. Username dapat menggunakan input
type text, lalu password dapat menggunakan input type password. Kemudian ditambahkan tombol submit untuk proses login.

Kode HTML form login:

1 <html>
2 <head><title>Belajar Form</title></head>
3 <body>
4 <form action="login.php" method="POST">
5 <fieldset>
6 <legend>Login form</legend>
7 <p><label for="idusername">Username:</label> <input id="idusername" type="text" name="username" placeholder="username anda" /></p>
8 <p><label for="idpass">Password:</label> <input id="idpass" type="password" name="password" /></p>
9 <input type="reset" value="Reset"> <input type="button" name="submit" value="Login" />
10 </fieldset>
11 </form>
12 </body>
13
14 </html>

Hasilnya:
Cara Membuat Form Pendaftaran dengan HTML

Form pendaftaran HTML dibuat menggunakan beberapa field yang berisi data diri user. Informasi tentang username, password dan email
juga diperlukan untuk proses registrasi.

Kode HTML form pendaftaran:

1 <html>
2 <head><title>Belajar Form</title></head>
3 <body>
4 <form action="register.php" method="POST">
5 <fieldset>
6 <legend>User login info</legend>
7 <p><label for="idusername">Username:</label> <input id="idusername" type="text" name="username" placeholder="username anda" /></p>
8 <p><label for="idemail">Email:</label> <input id="idemail" type="email" name="email" placeholder="alamat email" /></p>
9 <p><label for="idpassword">Password:</label> <input id="idpassword" type="password" name="password" /></p>
</fieldset>
10
<fieldset>
11
<legend>Data diri</legend>
12
<p><label for="idalamat">Alamat:</label> <input id="idalamat" type="text" name="alamat" placeholder="alamat rumah" /></p>
13
<p><label for="idtanggallahir">Tanggal lahir:</label> <input id="idtanggallahir" type="date" name="tanggallahir" /></p>
14
<p><label for="idusia">Usia:</label> <input id="idusia" type="number" name="usia" placeholder="usia anda" /></p>
15
<p><label>Jenis kelamin:</label>
16
<input type="radio" name="jeniskelamin" value="pria"> Pria
17
<input type="radio" name="jeniskelamin" value="wanita"> Wanita</p>
18
</fieldset>
19
<fieldset>
20
<p><label for="idagree">Saya bersedia mengikuti aturan forum</label> <input type="checkbox" name="bersedia_ikut" value="ya" id="idagree"></p>
21
<p><input type="reset" value="Reset"> <input type="button" name="submit" value="submit" /></p>
22
</fieldset>
23
</form>
24
</body>
25
26
</html>
Form adalah element HTML yang paling kompleks. Form memiliki banyak elemen dan atribut didalamnya. Kita tidak perlu menghafal
semua elemen beserta atributnya. Yang terpenting kita mengerti bagaimana cara membuat dan menambahkan elemen-elemen yang tepat
untuk form kita. Jika ada pertanyaan atau kurag jelas tentang materi form HTML ini silahkan kirimkan komentar.

Anda mungkin juga menyukai