HTML FORM DAN HTML5

HTML FORM

1.TextField, Elemen yang digunakan untuk memasukan text dalam satu baris.

Script :

<form>

First name:<br>

<input type="text" name="firstname">

<br>

Last name:<br>

<input type="text" name="lastname">

</form>

Hasil :

2.Radio Button, digunakan agar dapat memilih salah satu pilihan. Misalnya jenis kelamin

Script :

<form>

Gender :

<br>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form>

Hasil :

3.Submit, digunakan untuk mengirimkan data dari halaman web ke server. Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilainya ke suatu aplikasi ynag ditentukan dalam atribut action dalam elemen form.

Script :

<form action="action_page.php">

First name:<br>

<input type="text" name="firstname" value="Alfi">

<br>

Last name:<br>

<input type="text" name="lastname" value="Andika">

<br><br>

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

</form>

Hasil :

4.Checkbox, adalah elemen input yang digunakan untuk dapat memilih lebih dari satu pilihan dengan tipe checkbox.

Script :

Hobi:

 <form>

<input type="checkbox" name="hobby" value="Menyanyi">Menyanyi

<br>

<input type="checkbox" name="hobby" value="Menggambar">Menggambar

<br>

<input type="checkbox" name="hobby" value="Belanja">Belanja

<br>

</form>

Hasil :

5.Password, Elemen ini digunakan untuk memasukan data baris teks dengan format password. Dengan karakter yang disamarkan dengan bulatan atau tanda “*”.

Script :

<form>

User password:<br>

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

</form>

Hasil :

6.Listbox, Listbox digunakan untuk menampilkan daftar dalam bentuk drop-down list.

Script :

Job :

<br>

<select name="job">

<option value="pelajar">Pelajar/Mahasiswa</option>

<option value="PNS">Pegawai Negeri Sipil</option>

<option value="karyawan">Karyawan</option>

<option value="wiraswasta">Wiraswasta</option>

</select>

Hasil :

7.Combobox , digunakan untuk dapat memilih lebih dari satu pilihan dengan atribut multiple.

Script :

Hobby :

<br>

<select name="hobi" multiple="multiple">

  <option value="">--Pilih Hobi--</option>

  <option value="1">1. Menyanyi</option>

  <option value="2">2. Mengganmbar</option>

  <option value="3">3. Belanja</option>

 </select>

Hasil :

8.Textarea, Elemen ini digunakan sebagai input kontrol form untuk memasukan teks lebih dari satu baris. Elemen ini mempunyai atribut yaitu name, rows, dan cols.

Script :

Address :

<br>

<textarea name="message" rows="10" cols="30">

Desa TlogoAgung - Jagir Baureno Bojonegoro

</textarea>

Hasil : 

 

9.File, adalah elemen input yang digunakan untuk upload file dengan atribut tipe=”file”. Pemrosesan upload sendiri akan melibatkan banyak web server.

Script :

<form name="form_upload" >

Input file :

<input type="file">

<br>

Input file :

<input type="file">

<br>

Input file :

<input type="file">

</form>

Hasil :

 

 










HTML 5

INPUT TYPES

1.Color, digunakan untuk memilih warna.

Script :

<form>

  Pilih Warna kesukaanmu :

  <input type="color" name="favcolor">

</form>

Hasil :

2.Date, digunakan untuk input tanggal.

Script :

<form>

  Date :

  <input type="date" name="bday">

</form>

Hasil :

3.Datetime, digunakan untuk memilih tanggal dan waktu (dengan zona waktu).

Script :

<form>

  Birthday (date and time):

  <input type="datetime" name="bdaytime">

</form>

Hasil :

4.Datetime-local, digunakan untuk memilih tanggal dan waktu tetapi tidak dengan zona waktu.

Script :

<form>

  Birthday (date and time):

  <input type="datetime-local" name="bdaytime">

</form>

Hasil :

5.Email, digunakan untuk input field yang berisi alamat email. Alamat email secara otomatis divalidasi ketika submit.

Script :

<form>

  E-mail:

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

</form>

Hasil :

6.Month, digunakan untuk memilih bulan dan tahun.

Script :

<form>

  Birthday (month and year):

  <input type="month" name="bdaymonth">

</form>

Hasil :

7.Number, juga sama dengan input text, namun input number hanya dapat diisi dengan angka.

Script :

<form>

  Quantity (between 1 and 5):

  <input type="number" name="quantity" min="1" max="5">

</form>

Hasil :

8.Range,  digunakan untuk memilih angka dalam batasan nilai tertentu.

Script :

<form>

Pilih angka:

  <input type="range" name="points" min="0" max="10">

</form>

Hasil :

9.Search, digunakan untuk pencarian field-field. Field pencarian menunjukkan teks field biasa.

Script :

<form>

  Search Google:

  <input type="search" name="googlesearch">

</form>

Hasil :

10.Tel, digunakan untuk input nomor telepon.

Script :

<form>

  Telephone:

  <input type="tel" name="usrtel">

</form>

Hasil :

11.Time, digunakan untuk memilih waktu (tidak dengan zona waktu).

Script :

<form>

  Select a time:

  <input type="time" name="usr_time">

</form>

Hasil :

12.URL, Tipe input ini sama seperti teks yang berisi alamat URL. Alamat URL secara otomatis dapat memvalidasi apakah input tersebut valid atau tidak.

Script :

<form>

  Add your homepage:

  <input type="url" name="homepage">

</form>

Hasil :

