HTML FORM dan HTML5

HTML FORM

1.    TextField

Penjelasan :

Elemen yang digunakan untuk memasukan text dalam satu baris. Lebar karakter defaultnya adalah 20 karakter.

Script :

<form>

First name:<br>

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

<br>

Last name:<br>

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

</form>

Hasil :

2.    Radio Button

Penjelasan :

Radio button digunakan agar dapat memilih salah satu pilihan. Contoh jenis kelamin (male atau female).

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

Penjelasan :

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="Dewi Citra">

<br>

Last name:<br>

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

<br><br>

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

</form>

Hasil :

4.    Checkbox

Penjelasan :

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

Script :

Hobby :

 <form>

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

<br>

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

<br>

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

<br>

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

</form>

Hasil :

5.    Password

Penjelasan :

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

Penjelasan :

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

Penjelasan :

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. Membaca</option>

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

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

  <option value="4">4. Melukis</option>

  <option value="5">5. Bernyanyi</option>

</select>

Hasil :

8.    Textarea

Penjelasan :

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">

Dusun Krajan Rt 06 Rw 02 Desa Lajolor Kec. Singgahan Kab.Tuban.

</textarea>

Hasil :

9.    File

Penjelasan :

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

Penjelasan :

Input color digunakan untuk memilih warna.

Script :

<form>

  Select your favorite color:

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

</form>

Hasil :

2.    Date

Penjelasan :

Tipe Date digunakan untuk input tanggal.

Script :

<form>

  Date :

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

</form>

Hasil :

3.    Datetime

Penjelasan :

Tipe 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

Penjelasan :

Tipe 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

Penjelasan :

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

Penjelasan :

Tipe Month digunakan untuk memilih bulan dan tahun.

Script :

<form>

  Birthday (month and year):

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

</form>

Hasil :

7.    Number

Penjelasan :

Tipe 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

Penjelasan :

Input 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

Penjelasan :

Tipe 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

Pejelasan :

Tel digunakan untuk input nomor telepon.

Script :

<form>

  Telephone:

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

</form>

Hasil :

11.    Time

Penjelasan :

Tipe time digunakan untuk memilih waktu (tidak dengan zona waktu).

Script :

<form>

  Select a time:

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

</form>

Hasil :

12.    URL

Penjelasan :

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

Penjelasan :

Week digunakan untuk memilih minggu dan tahun.

Script :

<form>

  Select a week:

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

</form>

Hasil :

INPUT ATTRIBUTES

14.    Autocomplete

Penjelasan :

Atribut 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

Penjelasan :

Atribut 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

Penjelasan :

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

Penjelasan :

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

Penjelasan :

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

Penjelasan :

Atribut 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

Penjelasan :

Atribut 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

Penjelasan :

Atribut 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

Penjelasan :

Atribut height dan width digunakan untuk menentukan tinggi dan lebar dari elemen <input>. Atribbut ini hanya digunakan untuk input tipe image.

Script :

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

Hasil :

23.    List

Penjelasan :

Atribut 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

Penjelasan :

Atribut min dan 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

Penjelasan :

Atribut 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)

Penjelasan :

Atribut pattern 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

Penjelasan :

Atribut 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

Penjelasan :

Atribut 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

Penjelasan :

Atribut 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 :