Borang HTML dan Input
Borang HTML digunakan untuk mengumpulkan pelbagai jenis input pengguna.
Borang HTML
Borang ialah kawasan yang mengandungi unsur bentuk.
Elemen borang membenarkan pengguna memasukkan kandungan dalam borang, seperti kawasan teks, senarai lungsur turun, butang radio, kotak pilihan, dsb.
Borang ditetapkan menggunakan teg borang <form>:
<form>
<input type="">
< input type="">
</form>
Borang HTML - elemen input
teg borang yang digunakan dalam kebanyakan kes ialah teg input (<input>).
Jenis input ditakrifkan oleh atribut jenis (jenis). Jenis input yang paling kerap digunakan adalah seperti berikut:
Medan Teks
Medan teks diwakili oleh <input type="text"> pengguna ingin menaip huruf, nombor dan sebagainya dalam borang, medan teks akan digunakan.
<form>
姓名: <input type="text" name="name"><br>
年龄: <input type="text" name="old">
</form>
Nota: Borang itu sendiri tidak kelihatan. Juga, dalam kebanyakan penyemak imbas, lebar lalai medan teks ialah 20 aksara.
Medan kata laluan ditakrifkan oleh teg <input type="password">:
<form>
密码: <input type="password" name="pwd">
</form>
Nota: Aksara medan kata laluan tidak akan dipaparkan dalam teks yang jelas, tetapi akan digantikan dengan asterisk atau titik.
Butang Radio
<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">男
<br>
<input type="radio" name="sex" value="female">女
</form>
Kotak Semak
<jenis input ="checkbox"> mentakrifkan kotak semak Pengguna perlu memilih satu atau beberapa pilihan daripada beberapa pilihan yang diberikan.
<form>
<input type="checkbox" name="hobby" value="LOL">我喜欢玩LOL
<br>
<input type="checkbox" name="hobby" value="CF">我喜欢玩CF
</form>
Butang Serah
<input type="submit "> butang hantar
Apabila pengguna mengklik butang sahkan, kandungan borang akan dipindahkan ke fail lain. Atribut tindakan borang mentakrifkan nama fail fail destinasi. Fail yang ditakrifkan oleh atribut tindakan biasanya melakukan pemprosesan berkaitan pada data input yang diterima. :
<form name="input" action="html_form_action.php" method="get">
用户名: <input type="text" name="user">
密码: <input type="password" name="pwd">
<input type="submit" value="Submit">
</form>
Menyatukan perkara di atas:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
姓名：<input type="text" name="name"><br/><br/>
性别：<input type="text" name="sex"><br/><br/>
年龄：<input type="text" name="old"><br/><br/>
<input type="radio" name="sex" value="male">男
<br/><br/>
<input type="radio" name="sex" value="female">女
<br/><br/>
我的爱好：
<br/><br/>
<input type="checkbox" name="hobby" value="LOL">LOL
<br/><br/>
<input type="checkbox" name="hobby" value="CF">CF
<br/><br/>
<input type="checkbox" name="hobby" value="DOTA">DOTA
<br/><br/>
我的家乡：
<select>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="xianggang">香港</option>
</select>
<br/><br/>
用户名: <input type="text" name="user">
<br/><br/>
密 码: <input type="password" name="pwd">
<br/><br/>
<input type="submit" value="提交">
</form>
</body>
</html>
bahagian seterusnya