13.Week, digunakan untuk memilih minggu dan tahun.

Script :

<form>

  Select a week:

  <input type="week" name="week_year">

</form>

Hasil :

INPUT ATTRIBUTES

14.Autocomplete, menentukan apakah formulir isian atau masukan harus memiliki AutoComplete atau menonaktifkan. Ketika autocomplete aktif, browser secara otomatis melengkapi nilai berdasarkan pada nilai-nilai yang telah masuk sebelumnya oleh pengguna.

Script :

<form action="action_page.php" autocomplete="on">

  First name:<input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  E-mail: <input type="email" name="email" autocomplete="off"><br><br>

  <input type="submit">

</form>

Hasil :

15.Autofocus, adalah atribut Boolean. Ketika atribut autofocus ditampilkan, itu akan menentukan bahwa sebuah elemen input harus focus secara otomatis ketika halaman loading.

Script :

First name:<input type="text" name="fname" autofocus>

Hasil :

16.Form, Form atribut ditentukan oleh satu ata lebih elemen <input> yang dipunyai. Untuk melihat lebih dari satu form, gunakanlah pace-separated list dari form id.

Script :

<form action="action_page.php" id="form1">

  First name: <input type="text" name="fname"><br>

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

</form>

Last name: <input type="text" name="lname" form="form1">

Hasil :

17.Formaction, Atribut formaction digunakan untuk menentukan URL dari file yang akan memproses input control ketika form dikirim.

Script :

<form action="action_page.php">

  First name: <input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br><br>

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

  <input type="submit" formaction="demo_admin.asp"

  value="Submit as admin">

</form>

Hasil :

18.Formentype, digunakan untuk menentukan bagaimana form data dikodekan ketika mengirim ke server (hanya untuk form dengan metode post).

Script :

<form action="demo_post_enctype.asp" method="post">

  First name: <input type="text" name="fname"><br><br>

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

  <input type="submit" formenctype="multipart/form-data"

  value="Submit as Multipart/form-data">

</form>

Hasil :

 19.Formmethod, digunakan untuk menentukkan HTTP method yang digunakan oleh browser untuk mengirim data form. Atribut ini digunakan dengan tipe “submit” dan “image”.

Script :

<form action="action_page.php" method="get">

  First name: <input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br><br>

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

  <input type="submit" formmethod="post" formaction="demo_post.asp"

  value="Submit using POST">

</form>

Hasil :

20.Formnovalidate, adalah atribut Boolean. Ketika ditampilkan, atribut tersebut menentukan elemen <input> seharusnya tidak divalidasi ketika dikirim pada server.

Script :

<form action="action_page.php">

  E-mail: <input type="email" name="userid"><br>

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

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

</form>

Hasil :

21.Formtarget, digunakan untuk menentukan sebuah nama atau keyword  yang menunjukkan dimana respon diterima setelah pengiriman form. Atribut ini hanya untuk input elemen yang memiliki atribut tipe “submit” dan “image”.

Script :

<form action="action_page.php">

  First name: <input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  <input type="submit" value="Submit as normal">

  <input type="submit" formtarget="_blank"

  value="Submit to a new window">

</form>

Hasil :

22.Height and Width, digunakan untuk menentukan tinggi dan lebar dari elemen <input>. Atribbut ini hanya digunakan untuk input tipe image.

Script :

<input type="image" src="Vio.jpg" alt="Vio" width="250" height="250">

Hasil :

23.List, digunakan untuk menentukan elemen <datalist> yang berisi pilihan sebelum digambarkan untuk elemen <input>.

Script :

<input list="browsers">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

Hasil :

24.Min and Max, digunakan untuk menentukkan nilai maksimal dan minimal sebuah elemen input dengan tipe number, range, date, datetime, datetime-local, month, time dan week.

Script :

Enter a date before 1980-01-01:

<input type="date" name="bday" max="1979-12-31">

<br><br>

Enter a date after 2000-01-01:

<input type="date" name="bday" min="2000-01-02">

<br><br>

Quantity (between 1 and 5):

<input type="number" name="quantity" min="1" max="5">

Hasil :

25.Multiple, adalah atribut Boolean. Ketika ditampilkan, atribut tersebut menunjukkan pengguna untuk memasukkan nilai lebih dari satu elemen <input> dan bekerja dengan tipe input email dan file.

Script :

Select images: <input type="file" name="img" multiple>

Hasil :

26.Pattern (regexp), menentukkan pola bahasa regular expression yang akan diberlakukan pada nilai untuk sebuah <input> element. Regular expression merupakan bahasa yang sama dengan javascript.

Script :

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Hasil :

27.Placeholder, menentukkan teks yang dijadikan isyarat untuk user apa yang seharusnya mereka tulis. Teks ini biasanya terlihat untuk sementara dan apabila user hendak menyisipkan karakter didalam element <input>, teks akan menghilang dengan sendirinya atau berpindah tempat.

Script :

First Name : <input type="text" name="fname" placeholder="First name">

Hasil :

28.Required, adalah atribut boolean yang menentukkan bahwa konten didalam <input> element diperlukan, harus diisi dan tidak boleh dikosongkan sebelum data dikirim ke server.

Script :

Username: <input type="text" name="usrname" required>

Hasil :

29.Step, menentukkan interval waktu atau jumlah dalam hitungan tertentu (penambahan atau kelipatannya) untuk elemen <input>. Attribute ini bekerja dengan attribute lain yaitu min dan max.

Script :

<input type="number" name="points" step="3">

Hasil :