ประเภทการบันทึก HTML
- หน้าก่อนหน้า ตัวแทนฟอร์ม HTML
- หน้าต่อไป คุณสมบัติ Input HTML
บทที่นี้บรรยายประเภทการบันทึกขององค์ประกอบ <input>
ประเภทการบันทึก: 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) โดยทั่วไปเป็นหน้าเว็บไซต์ที่มีสคริปต์สำหรับจัดการข้อมูลที่นำเข้า
Specify the form handler (form-handler) in the action attribute of the form:
ตัวอย่าง
<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"> กำหนดตัวเลือกกันตรงกันข้าม
ตัวเลือกกันตรงกันข้ามอนุญาตให้ผู้ใช้เลือกโดยไม่มีจำกัดหรือหลายๆ ตัวเลือกในจำนวนที่จำกัด
ตัวอย่าง
<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
