Membuat Form Input Dengan HTML

Form adalah sebuah tempat dimana tempat isi data khusus yang biasa disebut dengan bahasa indonesia adalah formulir, formulir biasa diistilahkan pada selembar kertas dan juga bisa dibuat dengan aplikasi pembuat form pada aplikasi office semacam Microsoft Office atau LibreOffice/OpenOffice Draw, namun dalam web, form digunakan untuk menginput data atau juga digunakan untuk login dan edit data, selain itu form diidentikan dengan database dari MySQL, PostgreSQL, SQLite atau Microsoft SQL dan juga bahasa server side untuk mengelola data seperti PHP, JSP, ASP.NET atau Perl. Untuk bisa membuat form kita akan jelaskan secara detail dibawah ini.

1.1 Form

Form adalah tag html yang memiliki atribut action, method dan enctype. Action merupakan aksi dari inputan form ini biasanya dialihkan ke berkas yang dibuat dengan bahasa PHP, JSP, ASP.NET atau Perl untuk mengeksekusi datanya namun seiring dengan perkembangan zaman pengguna keempat bahasa tadi sudah digantikan dengan penggunakan dari framework yang berbasis JavaScript seperti BackboneJS, AngularJS, jQuery Ajax dan lain-lain. Pada tag form juga ada tag fieldset dan legend, fieldset adalah tag untuk membuat border yang sekarang sudah digantikan dengan CSS, sedangkan legend adalah tag label untuk form yang sekarang jarang digunakan dan lebih digunakan tag heading saja. Method adalah bentuk inputan tersebut seperti post atau get namun juga sudah dikembangkan put, delete dan lain-lain, sedangkan enctype digunakan untuk upload file berkas yang memiliki nilai multipart/form-data.

...
<form action="simpan.php" method="post" enctype="multipart/form-data">
   <fieldset>
      <legend>Title Form</legend>
      ...
   </fieldset>
</form>
...

1.2 Input

Input merupakan tag-tag yang dipisahkan oleh atribut type yang terdiri dari text, number, password, search, radio, checkbox, submit, button, reset, color, date, datetime, datetime-local, email, month, range, tel, time, url dan week, pada type-type ini ada yang didukung oleh browser tertentu dan juga ada yang tidak seperti date yang berjalan pada Google Chrome namun tidak berjalan pada Mozilla Firefox. Selain itu input juga disertakan dengan tag label

1.2.1 Text

Text adalah suatu nilai dari atribut type yang dibuat untuk menginput teks, judul atau nama. Selain itu juga menggunakan atribut name untuk nama input, id untuk nama dan identitas input, placeholder untuk menampilkan kata yang samar sebagai label dalam input dan required untuk membuat validasi yang wajib diinput nilai pada inputan ini.

...
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="My Username" required/>
...

1.2.2 Number

Number merupakan nilai atribut type menginput nilai 1-xxx yang mempunyai atribut lainnya seperti min (minimal angka) dan max (maksimal angka).

...
<label>Kualitas</label>
<input type="number" name="kualitas" min="1" max="5">
...

1.2.3 Password

Password adalah nilai dari sebuah atribut type yang bergunakan membuat inputan tidak terlihat dan yang terlihat cuma titik tebal saja ditengah form.

<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="My Password" required/>
...

1.2.4 Button (Submit, Button, Reset)

Button juga merupakan nilai atribut dari atribut type dan juga sebagai tag html yang menyatakan button yang memiliki atribut type juga seperti submit, button dan reset.

...
<label>Input Button</label><br/>
<input type="submit" name="submit" value="Submit"> &nbsp;
<input type="button" name="button" value="Button"> &nbsp;
<input type="reset" name="reset" value="Reset"> <br/><br/>

<label>Tombol Button</label><br/>
<button type="submit" name="submit"> Submit </button> &nbsp;
<button type="button" name="button"> Button </button> &nbsp;
<button type="reset" name="reset"> Reset </button> <br/>
...

1.2.5 Radio dan Checkbox

Radio merupakan nilai atribut type yang berfungsi sebagai pemilihan yang boleh dipilih hanya satu diantara semua pilihan yang ada dan memiliki nama yang sama, sedangkan checkbox adalah pemilihan yang boleh dipilih banyak diantara banyak pilihan dan memiliki nama yang berbeda-beda.

...
<label>Radio</label><br/>
<input type="radio" name="rad" value="Laki-laki" checked> Laki-laki <br/>
<input type="radio" name="rad" value="Perempuan"> Perempuan <br/><br/>

