HTML Input Attribute

value ຄຳປະກອບ

value ລະບົບຄຳປະກອບກຳນົດຄຳຕັດສິນຕົ້ນຕົວຂອງບັນທາງບິນ:

ຕົວຢ່າງ

<form action="">
 ຊື່:<br>
<input type="text" name="firstname" value="Bill">
<br>
 ຊື່ສົມ:<br>
<input type="text" name="lastname">
</form>

ທ້າວທາງຕອນຕົ້ນ

readonly ຄຳປະກອບ

readonly ລະບົບຄຳປະກອບກຳນົດບັນທາງບິນເປັນພຽງຄຳຕາມ (ບໍ່ສາມາດດັດແປງ):

ຕົວຢ່າງ

<form action="">
 ຊື່:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 ຊື່ສົມ:<br>
<input type="text" name="lastname">
</form>

ທ້າວທາງຕອນຕົ້ນ

readonly ຄຳປະກອບບໍ່ຕ້ອງມີຄຳຕັດສິນ. ມັນຕົກເປັນ readonly="readonly".

disabled ຄຳປະກອບ

disabled ລະບົບຄຳປະກອບກຳນົດບັນທາງບິນຖືກຫວດ.

ບັນດາປະກອບທີ່ຖືກຫວດບໍ່ສາມາດໃຊ້ຫຼືກະທັບຫຼື.

ບັນດາປະກອບທີ່ຖືກຫວດບໍ່ອາດຖືກສົ່ງໄປ.

ຕົວຢ່າງ

<form action="">
 ຊື່:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 ຊື່ສົມ:<br>
<input type="text" name="lastname">
</form>

ທ້າວທາງຕອນຕົ້ນ

disabled ຄຳປະກອບບໍ່ຕ້ອງມີຄຳຕັດສິນ. ມັນຕົກເປັນ disabled="disabled".

size ຄຳປະກອບ

size ລະບົບຄຳປະກອບກຳນົດຂະຫຍາຍຄວາມຍາວຂອງບັນທາງບິນ (ຄວາມຄິດເປັນຄວາມອັກສະນະ):

ຕົວຢ່າງ

<form action="">
 ຊື່:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 ຊື່ສົມ:<br>
<input type="text" name="lastname">
</form>

ທ້າວທາງຕອນຕົ້ນ

maxlength ຄຳປະກອບ

maxlength ລະບົບຄຳປະກອບກຳນົດຂະຫຍາຍຄວາມຍາວທີ່ອະນຸຍາດສຳຫຼັບບັນທາງບິນ:

ຕົວຢ່າງ

<form action="">
 ຊື່:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 ຊື່ສົມ:<br>
<input type="text" name="lastname">
</form>

ທ້າວທາງຕອນຕົ້ນ

ຖ້າຕັ້ງປະກັນ maxlength, ຂອບເຂົ້າຈະບໍ່ຍິນຍອມການເຂົ້າຫຼາຍກວ່າຈຳນວນທີ່ອະນຸຍາດ.

ສະເພາະນິຍົມຕິດຕາມກໍ່ບໍ່ຈະສະໜອງການສົນທະນາ. ຖ້າຕ້ອງການສົນທະນາຜູ້ນຳໃຊ້, ຕ້ອງຂຽນ JavaScript.

ຄວາມເຫັນ:ການຄວບຄຸມຂອບເຂົ້າບໍ່ມີຄວາມປອດໄພ. JavaScript ມີຫຼາຍວິທີທີ່ຢາກຫຼາຍການເຂົ້າທີ່ຜິດສານ. ຖ້າຕ້ອງການຄວບຄຸມຂອບເຂົ້າຢ່າງປອດໄພ, ຜູ້ຍິນຍອມທີ່ (server) ຕ້ອງການກວດກາຢ່າງສະຫຼາດ.

HTML5 ສະເພາະນິຍົມຕິດຕາມ

HTML5 ໄດ້ກັບມາສະເພາະ <input> ທີ່ຖືກໃຊ້:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height ແລະ width
  • list
  • min ແລະ max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

ແລະຕັ້ງປະກັນ ຂອບເຂົ້າ ສຳລັບ <form>:

  • autocomplete
  • novalidate

autocomplete ສະເພາະນິຍົມຕິດຕາມ

autocomplete ສະເພາະນິຍົມຕິດຕາມກວດກາຫຼືບໍ່ຂອງ form ຫຼື ຂອບເຂົ້າ.

