ใส่ HTML ประเภท

ประเภทการป้อนข้อมูล

บทนี้จะอธิบายประเภทการป้อนข้อมูลของ <input> องค์ประกอบ

ประเภทขาเข้า: ข้อความ

<input type="text"> กำหนดช่องใส่หนึ่งบรรทัดสำหรับป้อนข้อความ:

นี่คือวิธีที่โค้ด HTML ดังกล่าวข้างต้นจะถูกแสดงในเบราว์เซอร์:

ชื่อจริง:

นามสกุล:

ประเภทขาเข้า: รหัสผ่าน

<input type="password"> กำหนดฟิลด์รหัสผ่าน:

นี่คือวิธีที่โค้ด HTML ดังกล่าวข้างต้นจะถูกแสดงในเบราว์เซอร์:

ชื่อผู้ใช้:

รหัสผ่านผู้ใช้:

ประเภทขาเข้า: submit

<input type="submit"> กำหนดปุ่มสำหรับการส่งแบบฟอร์มการป้อนข้อมูลให้อยู่ในรูปตัวจัดการ

รูปแบบที่จัดการโดยปกติจะเป็นหน้าเซิร์ฟเวอร์ที่มีสคริปต์สำหรับการป้อนข้อมูลการประมวลผล

รูปแบบจัดการที่ระบุไว้ในแอตทริบิวต์ action ฟอร์ม:

นี่คือวิธีที่โค้ด HTML ดังกล่าวข้างต้นจะถูกแสดงในเบราว์เซอร์:

ชื่อจริง:

นามสกุล:

ถ้าคุณไม่ใช้แอตทริบิวต์ค่าปุ่มส่งของปุ่มจะได้รับข้อความเริ่มต้น:

ประเภทขาเข้า: radio

<input type="radio"> กำหนด radio ปุ่ม

Radio ปุ่มให้ผู้ใช้เลือกเพียงหนึ่งในจำนวนที่ จำกัด ของตัวเลือก:

นี่คือวิธีที่โค้ด HTML ดังกล่าวข้างต้นจะถูกแสดงในเบราว์เซอร์:

ชาย
หญิง
อื่น ๆ

ประเภทขาเข้า: checkbox

<input type="checkbox"> กำหนด checkbox

Checkboxes ให้ผู้ใช้เลือกศูนย์หรือมากกว่าตัวเลือกของมีจำนวน จำกัด ของตัวเลือก

นี่คือวิธีที่โค้ด HTML ดังกล่าวข้างต้นจะถูกแสดงในเบราว์เซอร์:

ฉันมีจักรยาน
ผมมีรถ

ประเภทขาเข้า: button

<input type="button"> กำหนด button :

นี่คือวิธีที่โค้ด HTML ดังกล่าวข้างต้นจะถูกแสดงในเบราว์เซอร์:

HTML5 Input ประเภท

HTML5 เพิ่มใหม่หลาย input ประเภท:

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Input ประเภท: number

<input type="number"> ใช้สำหรับช่องใส่ว่าควรจะมีค่าตัวเลข

คุณสามารถตั้งข้อ จำกัด เกี่ยวกับตัวเลข

ทั้งนี้ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์, ข้อ จำกัด ที่สามารถนำไปใช้กับช่องใส่

ตัวอย่าง

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

ลองตัวเอง»

Input ข้อ จำกัด

นี่คือรายการของบางส่วนร่วมกัน input ข้อ จำกัด (some are new in HTML5) :

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ input ข้อ จำกัด ในบทต่อไป

ตัวอย่าง

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

ลองตัวเอง»

Input ประเภท date

<input type="date"> ใช้สำหรับช่องใส่ว่าควรจะมีวันที่

ทั้งนี้ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์ตัวเลือกวันที่สามารถแสดงขึ้นมาในช่องใส่

ตัวอย่าง

<form>
  Birthday:
  <input type="date" name="bday">
</form>

ลองตัวเอง»

คุณสามารถเพิ่มข้อ จำกัด กับ input :

ตัวอย่าง

<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>

ลองตัวเอง»

Input ประเภทสี

<input type="color"> ใช้สำหรับช่องใส่ที่ควรมีสี

