Form Elemen

View Categories

Form Elemen

Form elemen adalah tag elemen HTML yang berfungsi sebagai tempat pengguna menginput data di dalam form HTML. Artikel ini akan membahas masing-masing form elemen secara lebih mendalam.

Tag Input

Elemen atau tag input adalah elemen yang banyak dipakai di dalam form HTML. Tag input ditampilkan dengan berbagai variasi tergantung dengan jenis dan kegunaannya. Terdapat banyak jenis dan kegunaan tag input. Untuk lebih jelas akan dibahas lebih detil pada tutorial selanjutnya.

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

Jalankan Contoh

Contoh di atas adalah tag input dengan jenis input text.

Tag Label

Elemen atau tag label digunakan untuk memberikan label atau penjelasan pada tag lain. Atribut for pada label biasanya sama dengan atribut id pada tag yang dijelaskan.

Tag Select

Elemen atau tag select digunakan untuk membuat pilihan dalam bentuk drop down.

<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>

Jalankan Contoh

Tag option digunakan untuk membuat pilihan pada drop down. Pilihan paling atas secara default akan otomatis terpilih. Untuk membuat suatu option otomatis terpilih kita bisa memakai atribut selected.

<option value="fiat" selected>Fiat</option>

Jalankan Contoh

Atribut size digunakan untuk menentukan jumlah option yang dapat ditampilkan.

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

Jalankan Contoh

Atribut multiple digunakan untuk menentukan jumlah option yang dapat dipilih dalam satu waktu.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Jalankan Contoh

Tag Textarea

Elemen atau tag textarea dipakai untuk membuat input data berupa text dengan lebih dari satu baris.

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

Jalankan Contoh

Atribut rows digunakan untuk menentukan jumlah baris yang ditampilkan pada textarea. Atribut cols digunakan untuk menentukan jumlah kolom yang ditampilkan pada textarea. Atribut rows dan cols secara bersamaan akan menentukan ukuran dari textarea. Ukuran textarea juga bisa ditentukan dengan menggunakan CSS.

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

Jalankan Contoh

Tag Button

Elemen atau tag button digunakan untuk membuat tombol yang bisa diklik.

 <button type="button" onclick="alert('Hello World!')">Click Me!</button>

Jalankan Contoh

Tag Fieldset dan Legend

Elemen atau tag fieldset digunakan untuk mengelompokkan elemen lain dalam form sedangkan elemen atau tag legend digunakan untuk memberikan label pada fieldset.

<form action="/tutorial/html/action_page.html">
  <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>

Jalankan Contoh

Tutorial sebelumnya : Atribut Form HTML
Tutorial setelahnya : Tag Input HTML
Semua Tutorial HTML : Tutorial HTML 

Tinggalkan Balasan