Mengenal Komponen Yang Terdapat Pada Form

-
Form atau formulir pada sebuah halaman website dapat digunakan untuk menerima input dari pengguna. Masukan yang di terima dari pengguna berupa data yang akan di kirim ke server untuk di proses atau di simpan pada database sehingga dapat di olah menjadi sebuah informasi yang bermanfaat.
Halaman website yang berisi formulir biasanya digunakan untuk pendaftaran secara online, login pada sebuah website, fasilitas chating, dan sebagainya.

Mengenal komponen yang membentuk form

Sebelum Anda membuat sebuah form pada halaman web, Anda harus memahami beberapa bagian yang terdapat pada form diantaranya elemen, attribut, dan type.

1. Elemen Form

Elemen form merupakan tag atau bagian menentukan suatu bentuk form yang akan dibuat, ada beberapa elemen form yang biasa digunakan yaitu <form>, <input>, <textarea>, <label>, <fieldset>, <legend>, <select>, <optgroup>, <option>, <button>, <datalist>, <output>, dsb.

2. Atribut Form

Atribut Form merupakan bagian dari elemen form yang mengatur bentuk, nama, dan status dari sebuah form seperti mengaktifkan atau menonaktifkan bentuk inputan pada sebuah form. Atribut umum yang digunakan pada sebuah elemen form yaitu type, name, dan value.

3. Type Form

Form type merupakan bagian yang mengatur atau menentukan bagaimana bentuk tampilan pada setiap input. Misalkan form input dapat menerima data dalam bentuk teks biasa, tanggal, email, file, waktu, dll. Ada beberapa jeni type form yang dapat digunakan antara lain: button, checkbox, color, date, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, phone, text, time, url, dan week.

Untuk membuat form pada halaman web maka digunakan elemen <form> yang menjadi bingkai yang membentuk dan membungkus beberepa elemen input seperti text fields, radio, checkbox, submit, dll.

Berikut ini adalah struktur dasar dalam membuat form pada halaman website.

<form>

.form elements.

</form>

Didalam sebuah elemen form terdapat beberapa elemen lain seperti <label> untuk menuliskan judul form, dan elemen input lainnya yang berfungsi untuk menerima input sesuai jenis atau bentuk formnya.

Berikut merupakan contoh membuat form sederhana untuk menerima input berupa nama depan dan nama belakang.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Selanjutnya beberapa contoh lain untuk membuat form dengan berbagai jenis input antara lain:

Membuat form dengan type text

<form>
  <label for="fname">Nama Depan:</label><br>
  <input type="text" id="fname" name="fname" value=""><br>
  <label for="lname">Nama Belakang:</label><br>
  <input type="text" id="lname" name="lname" value=""><br><br>
</form>

Membuat form dengan type radio

<form>
  <input type="radio" name="gender" value="Laki-laki">
  <label for="Laki-laki">Laki-laki</label><br>
  <input type="radio" name="gender" value="Perempuan">
  <label for="Perempuan">Perempuan</label><br>
</form>

Membuat form dengan type checkbox

<form>
  <input type="checkbox" name="hobi1" value="Musik">Musik<br>
  <input type="checkbox" name="hobi2" value="Shoping">Shoping<br>
  <input type="checkbox" name="hobi3" value="Olahraga">Olahraga
</form>

Membuat form berbentuk select

<form>
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit">
</form>

Membuat form dengan textarea

<form>
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

Membuat form dengan fieldset

<form>
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Membuat form dengan datalist

<form> >
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

Membuat form dengan type color

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

Membuat form dengan type date

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

Membuat fom dengan type email

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

Membuat form dengan type file

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

Membuat form dengan type hidden

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

Membuat form dengan type month

<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>

Membuat form dengan type number

<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Membuat form dengan type range

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

Membuat form dengan type search

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

Membuat form dengan type time

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>

Membuat form dengan type Url

<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>

Membuat form dengan type Week

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>

Membuat form dengan atribut readonly

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

Membuat form dengan atribut disabled

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

Membuat form dengan atribut size

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

Membuat form dengan atribut maxlength

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

Membuat form dengan atribut multiple file

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

