√ Cara Membuat Form Dan Input Pada HTML

Cara Membuat Form Dan Input Pada HTML

Form merupakan elemen HTML yang digunakan agar pengguna/ pengunjung sebuah web dapat berinteraksi dengan situs web tersebut. Dengan adanya form maka si pengunjung dapat mengirimkan masukan (data) pada sebuah situs web. Contoh form diantaranya adalah form registrasi, form login, form koment dan sebagainya.

Untuk membuat form, digunakan tag <form> diawal, dan akhiri dengan </form>. Di dalam sebuah form dapat terdiri dari beberapa form lainnya dan beberapa jenis masukan (input).
Contoh sintaksnya:

<form action="url" method="get/post" enctype="">  
 </form>

Atribut action merupakan tempat menspesifikasikan url (lokasi dokumen) yang akan diproses oleh field input form. Sedangkan method digunakan untuk menyatakan bagaimana masukan dari form dikirimkan kepada program CGI.

Jenis-Jenis Masukan (Input) Pada Form

Text

Text digunakan untuk mengirimkan nilai kepada server. Nilai dapat berupa angka ataupun text, contoh:

<html>  
 <body>  
 <form>  
 Nama Depan :  
 <input type="text" name="first name"><br><br>  
 Nama Keluarga :  
 <input type="text" name="nama keluarga">  
 </form>  
 </body>  
 <html>

Radio Button

Radio Button/tombol radio meyediakan beberapa pilihan dimana hanya satu pilihan yang dapat dipilih, contoh:

<html>  
 <body>  
 <form>  
 <input type="radio" checked name="sex"> Pria <br>  
 <input type="radio" checked name="sex"> Wanita  
 </form>  
 </body>  
 <html>

Check Box

Check Box digunakan untuk memberikan beberapa pilihan dan kita dapat memilih lebih dari satu pilihan, contoh:

<html>  
 <body>  
 <form>  
 <input type="checkbox"> Baca <br>  
 <input type="checkbox"> Nonton <br>  
 <input type="checkbox"> Rekereasi <br>  
 </form>  
 </body>  
 <html>

Dropdown

Dropdown menyediakan daftar pilihan dalam box, contoh:

<html>  
 <body>  
 <form>  
 <select name="Motor">  
 <option value="honda"> Honda  
 <option value="suzuki"> Suzuki  
 <option value="yamaha"> Yamaha  
 <option value="harley"> Harley  
 </select>  
 </form>  
 </body>  
 <html>

Submit Dan Riset

Submit digunakan untuk memeanggil url ketika input selesai dimasukkan. Sedangkan reset digunakan untuk mengembalikan ketampilan semula. Perhatikan salah satu contoh diatas. Kita hanya perlu menambahkan action, method submit dan reset, contoh:

<html>  
 <body>  
 <form action="form_action.php" method="post">  
 Nama Depan :  
 <input type="text" name="first name"><br><br>  
 Nama Keluarga :  
 <input type="text" name="nama keluarga"><br><br>  
 <input type="submit" value="Submit">  
 <input type="reset" value="Reset">  
 </form>  
 </body>  
 <html>

Pada contoh diatas kita harus sudah membuat url form_action.php. Jika tombol submit di klik maka data yang telah diinput akan dikirimkan ke halaman url tersebut untuk diproses.

Button

Button adalah berupa tombol yang digunakan agar sebuah form lebih interaktif.
Contoh:

<!DOCTYPE html>  
 <html>  
 <body>  
 <input type="button" onclick="alert('Contoh Button')" value="Click Me!">  
 </body>  
 </html>

Baca Juga: Cara Membuat Login User Dengan PHP dan MySQL

Demikian Cara Membuat Form Dan Input Pada HTML, Semoga Bermanfaat

Admin

Anak UPB

Cara Membuat Form Dan Input Pada HTML