<label>Checkbox</label><br/>
<input type="checkbox" name="cek1" value="Sepakbola" checked> Sepakbola <br/>
<input type="checkbox" name="cek2" value="Membaca"> Membaca <br/>
<input type="checkbox" name="cek3" value="Jalan-jalan" checked> Jalan-jalan <br/>
...

1.2.6 File dan Image

File merupakan atribut type file yang berguna untuk upload file berkas sedangkan image sudah jarang dan tidak lagi digunakan pada input form.

...
<input type="file" name="files"/>
...

1.3 Textarea

Textarea adalah input teks dibidang teks yang sangat panjang seperti penginputan artikel, deskripsi dan lain-lain dan juga textarea digunakan untuk pembuatan text editor.

...
<textarea name="editor" cols="25" rows="10">
Disini tempat anda tulis artikel anda
</textarea>
...

1.4 Select

Select adalah pilihan atau biasa dibilang sebagai input combox dan listbox, combobox pilihan berbentuk input sedangkan listbox pilihan berbentuk list yang terdiri dari item dan scrollbar. untuk item sendiri menggunakan tag option yang berarti item dan optgroup yang berarti kumpulan item/opsi.

...
<label>Combobox</label><br/>
<select name="merek">
    <option value="mob-volvo">Mobil Volvo</option>
    <option value="mob-saab" selected>Mobil Saab</option>
    <option value="mob-fiat">Mobil Fiat</option>
    <option value="mob-audi">Mobil Audi</option>
</select><br/><br/>

<label>listbox</label><br/>
<select name="merekjuga" multiple>
    <option value="mob2-volvo">Mobil Volvo</option>
    <option value="mob2-saab">Mobil Saab</option>
    <option value="mob2-fiat">Mobil Fiat</option>
    <option value="mob2-audi">Mobil Audi</option>
</select><br/><br/>
...

1.5 Datalist

Datalist adalah tag html untuk form input yang berfungsi sebagai autocomplete yang datanya sudah ditentukan dari awal.

...
<label>Tags</label><br/>
<input list="browser">
<datalist id="browser">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
...

1.6 Keygen

Keygen adalah tag html untuk form yang lebih ditekankan pada keamanan dengan nama encryption.

...
<label>Username</label><br/>
<input type="text" name="username"><br/>

<label>Encryption</label><br/>
<keygen name="security">
...

1.7 Output

Output adalah hasil dari penginputan yang biasa digunakan bersamaan dengan penggunakan JavaScript sehingga menghasilkan sesuatu pada saat tombol button diklik.

...
<form oninput="z.value=parseInt(x.value)+parseInt(y.value)">
  0 <input type="range" name="x" value="50"> 100 +
  <input type="number" id="y" name="y" value="50">
  = <output name="z" for="x y"></output>
  <br><br>
</form>
...

1.8 Code Penuh

Code penuh adalah sintaks penuh dari sebuah form yang sering digunakan pada dunia maya atau internet seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<form action="" method="post" enctype="multipart/form-data">
<p>
   <label>Text</label>
   <input type="text" name="text">
</p>
<p>
   <label>Email</label>
   <input type="email" name="email">
</p>
<p>
   <label>Website</label>
   <input type="url" name="website">
</p>
<p>
   <textarea name="pesan"></textarea>
</p>
<button type="submit">Publish</button>
</form>

</body>
</html>

 

Animate Placeholder Input Using jQuery and Bootstrap

Animate Placeholder Input Using jQuery and Bootstrap

How to create animates placeholder on form inputs to label using jquery and bootstrap

animateformlabelholder

Import Library

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="phanimate.jquery.js"></script>

Make Content

  <div class="container">
    <form>
<div class="custom-input">
  <label for="firstname">First Name</label>
  <input type="text" class="form-control" id="firstname">
</div>

<div class="custom-input">
  <label for="test">Test 1</label>
  <input type="text" class="form-control" id="test">
</div>

<div class="custom-input">
  <label for="test2">Test 2</label>
  <input type="text" class="form-control" id="test2" placeholder="test 2">
</div>

<div class="custom-input">
  <label>Test 3</label>
  <input type="text" class="form-control" placeholder="Placeholder 3">
</div>

<div class="custom-input">
  <label>Test 4</label>
  <input type="text" class="form-control">
</div>

<div class="custom-input">
  <input type="text" class="form-control" placeholder="Test 5">
</div>
  </form>
  </div>