Membuat form dengan atribut placeholder

<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Membuat form dengan atribut required

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

Membuat form dengan atribut autofocus

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Membuat form dengan atribut height dan width

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

Membuat form dengan artibut action dan post

<form action="/action_page_binary.asp" method="post">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

Membuat form dengan atribut action dan get

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

Dari beberapa contoh bentuk form diatas, Anda dapat membuat sesuai keinginan dan kebutuhan pada website yang akan Anda buat. Sebuah bentuk form yang baik yaitu yang sesuai dengan data yang akan di terima sehingga data yang akan di olah menjadi data yang valid dan menjadi informasi yang bermanfaat.

Komentar

Posting Komentar

Postingan populer dari blog ini

Fungsi Manipulasi Array

-
Gambar
Array Dalam banyak aplikasi Web, seringkali kita membutuhkan sebuah variabel yang mampu menyimpan beberapa nilai sekaligus secara terorganisir, sehingga lain saat kita dapat memperoleh kembali nilai-nilai tersebut dengan mudah dan dalam bentuk yang teratur dan terorganisir pula. Tidak, bukan database yang saya maksud, karena saya sedang bicara variabel, dan database  bukan  variabel. Array di PHP adalah tipe variabel spesial, karena dengan array kita dapat mengakses sekumpulan nilai dengan menggunakan satu nama variabel. Mekanisme pengaksesan ini diatur dalam bentuk pemetaan ( mapping ) dari sekumpulan nilai ( values ) ke sekumpulan kunci ( keys ) atau indeks.  Selain itu, banyaknya fungsi PHP untuk memanipulasi array membuat tipe variabel ini sangat membantu kerja kita dalam membuat aplikasi web 1.  Manipulasi Array Mengubah array menjadi string dengan fungsi toString() atau join() 2.  Manipulasi Array (Push & Pop) Push: digunakan untuk menambahkan elemen b...
Baca selengkapnya

URL (Uniform Resource Locator)

-
URL atau singkatan dari Uniform Resource Locator, adalah rangkaian situs web yang tertera, berisikan nama folder, protokol bahasa dan sebagainya. URL tidaklah sama dengan domain yang dimana Domain adalah nama situs, sementara URL akan mengarahkan pengguna ke salah satu halaman dalam situs tersebut. Setiap URL berisi nama domain, serta komponen lain yang diperlukan untuk menemukan halaman atau konten tertentu. URL mempunyai peranan penting dalam internet dikarenakan membuat pengakses internet dapat mencari berbagai hal yang diinginkan, serta beberapa fungsi URL lainnya yakni memberi nama dokumen pada website, mengenali dokumen pada website, dan memudahkan pengguna untuk langsung mengakses file di internet dengan alamat yang tepat. Layaknya sebuah organisasi, URL juga mempunyai struktur yang terbagi atas: Domain Domain merupakan nama dari situs atau yang menunjukkan alamat situs. Domain terdiri dari dua jenis, gratis dan berbayar. Contoh dari domain berbayar adalah .com, .net, .info. Sed...
Baca selengkapnya

Web Server

-
Web server adalah sebuah software (perangkat lunak) yang memberikan layanan berupa data. Berfungsi untuk menerima permintaan HTTP atau HTTPS dari klien atau kita kenal dengan web browser (Chrome, Firefox). Selanjutnya ia akan mengirimkan respon atas permintaan tersebut kepada client dalam bentuk halaman web. Web Server memiliki peran dalam memproses berbagai data yang diminta oleh klien (web browser). Kemudian ia memberikan hasil atau jawaban berupa dokumen, video, foto, atau beragam bentuk berkas lainnya. Fungsi dari web server ialah, sbb: Membersihkan berbagai  cache  yang terdapat pada penyimpanan serta semua dokumen yang tidak terpakai lagi. Melakukan pemeriksaan terhadap sistem  security  yang berasal dari permintaan HTTP berdasarkan  request  klien atau web browser. Menyediakan data berdasarkan  request  atau permintaan yang masuk agar dapat menjamin keamanan sistem yang berjalan dengan lancar. Jenis-jenis Web Server Sebagai  programme ...
Baca selengkapnya