HTML : Membuat Form pada HTML

Assalammualaikum Wr.Wb

create-script - hai gaesss....bertemu lagi bersama saya di blog create-script. kali ini diriku akan sharing tentang bagaimana cara membuat form pada HTML. sebelumnya, apa sih itu form?, apa fungsi dari form?, dan bagaimana cara penulisan Form?....nah, untuk lebih jelasnya, kita simak saja yaa :)

A. PENDAHULUAN

Pengertian

form adalah tempat penginputan data sebelum diproses oleh sistem. salah satunya adalah form login, form comment, form data user, dan lain sebagainya. tag yang digunakan untuk membuat form ini adalah <forn> yang didalamnya ada <input>,<textarea>, <opstion> dan juga <select>

Latar Belakang

form sangat dibutuhkan dalam sebuah website, karena form berfungsi sebagai tempat data sebelum diproses oleh sistem, tanpa form, kita tidak akan bisa input data, karena kita tidak memiliki wadah untuk menempatkan apa yang ingin kita input

Maksud dan Tujuan

dapat mengetahui dengan jelas apa yang dimaksud dan dapat menerapkannya jika ingin membuat website yang ada tempat untuk menginput datanya

Hasil yang Diharapkan

dapat menggunakan form dalam pembuatan website nantinya.

B. ALAT DAN BAHAN

Web Browser
Text Editor

C. PEMBAHASAN

form merupakan tempat penginputan data sebelum diproses oleh sistem. salah satunya adalah form login, form comment, form data user, dan lain sebagainya. untuk proses penginputan data dari form akan kita bahas di materi PHP, MYSQL, dan JavaScript. tag yang digunakan untuk membuat form ini adalah <form> yang didalamnya bisa berupa <input>, <textarea>,<option> dan <select>.

tag <form>

beberapa atribut dibutuhkan didalam tag form untuk memproses data yang akan dikirim. nilai yang biasanya dikirim biasanya berupa alamat dari sebuah halaman untuk memproses data inputan. atribut yang kedua berupa method. method tersebut menjelaskan bagaimana data yang akan dikirim oleh sebuah web browser. nilai dari method tersebut biasanya berupa get atau post.

tag <input>

tag input digunakan sebagai wadah untuk memasukkan data untuk diproses lebih lanjut oleh sistem, dengan kata tag yang digunakan sebagai pengisian datanya. tag input memiliki banyak bentuk yang bisa digunakan, seperti: teks, nama/username, password, checkbox, radiobutton, sampai dengan tombol submit berada di dalam tag <input>.

berikut ini adalah beberapa atribut yang berada pada tag <input> :

<input type='text'> textbox yang dapat menerima input berupa text, contohnya username atau yang lainnya, yang berisi inputan text yang pendek.
<input type='password'> textbox yang dapat berisi inputan text. namun, text yang di-input akan ditampilkan sebagai tanda bintang atau titik. Namun, textbox jenis ini paling sering digunakan untuk menginput password.
<input type='submit'> berupa button yang digunakan untuk memproses data inputan dari form.
<input type='checkbox'> inputan yang berupa checkbox yang bisa di Ceklis oleh user.
<input type='radio'> inputan yang berupa radio grup, dimana user dapat memilih salah satu dari pilihan yang telah tersedia, salah satu sontoh penggunaan dari radio ini adalah memilih jenis kelamin, dll.

tag <textarea>

tag <textarea> adalah tag yang memiliki fungsi yang sama dengan inputan text, namun, textarea ini dapat diisikan lebih banyak text didalamnya. untuk mengatur panjang dan jumlah baris pada textarea ini, anda dapat menggunakan CSS.

Berikut ini adalah contoh dari penggunaan tag <textarea> :

<textarea>
Isikan Pesan anda
</textarea>

kemudian save, dan buka di browser anda :

tag <select>

tag <select> digunakan untuk user untuk memilih data yang sudah disediakan. penggunaan tag <select> selalu diikuti oleh tag <option> yang digunakan untuk membuat pilihan.

Berikut ini adalah contoh penulisan tag <select> pada HTML :

<select>
<option>Madiun</option>
<option>Magetan</option>
<option>Ngawi</option>
</select>

dan save, kemudian buka kembali ke web browser anda, maka hasilnya akan seperti ini :

Atribut Name

atribut name adalah atribut yang nilainya akan digunakan pada saat memproses data oleh web server.

berikut ini adalah contoh penggunaan atribut name yang benar :

nama : <input type="text" name="nama"><br>
alamat : <input type="text" name="alamat"><br>
passord : <input type="password" name="pass"><br>

kemudian save, juga seperti tadi. buka kembali di web browser anda, maka hasilnya akan seperti ini :

dan jika form nya kalian isi, maka hasil isinya akan seperti ini :

hasil inputan password akan otomatis berisi bulat-bulat

untuk form-form di atas, jika digabungkan secara keseluruhan maka hasil script nya akan menjadi seperti ini, ketikkan script berikut :

<!DOCTYPE html>
<html>
<head>
   <title>create-script</title>
</head>
<body>
<form>
    nama : <input type="text" name="nama"><br/>
    alamat : <input type="text" name="alamat"></br/>
    password : <input type="password" name="pass"><br/>
    Jenis Kelamin :
        <input type="radio" name="jk" value="laki-laki" checked />
            Laki - Laki
        <input type="radio" name="jk" value="perempuan" />
            Perempuan
        <br/>
    kegiatan yang sering dilakukan :
        <input type="checkbox" name="lari"> Lari
        <input type="checkbox" name="coding"> Coding
        <input type="checkbox" name="gaming"> Gaming
        <br/>
    kota asal :
    <select>
        <option>Madiun</option>
        <option>Magetan</option>
        <option>Ngawi</option>
    </select>
    <br/>
    Pesan yang ingin disampaikan :
    <textarea>

    </textarea>
    <br/>
    <input type="submit" value="proses">
</form>
</body>
</html>

Maka hasilnya akan menjadi seperti ini :

dari contoh terakhir diatas. anda dapat mempelajari sendiri" apa fungsi tag-tag yang ada di atas.

sekian tentang apa yang bisa saya sharingkan pada kesempatan kali ini, semoga bermanfaat.

Wassalammualaikum Wr.Wb.

Share this