Manual pembangu...login
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Manual pembangunan HTML
←
→
pengarang：php.cn  masa kemas kini：2022-04-11 17:45:33

Borang HTML


HTML Borang dan Input

Borang HTML digunakan untuk mengumpulkan pelbagai jenis input pengguna.

Contoh dalam talian

Buat medan teks (Medan teks)
Contoh ini menunjukkan cara mencipta medan teks dalam halaman HTML. Pengguna boleh menulis teks dalam medan teks.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

<p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Membuat medan kata laluan
Contoh ini menunjukkan cara mencipta medan kata laluan HTML.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

<p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

(Lagi contoh boleh didapati di bahagian bawah halaman ini.)

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 disediakan menggunakan teg borang <form>:

<form>
.
input 元素
.
</form>

Borang HTML - elemen input

Teg borang yang paling biasa digunakan ialah teg input (<input>).

Jenis input ditakrifkan oleh atribut jenis (jenis). Kebanyakan jenis input yang biasa digunakan adalah seperti berikut:

Medan Teks

Medan teks ditetapkan melalui teg <input type="text"> apabila pengguna menaip huruf, nombor, dsb. ke dalam borang.

pelayar 
<form>
First name:
<input type="text" name="firstname"><br>
Last name:
<input type="text" name="lastname">
</form>
dipaparkan seperti berikut:

Nota: Borang itu sendiri tidak kelihatan. Juga, dalam kebanyakan penyemak imbas, lebar lalai medan teks ialah 20 aksara.

Medan kata laluan

Medan kata laluan ditakrifkan oleh teg <input type="password">:

kesan paparan pelaya
<form>
Password:
<input type="password" name="pwd">
</form>
ialah seperti berikut:

Nota: Aksara medan kata laluan tidak akan dipaparkan dalam teks yang jelas, tetapi akan digantikan dengan asterisk atau titik.

Butang Radio

<input type="radio"> teg mentakrifkan pilihan butang radio borang

rreee Kesan paparan penyemak imbas adalah sebagai berikut:

Kotak semak

<jenis input="kotak semak"> pengguna perlu memilih daripada beberapa Pilih satu atau beberapa pilihan daripada yang diberikan pemilihan.

kesan paparan pelaya
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
adalah seperti berikut:

Butang Hantar

<input type="submit"> mentakrifkan butang serah.

Apabila pengguna mengklik butang pengesahan, kandungan borang akan menjadi 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. :

kesan paparan pelayar 
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>
adalah seperti berikut:

Jika anda menaip beberapa huruf dalam kotak teks di atas dan kemudian klik butang sahkan, data input akan dihantar ke halaman "html_form_action.php". Halaman ini akan memaparkan hasil yang dimasukkan.

Lagi contoh

Butang radio
Contoh ini menunjukkan cara mencipta butang radio dalam HTML.

Instance

<form name="input" action="html_form_action.php" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Kotak Pilihan
Contoh ini menunjukkan cara membuat kotak pilihan dalam halaman HTML. Pengguna boleh menandai atau menyahtanda kotak pilihan.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

<p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Senarai lungsur turun yang ringkas
Contoh ini menunjukkan cara mencipta kotak senarai juntai bawah yang ringkas dalam halaman HTML. Kotak senarai juntai bawah ialah senarai yang boleh dipilih.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Senarai lungsur turun yang diprapilih
Contoh ini menunjukkan cara membuat senarai lungsur turun yang mudah dengan nilai yang diprapilih.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Textarea
Contoh ini menunjukkan cara mencipta kawasan teks (kawalan input teks berbilang baris). Pengguna boleh menulis teks dalam medan teks. Tiada had kepada bilangan aksara yang boleh ditulis.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Mencipta Butang
Contoh ini menunjukkan cara membuat butang. Anda boleh menyesuaikan teks pada butang.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>

Run instance »

Klik butang "Run Instance" untuk melihat instance dalam talian

Contoh Borang

Borang Bersempadan
Contoh ini menunjukkan cara melukis kotak dengan tajuk di sekeliling data.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Borang dengan kotak input dan butang pengesahan
Contoh ini menunjukkan cara menambah borang pada halaman. Borang ini mengandungi dua kotak input dan butang sahkan.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Borang dengan Kotak Pilihan
Borang ini mengandungi dua kotak pilihan dan butang pengesahan.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Borang dengan butang radio
Borang ini mengandungi dua butang radio dan butang pengesahan.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Menghantar e-mel daripada borang
Contoh ini menunjukkan cara menghantar e-mel daripada borang.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  <input type="radio" name="sex" value="Male"> Male<br>
  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Teg borang HTML

Baharu : Teg baharu HTML5

< th align="left">Tag< td>Tentukan keputusan Pengiraan
Penerangan
<form>Tentukan borang untuk input pengguna
<input>Tentukan medan input
<textarea>Tentukan kawasan teks (kawalan input berbilang baris )
<label>Mentakrifkan label elemen <input> biasanya tajuk input
<fieldset>< / td>Mentakrifkan sekumpulan elemen bentuk yang berkaitan dan menggunakan bingkai luar untuk melampirkannya
<legend>Mentakrifkan tajuk <fieldset> elemen< /td>
<select>Mentakrifkan senarai pilihan lungsur turun
<optgroup>Tentukan pilihan kumpulan
<option>Tentukan pilihan dalam senarai juntai bawah
< a href="http://www.php.cn/dic/html/button.html" target="_blank"><button> Tentukan butang klik
<datalist>
标签描述
<form>定义供用户输入的表单
<input>定义输入域
<textarea>定义文本域 (一个多行的输入控件)
<label>定义了 <input> 元素的标签，一般为输入标题
<fieldset>定义了一组相关的表单元素，并使用外框包含起来
<legend>定义了  <fieldset> 元素的标题
<select>定义了下拉选项列表
<optgroup>定义选项组
<option>定义下拉列表中的选项
<button>定义一个点击按钮
<datalist>指定一个预先定义的输入控件选项列表
<keygen>定义了表单的密钥对生成器字段
<output>定义一个计算结果
Nyatakan senarai pilihan kawalan input yang dipratakrifkan
<keygen> ;Mentakrifkan medan penjana pasangan kunci borang
<output>
<🎜>
←
→
serahkan

Laman web PHP Cina

RumahRumahKursusKursusArtikelArtikelSoal JawabSoal JawabKamusKamusManualManualMuat turunMuat turuncaricariAPPMuat turun APPMuat turun