Pengolahan Input User lengkap beserta latiahan dan pengertiannya

Pengolahan Input User

Tujuan :

1. Memahami tentang penggunaan Form
2. Memahami tentang perbedaan antara metode GET & POST
3. Memahami tentang pemrosesan file upload dengan nama yang sama
4. Memahami tentang pemrosesan file upload dengan nama yang berbeda

PENGOLAHAN DATA DARI FORM

Web menerima input dari user atau pengunjung menggunakan metode GET dan POST. GET akan mengirimkan data bersama dengan URL, sedangkan POST mengirimkannya secara terpisah.

User mengirimkan data input dengan mengisi teks atau pilihan pada attribut form html. Apa saja yang merupakan komponen form html diantaranya :

Form

<FORM ACTION=action base> form tags </FORM> 

<FORM METHOD=method> form tags </FORM> 

<FORM ENCTYPE=media type> form tags </FORM> 

<FORM ACTION=action base TARGET="target window name"> form tags </FORM> 

<FORM SCRIPT=URL> form tags </FORM>

Note : target window name  diisikan berupa:

_blank

_self

_parent

_top

Form Input Check Box

<INPUT TYPE=CHECKBOX NAME=name VALUE=value> 

<INPUT TYPE=CHECKBOX NAME=name VALUE=value CHECKED>

Form Input File

<INPUT TYPE=FILE NAME=name ACCEPT=mime type list>

Form Input Hidden

<INPUT TYPE=HIDDEN NAME=name VALUE=value>

Form Input Image

<INPUT TYPE=IMAGE NAME=name SRC="URL"> 

  <INPUT TYPE=IMAGE NAME=name SRC="URL" ALIGN="alignment">

Form Input Password

<INPUT TYPE=PASSWORD NAME=name> 

<INPUT TYPE=PASSWORD NAME=name MAXLENGTH=length> 

<INPUT TYPE=PASSWORD NAME=name SIZE=size> 

<INPUT TYPE=PASSWORD NAME=name VALUE=value>

Form Input Radio Button

<INPUT TYPE=RADIO NAME=name VALUE=value> 

<INPUT TYPE=RADIO NAME=name VALUE=value CHECKED>

Form Input Range

This is not supported in many browsers.

<INPUT TYPE=RANGE NAME=name MIN=min MAX=max> 

<INPUT TYPE=RANGE NAME=name MIN=min> MAX=max VALUE=value>

Form Input Reset

<INPUT TYPE=RESET>

Form Input Submit

<INPUT TYPE=SUBMIT> 

<INPUT TYPE=SUBMIT NAME=name> 

<INPUT TYPE=SUBMIT VALUE=value>

Form Input Button

<INPUT TYPE=BUTTON> 

<INPUT TYPE=BUTTON NAME=name> 

<INPUT TYPE=BUTTON VALUE=value>

Form Input Text

<INPUT TYPE=TEXT NAME=name> 

<INPUT TYPE=TEXT NAME=name MAXLENGTH=length> 

<INPUT TYPE=TEXT NAME=name SIZE=size> 

<INPUT TYPE=TEXT NAME=name VALUE=value>

Form Select

<SELECT NAME=name> option entries </SELECT> 

<SELECT NAME=name MULTIPLE> option entries </SELECT> 

<SELECT NAME=name SIZE=size> option entries </SELECT> 

<SELECT NAME=name SRC=URL WIDTH=width HEIGHT=height UNITS=units> option entries </SELECT> 

<OPTION> content 

<OPTION SELECTED> content 

<OPTION VALUE=value> content 

<OPTION SHAPE=shape>

Form Text Area

<TEXTAREA NAME=name COLS=# columns ROWS=# rows> content </TEXTAREA>

UPLOAD FILE

Upload merupakan proses penyalinan data yang ada dari komputer client  ke komputer server. Faslilitas upload memungkinkan aplikasi web misalnya pendaftaran keanggotaan yang menggunakan foto, atau lainnya. Namun biasanya upload digunakan untuk mempermudah administrasi.

Contoh program

Form

<form action="action" base="">

form tags </form>

<form method="method">

form tags </form>

<form enctype="media" type="">

form tags </form>

<form action="action" base="" target="target window name">

form tags </form>

<form script="URL">

form tags </form>

Tampilan program

form tags

form tags

form tags

form tags

form tags

Note : target window name diisikan berupa:
_blank
_self
_parent
_top

Form Input Check Box

<input name="name" type="checkbox" value="value" /> <input checked="checked" name="name" type="checkbox" value="value" />

Tampilan program
 


Form Input File

<input accept="mime" list="" name="name" type="file" />

Tampilan program


Form Input Hidden

<input name="name" type="hidden" value="value" />

Form Input Image

<input name="name" src="URL" type="image" /> <input align="alignment" name="name" src="URL" type="image" />

Form Input Password

<input name="name" type="password" /> <input maxlength="length" name="name" type="password" /> <input name="name" size="size" type="password" /> <input name="name" type="password" value="value" />

Tampilan program
   

Form Input Radio Button

<input name="name" type="radio" value="value" /> <input checked="checked" name="name" type="radio" value="value" />

Tampilan program
 

Form Input Range
This is not supported in many browsers.

<input max="max" min="min" name="name" type="RANGE" /> <input min="min" name="name" type="RANGE" /> MAX=max VALUE=value&gt;

Tampilan program
  MAX=max VALUE=value>

Form Input Reset

<input type="reset" />

Tampilan Program


Form Input Submit

<input type="submit" /> <input name="name" type="submit" /> <input type="submit" value="value" />

Tampilan Program 
  

Form Input Button

<input type="button" /> <input name="name" type="button" /> <input type="button" value="value" />

Tampilan program
  

Form Input Text

<input name="name" type="text" /> <input maxlength="length" name="name" type="text" /> <input name="name" size="size" type="text" /> <input name="name" type="text" value="value" />

Tampilan program
   

Form Select

<select name="name"> </select> <select multiple="multiple" name="name"> </select> <select name="name" size="size"> </select> <select height="height" name="name" src="URL" units="units" width="width"> </select>  content  content  content

Tampilan program
        content content content

Form Text Area

<textarea cols="#" columns="" name="name" rows="#"> content </textarea>