Jenis-Jenis Form Yang Biasa Digunakan Pada HTML

Home » Teknologi,Website » Jenis-Jenis Form Yang Biasa Digunakan Pada HTML

Jenis-Jenis Form Yang Biasa Digunakan Pada HTML

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.

Bagaimana membuat sebuah form pada halaman web

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

Membuat form dengan type radio

				
					<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

Membuat form dengan type checkbox

				
					<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</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.

0 Comments

Inline Feedbacks

View all comments