FORM dalam HTML

Form dalam HTML digunakan untuk mengirim data ke  Server.

Tag yang digunakan untuk membuat form dalam HTML

<form>

 input elements

</form>


Form mempunyai beberapa atribut sbb :

- Method :  cara  bagaimana cara datadari form  dikiri, data dari form dapat di kirim sebagai variabel dalam URL (dengan metode GET) atau sebagai HTTP post transaction ( dan meteode POST)

- Action :  menunjukan kemana form-data dikirim setelah di form di submit

- Enctype : menunjukan bagaimana kita meng encoded data-form ketika dikirim ke server ( Ketika kita menggunakan metode "POST"),  contoh : ketika kita mengupload file kita menggunakan tipe enctype="multipart/form-data"


Beberapa element input dasar yg sering di gunakan :

1. Text Field  : <input type="text">

2. Password Field : <input type="password" name="pwd">

3. Radio Button : <input type="radio" name="sex" value="male">Male<br>

4. Check Button : <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

5. Submint Button :  <input type="submit" value="Submit">

6. Text Area : <textarea rows="5" cols="30">

7.File Upload field :  <input type="file" name="selectedfile" />

8. Combo Box :

 <select name="something">

  <option value="Google">Google</option>

  <option value="Bing">Bing</option>

  <option value="Yahoo">Yahoo</opton>

 </select>

</form>

9. Reset Button : <input type="reset" value="Reset Form" name="submit">

10. <fieldset> : untuk mengelompokan  elemen2 yang berkaitan dalam kota berbentuk lingakaran..
11  <fieldset disable> : element2 dalam fieldset menjadi disable atau tidak dapat di akses.
12.  Legend :  memberi judul pada fielset
 contoh :
<form>
<filedset>
<legend>Judul pada fielset </legend>
</fielset>

</form>

13. Hidden : Hidden field mirip dengan textfield dengan satu perbedaan yang sangat penting yaitu
 hidden field tidak ditampilakan dalam form., tujuan pengunaah hidden field adalah mengirim data yang tidak diinput oleh user.

Setiap input elemen  mempunyai beberapa atribut sbb:

- Name :  nama ini untuk mengenali/ memberi nama input elemen, pada saat  data form di proses

- Value : Atribut value  menunjukan nilai yang di kirim  ke server ketika form di proses..

- ID :   Di gunakan untuk memberikan pengenal untu input element yang nantinya digunakan pada CSS and JavaScript/jQuery


Tipe Input Baru di HTML 5 :

1. color : <input type="color" name="favcolor">

2. Date : <input type="date" name="bday">

3. Datetime : <input type="datetime" name="bdaytime">

4. Datetime-local : <input type="datetime-local" name="bdaytime">

5. Email : <input type="email" name="email">

6. Month : <input type="month" name="bdaymonth">

7. Number :<input type="number" name="quantity" min="1" max="5">

8. Range : <input type="range" name="points" min="1" max="10">

9. Search : <input type="search" name="googlesearch">

10. Tel : <input type="tel" name="usrtel">

11. Time : <input type="time" name="usr_time">

12.URL : <input type="url" name="homepage">

13. Week : <input type="week" name="week_year">

HTML 5 FORM ATTRIBUTE :
- Placeholder :

<input type="text" name="user-name" id="user-name" placeholder="at least 3 characters">

- Autofocus:

<input type="text" name="first-name" id="first-name" autofocus>

- Autocomplete:

<input type="text" name="tracking-code" id="tracking-code" autocomplete="off">

 - Required :

<input type="text" id="given-name" name="given-name" required>

- Pattern :

<input pattern="[0-9][A-Z]{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/>

- List and Data list :

 <label>Your favorite fruit:<datalist id="fruits">
  <option value="Blackberry">Blackberry</option>
  <option value="Blackcurrant">Blackcurrant</option>
  <option value="Blueberry">Blueberry</option>
  <!-- … -->
</datalist>
If other, please specify:
  <input type="text" name="fruit" list="fruits">
</label> 

 - Nonvalidate dan formnovalidate : 

<input type="submit" formnovalidate value="Submit">

<form action="process.php" novalidate>

- Formaction :<input type="submit" value="Submit" formaction="process.php">

- Formenctype :
<input type="submit" value="Submit" formenctype="application/x-www-form-urlencoded">

- Formmethod:<input type="submit" value="Submit" formmethod="POST">

- Formtarget :<input type="submit" value="Submit" formtarget="_self">

Nb : Belum semua browser mendukung Tipe Input HTML 5 (opera & crome sudah mendukung)