ຖ້າການເບິ່ງຕົວປະຈຳຄົນໄດ້ການເບິ່ງຕົວປະຈຳຄົນ, ສະເພາະບຸກລຸກສົບລົງມາຕາມຄົນທີ່ກ່າວກ່ອນ.

ຄຳເຕືອນ:ທ່ານສາມາດຕັ້ງປະກັນ autocomplete ຂອງຟອມລະບຽບໃຫ້ on ພ້ອມທັງຕັ້ງຂອບເຂົ້າສະເພາະໃຫ້ off ແລະນອກນັ້ນນັ້ນ.

autocomplete ສະເພາະນິຍົມຕິດຕາມ <form> ແລະ <input> ທີ່ຖືກໃຊ້: text, search, url, tel, email, password, datepickers, range ແລະ color。

ຕົວຢ່າງ

HTML ຟອມລະບຽບສະຫຼຸບໄດ້ການເບິ່ງຕົວປະຈຳຄົນ: <input type="input" name="input" autocomplete="off"><br>

<form action="action_page.php" autocomplete="on">
   ຊື່: <input type="text" name="fname"><br>
   ນາມສຸດທ້າຍ: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

ທ້າວທາງຕອນຕົ້ນ

ຄຳເຕືອນ:在某些浏览器中，您也许需要手动启用自动完成功能。

novalidate 属性

novalidate 属性属于 <form> 属性。

如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

ຕົວຢ່າງ

指示表单在被提交时不进行验证：

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

ທ້າວທາງຕອນຕົ້ນ

autofocus 属性

autofocus 属性是布尔属性。

如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。

ຕົວຢ່າງ

使 "First name" 输入字段在页面加载时自动获得焦点：

First name:<input type="text" name="fname" autofocus>

ທ້າວທາງຕອນຕົ້ນ

form 属性

form 属性规定 <input> 元素所属的一个或多个表单。

ຄຳເຕືອນ:如需引用一个以上的表单，请使用空格分隔的表单 id 列表。

ຕົວຢ່າງ

输入字段位于 HTML 表单之外（但仍属表单）：

<form action="action_page.php" id="form1">
   ນາມເກີບ: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>
 Last name: <input type="text" name="lname" form="form1">

ທ້າວທາງຕອນຕົ້ນ

formaction 属性

formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性。

formaction 属性适用于 type="submit" 以及 type="image"。

ຕົວຢ່າງ

拥有两个两个提交按钮并对于不同动作的 HTML 表单：

<form action="action_page.php">
   ນາມເກີບ: <input type="text" name="fname"><br>
   ນາມສຸດທ້າຍ: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

ທ້າວທາງຕອນຕົ້ນ

formenctype 属性

formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。

formenctype 属性覆盖 <form> 元素的 enctype 属性。

ລະບຽບ formenctype ສາມາດນຳໃຊ້ສຳລັບ type="submit" ແລະ type="image"。

ຕົວຢ່າງ

ສົ່ງຂໍ້ມູນອອກສານ (form-data) ທີ່ມີການກະຕຸ້ມຄວາມມອງດ້ວຍຄວາມຈິງ ແລະ ມີການກະຕຸ້ມ encoding ວ່າ "multipart/form-data" (ຄະດີການຈັດຕັ້ງບັນຫາສອງ):

<form action="demo_post_enctype.asp" method="post">
   ນາມເກີບ: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data">
   value="Submit as Multipart/form-data">
</form>

ທ້າວທາງຕອນຕົ້ນ

ລະບຽບ formmethod

ລະບຽບ formmethod ຈະນຳໃຊ້ສຳລັບການສົ່ງຂໍ້ມູນອອກສານ (form-data) ໄປ URL action ທີ່ນຳໃຊ້ HTTP Method。

ລະບຽບ formmethod ຈະປົກປັກຮັງລະບຽບ method ຂອງ <form>。

ລະບຽບ formmethod ສາມາດນຳໃຊ້ສຳລັບ type="submit" ແລະ type="image"。

ຕົວຢ່າງ

ຄະດີການຈັດຕັ້ງບັນຫາສອງບັນຫາທີ່ປົກປັກຮັງລະບຽບ HTTP Method ຂອງອອກສານ:

<form action="action_page.php" method="get">
   ນາມເກີບ: <input type="text" name="fname"><br>
   ນາມສຸດທ້າຍ: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Submit using POST">
</form>

ທ້າວທາງຕອນຕົ້ນ

ລະບຽບ formnovalidate

ລະບຽບ novalidate ແມ່ນລະບຽບບັນດາຄວາມຈິງ/ບໍ່ຈິງ。

