ຮູບແບບການເຂົ້າ HTML
- ກ່ອນການ HTML5 ບັນຫາບັນກະພິບ
- ຫລັງການ HTML5 ການສະແດງບັນກະພິບ
ວັນນະຄະດີນີ້ອະທິບາຍ <input> ຮູບແບບການເຂົ້າ。
ຮູບແບບການເຂົ້າ: text
<input type="text"> ການອະທິບາຍການເຂົ້າຂອງມາດຕະຖານຂອງຟອມຂອງການເຂົ້າໃນເວລາດຽວ:
ຄວາມຈຳນວນ
<form> ຊື່ແຫ່ງ:<br> <input type="text" name="firstname"> <br> ຊື່ສຸດທ້າຍ:<br> <input type="text" name="lastname"> </form>
ວຽກຂອງ HTML ທີ່ພົບໃນບັນຊີສາມາດໃນບັນຊີບັນນາທິການແມ່ນ:
ຮູບແບບການເຂົ້າ: password
<input type="password"> ການອະທິບາຍພະຍານຄວາມຄອບຄອງ：
ຄວາມຈຳນວນ
<form> ຊື່ຜູ້ນຳການ:<br> <input type="text" name="username"> <br> ພະຍານ password:<br> <input type="password" name="psw"> </form>
ວຽກຂອງ HTML ທີ່ພົບໃນບັນຊີສາມາດໃນບັນຊີບັນນາທິການແມ່ນ:
ບັນທຶກ:ຄູກສະຕິດຂອງພະຍານ password ຈະຖືກການການກວດສອບ (ສະແດງຄືກັບສາຍຫົວຫຼືວຽນນອກ).
ຮູບແບບການເຂົ້າ: submit
<input type="submit"> ການອະທິບາຍສົ່ງລາຍງານຂໍ້ມູນຟອມຂອງຄອມພິວເຕີ້ການດຳເນີນຟອມຂັ້ນສະໜາມ。
ຄອມພິວເຕີ້ການດຳເນີນຟອມ (form-handler) ເປັນເວັບໄຊທີ່ບັນຈຸສະໂຕມການເຂົ້າຂອງຂໍ້ມູນ。
ຕິດຕາມຄວາມສະແດງ action ຂອງຟອມການ ເພື່ອກຳນົດຜູ້ຄວບຄຸມຟອມການ (form-handler):
ຄວາມຈຳນວນ
<form action="action_page.php"> ຊື່ແຫ່ງ:<br> <input type="text" name="firstname" value="Mickey"> <br> ຊື່ສຸດທ້າຍ:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
ວຽກຂອງ HTML ທີ່ພົບໃນບັນຊີສາມາດໃນບັນຊີບັນນາທິການແມ່ນ:
ຖ້າທ່ານຫຼົບຫຼີກປະພັນ value ຂອງຄຳສັ່ງລົງຄະແນນ ຄຳສັ່ງລົງຄະແນນຈະມີຄຳທີ່ກຳນົດໄວ້ໂດຍກົງ:
ຄວາມຈຳນວນ
<form action="action_page.php"> ຊື່ແຫ່ງ:<br> <input type="text" name="firstname" value="Mickey"> <br> ຊື່ສຸດທ້າຍ:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit"> </form>
Input Type: radio
<input type="radio"> 定义单选按钮。
Radio buttons let a user select ONLY ONE of a limited number of choices:
ຄວາມຈຳນວນ
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
ວຽກຂອງ HTML ທີ່ພົບໃນບັນຊີສາມາດໃນບັນຊີບັນນາທິການແມ່ນ:
Input Type: checkbox
<input type="checkbox"> 定义复选框。
ປະເພດຄຳຄົກສາມາດອະນຸຍາດຜູ້ນຳໃຊ້ເລືອກຄຳຄົກອອກຈາກຈຳນວນອອກລວມຈຳນວນຫຼາຍຫຼືບໍ່ມີຫຼາຍ.
ຄວາມຈຳນວນ
<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>
ວຽກຂອງ HTML ທີ່ພົບໃນບັນຊີສາມາດໃນບັນຊີບັນນາທິການແມ່ນ:
Input Type: button
<input type="button"> ການອະທິບາຍຟອນ。
ຄວາມຈຳນວນ
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
ວຽກຂອງ HTML ທີ່ພົບໃນບັນຊີສາມາດໃນບັນຊີບັນນາທິການແມ່ນ:
ປະເພດການເຂົ້າຄັນ HTML5
HTML5 ໄດ້ເພີ່ມປະເພດການເຂົ້າຄັນຫຼາຍອັນຫຼາຍ:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
ບັນທຶກ:ບັນຊີບັນນາທິການເກົ່າບໍ່ສະນັບສະນັກງານບັນຊີສາມາດຈະເປັນປະເພດການເຂົ້າຄັນ type text.
ປະເພດການເຂົ້າຄັນ: number
<input type="number"> ຖືກນຳໃຊ້ສຳລັບບັນທຶກຈຳນວນ.
ທ່ານສາມາດຈຳກັດຈຳນວນ.
ອີງຕາມການສະນັບສະນັກງານບັນຊີສາມາດຈຳກັດບັນທຶກໃຫ້ບັນທຶກ.
ຄວາມຈຳນວນ
<form> ຈຳນວນ (ລະຫວ່າງ 1 ແລະ 5): <input type="number" name="quantity" min="1" max="5"> </form>
ປະເພດການຄຳປະແສງ
ນີ້ຈະອະທິບາຍບາງປະເພດການຄຳປະແສງທີ່ໃຊ້ຈະນອນ (ບາງປະເພດແມ່ນໄດ້ຕື່ມໃນ HTML5):
| ປະກອບ: | ອະທິບາຍ: |
|---|---|
| disabled | ກຳນົດບັນທຶກຈະບໍ່ສາມາດໃຊ້. |
| max | ກຳນົດຄວາມສຸດຂອງບັນທຶກ. |
| maxlength | ກຳນົດຈຳນວນຄວາມສາມາດທີ່ສາມາດສະແດງ. |
| min | ກຳນົດຄວາມສຸດຂອງບັນທຶກ. |
| pattern | ກຳນົດຮູບແບບຂອງຄຳປະແສງວັນທີໃນບັນທຶກ. |
| readonly | ກຳນົດບັນທຶກຂອງບັນທຶກຈະບໍ່ສາມາດແຕ່ງປ່ຽນ. |
| required | ກຳນົດບັນທຶກຂອງບັນທຶກຈະຕ້ອງໄດ້ບັນທຶກ. |
| size | ກຳນົດຄວາມວົງວຽງຂອງບັນທຶກ. |
| step | ກຳນົດຄວາມພິການຂອງບັນທຶກຂອງບັນທຶກ. |
| value | ກຳນົດຄູ່ມູນຄວາມພິການຂອງບັນທຶກ. |
ທ່ານຈະສຶກສາຫຼາຍກ່ຽວກັບຂໍ້ຈຳກັດບັນທຶກໃນປີຕໍ່ໄປ.
ຄວາມຈຳນວນ
<form> ຈຳນວນ: <input type="number" name="points" min="0" max="100" step="10" value="30"> </form>
ປະເພດການເຂົ້າຄັນ: date
<input type="date"> ຖືກນຳໃຊ້ສຳລັບບັນທຶກຂໍ້ມູນວັນທີໃນບັນປະຍາກຳ.
ອີງຕາມການສະໜັບສະໜູນຂອງບູຣໍເຊີ້ວ ປະເພດເລືອກວັນຈະຖືກສະແດງໃນບ່ອນສະໝັກຂອງບົດສະຫຼຸບ.
ຄວາມຈຳນວນ
<form> ວັນເກີດ: <input type="date" name="bday"> </form>
ທ່ານສາມາດເພີ່ມຂໍ້ຈຳກັດໃຫ້ບັນທຶກຂໍ້ມູນກ່ອນ:
ຄວາມຈຳນວນ
<form> ເຂົ້າຄັນຖັງວັນທີ່ກ່ອນ 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> ເຂົ້າເລືອກວັນຫຼັງຈາກ 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> </form>
ປະເພດການເລືອກ: color
<input type="color"> ຂຶ້ນເພື່ອບ່ອນສະໝັກທີ່ຄວນມີສີ.
ອີງຕາມການສະໜັບສະໜູນຂອງບູຣໍເຊີ້ວ ປະເພດເລືອກສີຈະຖືກສະແດງໃນບ່ອນສະໝັກຂອງບົດສະຫຼຸບ.
ຄວາມຈຳນວນ
<form> ເລືອກສີທີ່ມັກ: <input type="color" name="favcolor"> </form>
ປະເພດການເລືອກ: range
<input type="range"> ຂຶ້ນເພື່ອບ່ອນສະໝັກທີ່ຄວນມີຄຸນນະພາບພາຍໃນຊັ້ນກັນ.
ອີງຕາມການສະໜັບສະໜູນຂອງບູຣໍເຊີ້ວ ບ່ອນສະໝັກການເລືອກຈະຖືກສະແດງໃຫ້ເປັນຄວາມສະແດງກະພິບ.
ຄວາມຈຳນວນ
<form> <input type="range" name="points" min="0" max="10"> </form>
ທ່ານສາມາດນຳໃຊ້ປະເພດດັ່ງຕໍ່ມາເພື່ອກໍານົດຂໍ້ຈຳກັດ: min, max, step, value.
ປະເພດການເລືອກ: month
<input type="month"> ອະນຸຍາດຜູ້ນຳໃຊ້ເລືອກພຶດສະພາແລະປີ.
ອີງຕາມການສະໜັບສະໜູນຂອງບູຣໍເຊີ້ວ ປະເພດເລືອກວັນຈະຖືກສະແດງໃນບ່ອນສະໝັກຂອງບົດສະຫຼຸບ.
ຄວາມຈຳນວນ
<form> ວັນເສັງ (ພຶດສະພາ ແລະ ປີ): <input type="month" name="bdaymonth"> </form>
ປະເພດການເລືອກ: week
<input type="week"> ອະນຸຍາດຜູ້ນຳໃຊ້ເລືອກຟອມແລະປີ.
ອີງຕາມການສະໜັບສະໜູນຂອງບູຣໍເຊີ້ວ ປະເພດເລືອກວັນຈະຖືກສະແດງໃນບ່ອນສະໝັກຂອງບົດສະຫຼຸບ.
ຄວາມຈຳນວນ
<form> ເລືອກຟອມປີ: <input type="week" name="week_year"> </form>
ປະເພດການເລືອກ: time
<input type="time"> ອະນຸຍາດຜູ້ນຳໃຊ້ເລືອກເວລາ (ບໍ່ມີເວລາເຂດພາກກາງ).
ອີງຕາມການສະໜັບສະໜູນຂອງບູຣໍເຊີ້ວ ປະເພດເລືອກເວລາຈະຖືກສະແດງໃນບ່ອນສະໝັກຂອງບົດສະຫຼຸບ.
ຄວາມຈຳນວນ
<form> ເລືອກເວລາ: <input type="time" name="usr_time"> </form>
ປະເພດການເລືອກ: datetime
<input type="datetime"> ອະນຸຍາດຜູ້ນຳໃຊ້ເລືອກວັນແລະເວລາ (ມີເວລາເຂດພາກກາງ).
ອີງຕາມການສະໜັບສະໜູນຂອງບູຣໍເຊີ້ວ ປະເພດເລືອກວັນຈະຖືກສະແດງໃນບ່ອນສະໝັກຂອງບົດສະຫຼຸບ.
ຄວາມຈຳນວນ
<form> ວັນເສັງ (ສະຖານະການ ແລະ ເວລາ): <input type="datetime" name="bdaytime"> </form>
ປະເພດການເລືອກ: datetime-local
<input type="datetime-local"> ອະນຸຍາດຜູ້ນຳໃຊ້ເລືອກວັນແລະເວລາ (ບໍ່ມີເວລາເຂດພາກກາງ).
ອີງຕາມການສະໜັບສະໜູນຂອງບູຣໍເຊີ້ວ ປະເພດເລືອກວັນຈະຖືກສະແດງໃນບ່ອນສະໝັກຂອງບົດສະຫຼຸບ.
ຄວາມຈຳນວນ
<form> ວັນເສັງ (ສະຖານະການ ແລະ ເວລາ): </form>
输入类型：email
用于应该包含电子邮件地址的输入字段。
ອີງຕາມການສະໜັບສະໜູນບັນຊີບັນນາທິການ, ຈະມີການການການກວດກາຂັ້ນນວນອີເມວ ໃນການສົ່ງອີງ.
ບາງຄັນຈະຮູ້ວ່າມີປະເພດ email, ແລະສະເໜີ ".com" ເພື່ອຕິດຕາມການເລີ່ມຂອງອີເມວ.
ຄວາມຈຳນວນ
<form> ອີເມວ: <input type="email" name="email"> </form>
ປະເພດ: search
<input type="search"> ສະຖານທີ່ສະໜັບສະໜູນທີ່ຄວນສະໜັບສະໜູນທີ່ມີການຄົ້ນຫາ (ສະແບບສະຖານທີ່ຄົ້ນຫາຄືກັບສະຖານທີ່ຂໍ້ຄວາມທຳມະດາ).
ຄວາມຈຳນວນ
<form> ຄົ້ນຫາ Google: <input type="search" name="googlesearch"> </form>
ປະເພດ: tel
<input type="tel"> ສະຖານທີ່ສະໜັບສະໜູນທີ່ຄວນສະໜັບສະໜູນທີ່ມີໂທລະສັບ.
ພຽງແຕ່ Safari 8 ສະໜັບສະໜູນປະເພດ tel.
ຄວາມຈຳນວນ
<form> ໂທລະສັບ: <input type="tel" name="usrtel"> </form>
ປະເພດ: url
<input type="url"> ສະຖານທີ່ສະໜັບສະໜູນທີ່ຄວນສະໜັບສະໜູນທີ່ມີທາງອິນເຕີເນັດ.
ອີງຕາມການສະໜັບສະໜູນບັນຊີບັນນາທິການ, ຈະມີການການການກວດກາຂັ້ນນວນ url ໃນການສົ່ງອີງ.
ບາງຄັນຈະຮູ້ວ່າມີປະເພດ url, ແລະສະເໜີ ".com" ເພື່ອຕິດຕາມການເລີ່ມຂອງ url.
ຄວາມຈຳນວນ
<form> ການເພີ່ມຫົວໜ້າເວັບໄຊ: <input type="url" name="homepage"> </form>
- ກ່ອນການ HTML5 ບັນຫາບັນກະພິບ
- ຫລັງການ HTML5 ການສະແດງບັນກະພິບ
