บทช่วยสอนHTML

HTML หน้าแรก บทนำ HTML โปรแกรมแก้ไข HTML HTML พื้นฐาน องค์ประกอบ HTML แอตทริบิวต์ HTML ส่วนหัว HTML ย่อหน้า HTML รูปแบบ HTML การจัดรูปแบบ HTML ใบเสนอราคา HTML ความคิดเห็น HTML HTML สี HTML CSS ลิงค์ HTML รูปภาพ HTML HTML Favicon ตาราง HTML รายการ HTML บล็อก HTML & อินไลน์ คลาส HTML รหัส HTML HTML Iframes HTML JavaScript เส้นทางไฟล์ HTML หัวหน้า HTML เค้าโครง HTML HTML Responsive HTML รหัสคอมพิวเตอร์ HTML Semantics คู่มือสไตล์ HTML เอนทิตี HTML สัญลักษณ์ HTML HTML Emojis ชุดอักขระ HTML การเข้ารหัส URL HTML HTML กับ XHTML

แบบฟอร์มHTML

แบบฟอร์ม HTML คุณสมบัติแบบฟอร์ม HTML องค์ประกอบแบบฟอร์ม HTML ประเภทอินพุต HTML แอตทริบิวต์การป้อนข้อมูล HTML แอตทริบิวต์แบบฟอร์มการป้อนข้อมูล HTML

กราฟิกHTML

HTML Canvas HTML SVG

สื่อHTML

สื่อ HTML วิดีโอ HTML HTML Audio ปลั๊กอิน HTML HTML YouTube

HTML APIs

HTML Geolocation HTML ลาก/วาง HTML Web Storage HTML Web Workers HTML SSE

ตัวอย่างHTML

ตัวอย่าง HTML แบบทดสอบ HTML แบบฝึกหัด HTML ใบรับรอง HTML สรุป HTML การเข้าถึง HTML

ข้อมูลอ้างอิงHTML

รายการแท็ก HTML แอตทริบิวต์ HTML HTML Global Attributes รองรับ HTML Browser เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ HTML Doctypes ชุดอักขระ HTML การเข้ารหัส URL HTML HTML Lang Codes ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด

ประเภทอินพุต HTML


บทนี้อธิบายประเภทต่างๆ สำหรับ<input>องค์ประกอบ HTML


ประเภทอินพุต HTML

ต่อไปนี้คือประเภทอินพุตต่างๆ ที่คุณสามารถใช้ได้ใน HTML:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

เคล็ดลับ:ค่าเริ่มต้นของtypeแอตทริบิวต์คือ "ข้อความ"


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

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

ตัวอย่าง

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:

ชื่อจริง:

นามสกุล:


ใส่ประเภทรหัสผ่าน

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

ตัวอย่าง

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:

ชื่อผู้ใช้:

รหัสผ่าน:

อักขระในช่องรหัสผ่านถูกปิดบัง (แสดงเป็นเครื่องหมายดอกจันหรือวงกลม)



ประเภทอินพุต ส่ง

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

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

ตัวจัดการแบบฟอร์มถูกระบุในaction แอตทริบิวต์ของแบบฟอร์ม:

ตัวอย่าง

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:

ชื่อจริง:

นามสกุล:


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

ตัวอย่าง

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit">
</form>

ประเภทอินพุต รีเซ็ต

<input type="reset">กำหนดปุ่มรีเซ็ต ที่จะรีเซ็ตค่าแบบฟอร์มทั้งหมดเป็นค่าเริ่มต้น:

ตัวอย่าง

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:

ชื่อจริง:

นามสกุล:


หากคุณเปลี่ยนค่าอินพุตแล้วคลิกปุ่ม "รีเซ็ต" ข้อมูลแบบฟอร์มจะถูกรีเซ็ตเป็นค่าเริ่มต้น


ประเภทอินพุต วิทยุ

<input type="radio">กำหนดปุ่มตัวเลือก

ปุ่มตัวเลือกให้ผู้ใช้เลือกได้เพียงตัวเลือกเดียวเท่านั้น:

ตัวอย่าง

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:




ช่องทำเครื่องหมายประเภทอินพุต

<input type="checkbox">กำหนด ช่อง ทำเครื่องหมาย

ช่องทำเครื่องหมายให้ผู้ใช้เลือกตัวเลือก ZERO หรือ MORE จากตัวเลือกจำนวนจำกัด

ตัวอย่าง

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:




ปุ่มประเภทอินพุต

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

ตัวอย่าง

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

นี่คือลักษณะที่โค้ด HTML ด้านบนจะแสดงในเบราว์เซอร์:


ประเภทอินพุต สี

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

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

ตัวอย่าง

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

ประเภทอินพุต วันที่

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

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

ตัวอย่าง

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

คุณยังสามารถใช้ แอตทริบิวต์ minและmaxเพื่อเพิ่มการจำกัดวันที่:

ตัวอย่าง

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

ประเภทอินพุต Datetime-local

ระบุ ช่อง<input type="datetime-local">ป้อนวันที่และเวลาโดยไม่มีเขตเวลา

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

ตัวอย่าง

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

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

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

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

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

ตัวอย่าง

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

ไฟล์ประเภทอินพุต

กำหนด ช่อง<input type="file"> เลือกไฟล์และปุ่ม "เรียกดู" สำหรับการอัปโหลดไฟล์

ตัวอย่าง

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

ประเภทอินพุต ซ่อน

กำหนด ช่อง<input type="hidden"> ป้อนข้อมูลที่ซ่อนอยู่ (ไม่ปรากฏให้ผู้ใช้เห็น)

ฟิลด์ที่ซ่อนอยู่ช่วยให้นักพัฒนาเว็บรวมข้อมูลที่ผู้ใช้ไม่สามารถมองเห็นหรือแก้ไขเมื่อส่งแบบฟอร์ม

ฟิลด์ที่ซ่อนอยู่มักจะเก็บบันทึกฐานข้อมูลที่จำเป็นต้องปรับปรุงเมื่อส่งแบบฟอร์ม

หมายเหตุ:แม้ว่าค่าจะไม่แสดงต่อผู้ใช้ในเนื้อหาของหน้า แต่ก็สามารถมองเห็นได้ (และสามารถแก้ไขได้) โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์หรือฟังก์ชัน "View Source" อย่าใช้อินพุตที่ซ่อนอยู่เป็นรูปแบบของการรักษาความปลอดภัย!

ตัวอย่าง

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

ประเภทอินพุต เดือน

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

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

ตัวอย่าง

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

อินพุตประเภทจำนวน

<input type="number">กำหนดช่องป้อน ตัวเลข

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

Example

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

Input Restrictions

Here is a list of some common input restrictions:

Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:

Example

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

Input Type Range

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

Example

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

Example

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

Example

<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Input Type Time

The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

Example

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

Example

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

Input Type Week

The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

Example

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>

HTML Exercises

Test Yourself With Exercises

Exercise:

In the form below, add an input field for text, with the name "username" .

<form action="/action_page.php">
<>
</form>


HTML Input Type Attribute

Tag Description
<input type=""> Specifies the input type to display