ຖ້າໄດ້ກວດສອບແລ້ວ ຈະນຳໃຊ້ເພື່ອບໍ່ກວດສອບ <input> ເມື່ອຈັດຕັ້ງອອກສານ。

ລະບຽບ formnovalidate ຈະປົກປັກຮັງລະບຽບ novalidate ຂອງ <form>。

ລະບຽບ formnovalidate ສາມາດນຳໃຊ້ສຳລັບ type="submit"。

ຕົວຢ່າງ

ເອກະສານການຈັດຕັ້ງທີ່ມີຄະດີການຈັດຕັ້ງສອງບັນຫາ (ການກວດສອບ ແລະ ບໍ່ກວດສອບ):

<form action="action_page.php">
   ອີເມວ: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form>

ທ້າວທາງຕອນຕົ້ນ

ປະເພດ formtarget

ປະເພດ formtarget ກຳນົດຊື່ຫຼືຄຳຖາວອນທີ່ຈະສະແດງຄຳຕອບພິມທີ່ຍັງມີພາຍໃນຫຼັງການສົ່ງຟອມຂໍ້ມູນ.

ປະເພດ formtarget ຈະປອມປົດຄວາມລະບຸ target ຂອງ <form>.

ປະເພດ formtarget ສາມາດນຳໃຊ້ກັບ type="submit" ແລະ type="image".

ຕົວຢ່າງ

ກໍານົດຟອມຂໍ້ມູນທີ່ມີຄະນະປະຕິບັດການປະຕິບັດຄວາມລະບຸທີ່ຕ່າງກັນສຳລັບປະຕິບັດປະຕິບັດຢູ່ປ່າທໍານາຍພາບໃໝ່:

<form action="action_page.php">
   ນາມເກີບ: <input type="text" name="fname"><br>
   ນາມສຸດທ້າຍ: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form>

ທ້າວທາງຕອນຕົ້ນ

ປະເພດ height ແລະ width

ປະເພດ height ແລະ width ກຳນົດລະດັບຫຼາຍກວ່າຄວາມລະບຸ <input>.

ປະເພດ height ແລະ width ທີ່ນຳໃຊ້ພຽງແຕ່ <input type="image">.

ຄວາມເຫັນ:ການໃຫ້ລະດັບຄວາມລະບຸ height ແລະ width ຕ້ອງຈະຖືກກໍານົດຕໍ່. ຖ້າບັນຊາການບໍ່ຮູ້ລະດັບຄວາມລະບຸ, ໜ້າຈະປະກົດຄວາມກະຈາຍໃນລະຫວ່າງການເຊື່ອມພາບ.

ຕົວຢ່າງ

ຈັດສັນພາບຈະປະກອບຄວາມສະຫຼຸບແລະກຳນົດລະດັບດ້ານຫຼາຍກວ່າຄວາມລະບຸ height ແລະ width:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

ທ້າວທາງຕອນຕົ້ນ

ປະເພດ list

ປະເພດ list ທີ່ອ້າງໄປຫາ <datalist> ທີ່ບັນທຶກຄວາມລະບຸຂອງ <input>.

ຕົວຢ່າງ

ນຳໃຊ້ <datalist> ທີ່ກໍານົດຄວາມລະບຸຂອງ <input>:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

ທ້າວທາງຕອນຕົ້ນ

min 和 max 属性

ລະບຽບ min ແລະ max ແມ່ນປະກອບຄວາມຈິງຂອງຈຳນວນສູງສຸດ ແລະຈຳນວນຕໍ່າຂອງ <input>.

ລະບຽບ min ແລະ max ແມ່ນພິຈະລະນາໃຫ້ບ່ອນບັນທຶກທີ່ເປັນ: number, range, date, datetime, datetime-local, month, time ແລະ week.

ຕົວຢ່າງ

ບ່ອນບັນທຶກ <input> ທີ່ມີຈຳນວນສູງສຸດ ແລະຈຳນວນຕໍ່າ:

ເຂົ້າຄືນປະຈຸບັນກ່ອນວັນ 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 ເຂົ້າຄືນປະຈຸບັນຫຼັງວັນ 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
 ຈຳນວນ (ລະດັບ 1 ຫາ 5):
<input type="number" name="quantity" min="1" max="5">

ທ້າວທາງຕອນຕົ້ນ

multiple 属性

multiple 属性ແມ່ນລະບຽບ boolean.

ຖ້າໄດ້ກວດກາແລ້ວ ຈະປະກອບຄວາມຈິງວ່າຜູ້ນຳໃຊ້ຈະບັນທຶກຄູ່ມູນຫຼາຍວັນໃນ <input>.

