masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Borang HTML dan input

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/>
密&nbsp码: <input type="password" name="pwd">
<br/><br/>
<input type="submit" value="提交">
</form>
</body>
</html>


Meneruskan pembelajaran
||
<!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/> 密&nbsp码: <input type="password" name="pwd"> <br/><br/> <input type="submit" value="提交"> </form> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492972 permainan