Bahasa Penanda Hiperteks (HTML)/Borang

Borang HTML merupakan cara yang mudah bagi mengumpul data atau maklumat daripada pengguna. Pemprosesan borang memerlukan kehadiran bahasa penskripan pada pelayan atau server-side scripting language, misalnya PHP. Dalam kes-kes yang hanya memerlukan interaksi ringkas yang dapat dilakukan pada laman itu sendiri, borang HTML boleh digunakan dengan bahasa penskripan klien atau client-side scripting language, seperti JavaScript.

Berikut kod borang yang ringkas:

<form id="" action="" method="post">
 <fieldset>
  <legend>Maklumat peribadi</legend>

  <label for="first">Nama sebenar</label>
  <input type="text" name="sebenar" id="sebenar"><br />

  <label for="family">Nama timangan</label>
  <input type="text" name="timangan" id="timangan"><br />

  <input type="submit" name="peribadi">

 </fieldset>
</form>

Perhatikan atribut-atribut yang terdapat pada unsur-unsur form, label dan input

Penjelasan:

id

Nama borang atau pengawal.

action

URL skrip pada pihak pelayan yang dapat memperoses data.

method

Kaedah yang digunakan bagi mengirim maklumat. Dua kaedah didokong, POST dan GET. POST (harfiah, kirim) adalah kaedah yang diutamakan melainkan bagi membuat gelintaran ringkas yang lazimnya menggunakan kaedah GET (harfiah, peroleh). Gunakan dengan bahasa-bahasa pihak pelayan.

fieldset

Pengawal borang lazimnya didapati pada unsur fieldset. Borang-borang yang kompleks boleh mengandungi fieldset berganda. Fieldset boleh mengandungi fieldset lain.

legend

Setiap fieldset bermula dengan unsur legend. Kandungan unsur legend digunakan sebagai tajuk yang diletakkan pada sempadan fieldset.

input type="" name ="" id=""

Pelbagai jenis pengawal input. Jenis-jenis yang didokong adalah: submit, text, password, checkbox, radio, reset, file, hidden, image dan button.

name digunakan pelayan bagi mengenal pasti bahagian data yang mana yang dimasukkan ke dalam sesebuah kotak yang terdapat pada borang.

id digunakan bagi memadankan sesuatu input dengan labelnya.

Atribut-atribut name dan id lazimnya mempunyai nilai yang sama bagi input jenis teks akan tetapi nilai berlainan bagi input-input jenis checkbox dan radio.

label for=""

Sebuah label bagi mengawal sesbuah borang. Nilai atribut for perlu serasi dengan atribut id yang ada pada pengawal borang dalam borang yang sama.

select

Terdapat juga unsur SELECT ("pilih") buat senarai-senarai runtuh dan juga unsur TEXTAREA ("kawasan teks") bagi input yang barisnya berganda.

Contoh ringkas ini menggunakan tag <br /> untuk memaksa penjanaan barisan baharu di antara pengawal. Borang yang digunakan dalam laman sebenar akan menggunkan bahasa penanda yang lebih teratur strukturnya bagi meletakkan pengawal agar lebih kemas.

Formatting with CSS

The HTML

The HTML for this form is amazingly simple and you do not have to create hundreds of divs all aligned left and right; this will cause a lot of frustration and a lot of debugging as various browsers still interpret CSS code differently.

<form>

	<label for="name">Name</label>
	<input id="name" name="name"><br />

	<label for="address">Address</label>
	<input id="address" name="address">

</form>

The CSS

The CSS for this code is a little bit more interesting:

label,input {
	float: left;
	width: 150px;
	display: block;
	margin-bottom: 10px;
}

label {
	width: 75px;
	text-align: right;
	padding-right: 20px;
}

br {
	clear: left;
}

Let's explain the code

label,input {
	float: left;
	width: 150px;
	display: block;
	margin-bottom: 10px;
}

The CSS for the label has four sections to it:

1. float: the float command is used to establish that the label is floated to the left hand side of the form
2. width: this defines how big the label must be, keeping all the labels at a fixed width keeps everything in a nice ordered line.
3. display: the element will be displayed as a block-level element, with a line break before and after the element
4. margin-bottom: by adding a margin to the bottom of this label it insures that labels are positioned nicely one under another with a nice padding between each

label {
	width: 75px;
	text-align: right;
	padding-right: 20px;
}

1. width: again this is to define a fixed width giving everything a nice defined unity.
2. Text-align: align the text right keeps everything away from the left aigned labels again keeping things in unison.
3. Padding-right: this means that there is a nice padding on the right keeping things once again fine tuned.

br {
	clear: left;
}

1. clear: this is the most important part without the clear:left nothing will align properly this basically makes everything within each element sequence align underneath each other and to the left.

Rujukan

Bagi rujukan bagus dan lengkap mengenai borang, lihat the official W3 Technical Recommendation for forms.