ລະບຽບ multiple ແມ່ນພິຈະລະນາໃຫ້ບ່ອນບັນທຶກທີ່ເປັນ: email ແລະ file.

ຕົວຢ່າງ

ບ່ອນບັນທຶກທີ່ຍອມຮັບຄູ່ມູນຫຼາຍວັນ:

ຂໍ້ສັງເກດ: <input type="file" name="img" multiple>

ທ້າວທາງຕອນຕົ້ນ

pattern 属性

ລະບຽບ pattern ແມ່ນເປັນການອະທິບາຍ regular expression ທີ່ໃຊ້ຂອງ <input> ທີ່ຈະກວດກາຄູ່ມູນ.

ລະບຽບ pattern ແມ່ນພິຈະລະນາໃຫ້ບ່ອນບັນທຶກທີ່ເປັນ: text, search, url, tel, email, and password.

ຄຳເຕືອນ:ຂໍ້ສັງເກດຂອງລະບຽບ title ທີ່ເປັນການອະທິບາຍຕົວອອກຄວາມຈິງໃຫ້ຜູ້ນຳໃຊ້.

ຄຳເຕືອນ:ຂໍ້ສັງເກດຂອງພວກເຈົ້າຈະສຶກສາຫຼາຍກ່ຽວກັບການນຳໃຊ້ regular expression ໃນການສອນ JavaScript.

ຕົວຢ່າງ

ບ່ອນບັນທຶກຈະຕ້ອງມີພຽງສາມຄໍ້າຫົວ (ບໍ່ມີໂຕນອອກຫຼືສິ່ງສະເພາະ):

Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

ທ້າວທາງຕອນຕົ້ນ

placeholder 属性

ລະບຽບ placeholder ແມ່ນເປັນການອະທິບາຍຄວາມຈິງຂອງຄູ່ມູນທີ່ຄາດຫວັງຂອງບ່ອນບັນທຶກ (ຄູ່ມູນຄົ້ນຄ້ວຍຫຼືການອະທິບາຍຄວາມຈິງຂອງຕົວອອກຄວາມສະແບບ).

ການແຈ້ງນີ້ຈະສະແດງຢູ່ໃນບ່ອນບັນທຶກຂອງຜູ້ນຳໃຊ້ກ່ອນທີ່ຈະບັນທຶກຄູ່ມູນ。

placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

ຕົວຢ່າງ

拥有占位符文本的输入字段：

<input type="text" name="fname" placeholder="First name">

ທ້າວທາງຕອນຕົ້ນ

ປະເພດ required

ປະເພດ required ແມ່ນປະເພດທີ່ສອດສະຫຼາດ.

ຖ້າເປັນ, ຈະກ່ຽວວ່າບັນດາບັນທັດທີ່ຈຳນວນຕ້ອງການຄວາມສະເພາະຕ້ອງໄດ້ຖືກບັນທຶກກ່ອນຈະຢື່ນສັນຍາ.

ປະເພດ required ແມ່ນຈະນຳໃຊ້ໃຫ້ກັບຮູບແບບເຂົ້າລົງທີ່: text, search, url, tel, email, password, ການເລືອກປະຈຳຣັດ, number, checkbox, radio, ແລະ file.

ຕົວຢ່າງ

ບັນດາບັນທັດທີ່ຈຳນວນຕ້ອງການຄວາມສະເພາະ:

Username: <input type="text" name="usrname" required>

ທ້າວທາງຕອນຕົ້ນ

ປະເພດ step

ປະເພດ step ສະແດງຄວາມສະເພາະທີ່ຖືກຕ້ອງຂອງ ສະໝອງ <input>.

ຕົວຢ່າງ: ຖ້າ step="3" ແມ່ນການສະເພາະທີ່ມີຄວາມຖືກຕ້ອງ: -3, 0, 3, 6, ແລະອີກຫລາຍ.

ຄຳເຕືອນ:ປະເພດ step ສາມາດນຳໃຊ້ກັບ max ແລະ min ເພື່ອສ້າງຂອບເຂດຄວາມຖືກຕ້ອງ.

ປະເພດ step ແມ່ນຈະນຳໃຊ້ໃຫ້ກັບຮູບແບບເຂົ້າລົງທີ່: number, range, date, datetime, datetime-local, month, time ແລະ week.

ຕົວຢ່າງ

ບັນດາບັນທັດທີ່ມີຄວາມສະເພາະທີ່ຕາມຈຳນວນທີ່ມີຄວາມຖືກຕ້ອງ:

<input type="number" name="points" step="3">

ທ້າວທາງຕອນຕົ້ນ