-->

Cara Membuat Form HTML -Tutorial Dasar HTML

By admin Sunday, November 4, 2018 Add Comment Edit

Cara Membuat Form di HTML

Form digunakan untuk input data/mengambil inputan data dari pengguna. Di dalam html terdapat beberapa control form yg dapat digunakan, seperti control text box, list box, password box, text area box, radio button, check box, reset button, submit button, hidden field, file select. Untuk membuat form dalam html kita cukup menambahkan tag <form>...</form> diantara tag <body>...</body>, untuk lebih jelasnya perhatikan cara penulisan form di bawah ini:

<!DOCTYPE html>
<html>
<body>

<form> Control form yg digunakan
</form>

</body
</html>

Form memiliki banyak tipe control form diantaranya sebagai berikut :

Control Text Box

Untuk membuat control text box dalam html kita cukup menambahkan tag <input > yg disimpan di antara tag <form>...</form>. perhatikan contoh sebagai berikut :

<!DOCTYPE html>
<html>
<body>

<form> <label for="nama">Nama:</label>
<input type="text" size="20" name="nama" id="nama"/>
<label for="alamat">Alamat:</label> <input type="text" size="40" name="alamat" id="alamat"/> </form>

</body>
</html>

apabila dijalankan di browser maka akan tampil seperti ini :

tampilan form diatas tidak rapi , supaya tampilan terlihat rapi maka kita harus menyimpan control form di dalam tabel. perhatikan contoh sebagai berikut :

<!DOCTYPE html>
<html>
<body>
<form>
<table>
<tr>
<td><label for="nama">Nama</label></td>
<td>:<input type="text" size="20" name="nama"/></td>
</tr>
<tr>
<td><label for="alamat">Alamat</label></td>
<td>: <input type="text" size="40" name="alamat"/></td>
</tr>
</table>
</form>
</body>
</html>

apabila dijalankan di browser maka akan tampil seperti ini :

Text Area

Text Area biasanya digunakan untuk membuat komentar atau utuk memuat informasi yang panjang. Untuk membuat text area anda cukup menambahkan tag <textarea> diantara tag form. perhatikan contoh sebagai berikut :

<!DOCTYPE html>
<html>
<body>

<form> <label for="msg">Message</label>
<textarea name="msg" cols="20" rows="4"></textarea> </form>

</body>
</html>

apabila dijalankan di browser maka akan tampil seperti ini :

Control List Box

Control List Box, Untuk membuat list box anda dapat menggungakan tag <select> untuk lebih jelasnya lihatlah kode di bawah ini.

<!DOCTYPE html>
<html>
<body>

<form>
<label for="program">Program :</label>
<select name="program" id="program">
<option value="">Pilih Program</option>
<option value="Web Arsitektur">Web Arsitektur</option>
<option value="Mastering CMS">Mastering CMS</option>
<option value="Print Design">Print Design</option>
<option value="Multimedia dan Animasi">Multimedia Animasi</option>
</select>
</form>

</html>
</body>

apabila dijalankan di browser maka akan tampil seperti ini :

Control Radio Button

Control Radio Button dapat menggunakan tag <input> untuk membuat radio button, dengan type =”radio”. perhatikan contoh sebagai berikut : Contoh:

<!DOCTYPE html>
<html>
<body>

<form> Jenis Kelamin:
<input type="radio" name="jkl" id="pria" value="Pria"/>
<label for="pria">Pria</label>
<input type="radio" name="jkl" id="wanita" value="Wanita"/>
<label for="wanita">Wanita</label>
</form>

</body>
</html>

apabila dijalankan di browser maka akan tampil seperti ini :

Control Check Box

Untuk membuat check box sama seperti membuat radio button, hanya atribut type pada tag input diganti menjadi input type="checkbox" untuk lebih jelasnya lihat kode di bawah ini.

<!DOCTYPE html>
<html>
<body>

<form> Hoby :
<input type="checkbox" name="hoby[]" id="bacabuku" value="Baca Buku"/>
<label for="bacabuku">Baca Buku</label>
<input type="checkbox" name="hoby[]" id="olahraga" value="Olah Raga"/>
<label for="olahraga">Olah Raga</label>
<input type="checkbox" name="hoby[]" id="maingame" value="Main Game"/>
<label for="maingame">Main Game</label>
<input type="checkbox" name="hoby[]" id="hiking" value="hiking"/>
<label for="hiking">Hiking</label>
</form>

</body>
</html>

apabila dijalankan di browser maka akan tampil seperti ini :

Submit dan reset button

Dalam tampilan form biasanya kita melihat tombol submit dan reset button, untuk lebih jelas perhatikan kode berikut.

<!DOCTYPE html>
<html>
<body>

<form> <label for="password">Password</label>
<input type="password" name="password" id="password"/>
<input type="submit" name="submit" value="Submit"/>
<input type="reset" name="reset" value="Reset"/>
</form>

</body>
</html>

apabila dijalankan di browser maka akan tampil seperti ini :

0 Response to "Cara Membuat Form HTML -Tutorial Dasar HTML"

Post a Comment

Subscribe to: Post Comments (Atom)