ประเภทการบันทึก HTML
- หน้าก่อนหน้า องค์ประกอบฟอร์ม HTML
- หน้าต่อไป รายละเอียดทางเทคนิคของ Input HTML
บทที่นี้บรรยายประเภทการบันทึกของอัลตราทีม
ประเภทการบันทึก: text
<input type="text"> กำหนดให้การบันทึกข้อความช่องบันทึกข้อความเดี่ยว:
ตัวอย่าง
<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form>
以上 HTML 代码在浏览器中看上去是这样的：
ประเภทการบันทึก: password
<input type="password"> กำหนดช่องพาสเวิร์ด：
ตัวอย่าง
<form> ชื่อผู้ใช้:<br> <input type="text" name="username"> <br> พาสเวิร์ดผู้ใช้:<br> <input type="password" name="psw"> </form>
以上 HTML 代码在浏览器中看上去是这样的：
注释：ตัวอักษรในช่องพาสเวิร์ด (password) จะถูกปกปิดด้วยรหัส (แสดงด้วยดาวหรือวงกลม)
ประเภทการบันทึก: submit
<input type="submit"> กำหนดส่งข้อมูลฟอร์มโปรแกรมการจัดการฟอร์มของปุ่ม
โปรแกรมการจัดการฟอร์ม (form-handler) มักเป็นหน้าเว็บเซิร์ฟเวอร์ที่มีสคริปต์ที่จัดการข้อมูลที่นำเข้ามา
In the action attribute of the form, specify the form handler (form-handler):
ตัวอย่าง
<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
以上 HTML 代码在浏览器中看上去是这样的：
If you omit the value attribute of the submit button, the button will get the default text:
ตัวอย่าง
<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<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"> กำหนดตัวเลือกตรง
ตัวเลือกตรงหรือเลือกเล็กน้อยที่อนุญาตให้ผู้ใช้เลือกซ้ำ 0 ไปจนถึงหลายตัวจากจำนวนที่มีอยู่เพียงไม่กี่ตัว
ตัวอย่าง
<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
注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。
输入类型：number
<input type="number"> 用于应该包含数字值的输入字段。
您能够对数字做出限制。
根据浏览器支持，限制可应用到输入字段。
ตัวอย่าง
<form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> </form>
输入限制
这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：
| 属性 | 描述 |
|---|---|
| disabled | 规定输入字段应该被禁用。 |
| max | 规定输入字段的最大值。 |
| maxlength | 规定输入字段的最大字符数。 |
| min | 规定输入字段的最小值。 |
| pattern | 规定通过其检查输入值的正则表达式。 |
| readonly | 规定输入字段为只读（无法修改）。 |
| required | 规定输入字段是必需的（必需填写）。 |
| size | 规定输入字段的宽度（以字符计）。 |
| step | 规定输入字段的合法数字间隔。 |
| value | 规定输入字段的默认值。 |
您将在下一章学到更多有关输入限制的知识。
ตัวอย่าง
<form> Quantity: <input type="number" name="points" min="0" max="100" step="10" value="30"> </form>
输入类型：date
<input type="date"> 用于应该包含日期的输入字段。
ตามการสนับสนุนของเว็บเบราซเรอร์ โปรแกรมเลือกวันที่และเวลา จะแสดงในช่องบันทึกข้อมูล
ตัวอย่าง
<form> Birthday: <input type="date" name="bday"> </form>
您可以向输入添加限制：
ตัวอย่าง
<form> Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Enter a date after 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> Birthday (month and year): <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> Birthday (date and time): <input type="datetime" name="bdaytime"> </form>
ประเภทของการบันทึกข้อมูล: datetime-local
<input type="datetime-local"> อนุญาตให้ผู้ใช้เลือกวันและเวลา (ไม่มีเวลาเขตเวลา)
ตามการสนับสนุนของเว็บเบราซเรอร์ โปรแกรมเลือกวันที่และเวลา จะแสดงในช่องบันทึกข้อมูล
ตัวอย่าง
<form> Birthday (date and time): <input type="datetime-local" name="bdaytime"> </form>
ชนิดของการเข้าข้อมูล: email
<input type="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 อัตโนมัติที่เมื่อส่งข้อมูล
บางโทรศัพท์มือถือระบุประเภท URL และเพิ่ม ".com" ในแปลงเป็นโทรศัพท์เพื่อตรงกับการเข้าข้อมูล URL
ตัวอย่าง
<form> เพิ่มหน้าเว็บหลักของคุณ: <input type="url" name="homepage"> </form>
- หน้าก่อนหน้า องค์ประกอบฟอร์ม HTML
- หน้าต่อไป รายละเอียดทางเทคนิคของ Input HTML