ทั้งนี้ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์ตัวเลือกสีสามารถแสดงขึ้นมาในช่องใส่

ตัวอย่าง

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

ลองตัวเอง»

Input ประเภท: ช่วง

<input type="range"> ใช้สำหรับช่องใส่ที่ควรมีค่าที่อยู่ในช่วง

ทั้งนี้ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์, ช่องใส่ที่สามารถแสดงผลเป็นตัวควบคุมการเลื่อน

ตัวอย่าง

<form>
  <input type="range" name="points" min="0" max="10">
</form>

ลองตัวเอง»

คุณสามารถใช้ following แอตทริบิวต์การระบุข้อ จำกัด : ต่ำสุด, สูงสุดขั้นตอนค่า

Input ประเภท: month

<input type="month"> ช่วยให้ผู้ใช้เลือกเดือนและปี

ทั้งนี้ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์ตัวเลือกวันที่สามารถแสดงขึ้นมาในช่องใส่

ตัวอย่าง

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

ลองตัวเอง»

Input ประเภท: week

<input type="week"> ช่วยให้ผู้ใช้สามารถเลือกสัปดาห์และปี

ทั้งนี้ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์ตัวเลือกวันที่สามารถแสดงขึ้นมาในช่องใส่

ตัวอย่าง

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

ลองตัวเอง»

Input ประเภท: time

<input type="time"> ช่วยให้ผู้ใช้สามารถเลือกเวลา (no time zone)

ทั้งนี้ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์ตัวเลือกเวลาที่สามารถแสดงขึ้นมาในช่องใส่

ตัวอย่าง

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

ลองตัวเอง»

Input ประเภท datetime

<input type="datetime"> ช่วยให้ผู้ใช้สามารถเลือกวันที่และเวลา (with time zone)

ตัวอย่าง

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

ลองตัวเอง»

	ประเภทการป้อนข้อมูลวันที่และเวลาจะถูกลบออกจากมาตรฐานของ HTML ใช้วันที่และเวลาท้องถิ่นแทน

ประเภทขาเข้า: วันที่และเวลาท้องถิ่น

<input type="datetime-local"> ช่วยให้ผู้ใช้สามารถเลือกวันที่และเวลา (no time zone)

ทั้งนี้ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์ตัวเลือกวันที่สามารถแสดงขึ้นมาในช่องใส่

ตัวอย่าง

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

ลองตัวเอง»

ประเภทขาเข้าอีเมลล์

<input type="email"> ใช้สำหรับช่องใส่ที่ควรมีที่อยู่อีเมล

ทั้งนี้ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์ที่ e-mail address สามารถตรวจสอบโดยอัตโนมัติเมื่อส่ง

มาร์ทโฟนบางคนรู้จักประเภทของอีเมลและเพิ่ม ".com" ไปที่แป้นพิมพ์เพื่อให้ตรงกับใส่อีเมล์ของท่าน

ตัวอย่าง

<form>
  E-mail:
  <input type="email" name="email">
</form>

ลองตัวเอง»

ประเภทขาเข้า: การค้นหา

<input type="search"> ถูกนำมาใช้สำหรับเขตข้อมูลการค้นหา (a search field behaves like a regular text field)

ตัวอย่าง

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

ลองตัวเอง»

ประเภทขาเข้า: โทร

<input type="tel"> ใช้สำหรับช่องใส่ที่ควรมีหมายเลขโทรศัพท์

ประเภทโทรปัจจุบันสนับสนุนเฉพาะใน Safari 8

ตัวอย่าง

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

ลองตัวเอง»

ประเภทขาเข้า: URL

<input type="url"> ใช้สำหรับช่องใส่ที่ควรมีที่อยู่ URL ที่

ทั้งนี้ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์, ฟิลด์ URL สามารถตรวจสอบโดยอัตโนมัติเมื่อส่ง

มาร์ทโฟนบางคนรู้จักพิมพ์ URL และเพิ่ม ".com" ไปที่แป้นพิมพ์เพื่อให้ตรงกับการป้อน URL

ตัวอย่าง

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

ลองตัวเอง»

ทดสอบตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ใช้สิทธิ 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ใช้สิทธิ 5 »